Newer
Older
KaiFengPC / src / views / dataAnalysis / manualAssay / urbanRivers.vue
@zhangdeliang zhangdeliang on 23 May 8 KB 初始化项目
  1. <template>
  2. <!-- 城区内河人工水位采集 -->
  3. <div class="publicContainer">
  4. <el-form :model="queryParams" ref="queryRef" :inline="true">
  5. <!-- <el-form-item label="采样年份:" prop="sampleYear">
  6. <el-date-picker
  7. clearable
  8. format="YYYY"
  9. value-format="YYYY"
  10. v-model="queryParams.sampleYear"
  11. type="year"
  12. placeholder="请选择"
  13. @change="change"
  14. />
  15. </el-form-item> -->
  16. <el-form-item label="采样时间:" prop="sampleTime">
  17. <el-date-picker
  18. clearable
  19. format="YYYY-MM"
  20. value-format="YYYY-MM"
  21. v-model="queryParams.sampleTime"
  22. type="month"
  23. placeholder="请选择"
  24. @change="change"
  25. />
  26. </el-form-item>
  27. <el-form-item>
  28. <el-button type="primary" icon="Search" @click="searchData">搜索</el-button>
  29. <el-button icon="Refresh" @click="resetData">重置</el-button>
  30. <el-button icon="Plus" type="success" @click="addData">新增上报</el-button>
  31. </el-form-item>
  32. </el-form>
  33. <!-- 表格 -->
  34. <el-table :data="tableData" v-loading="tableLoading" :max-height="650">
  35. <el-table-column type="index" width="55" label="序号" />
  36. <el-table-column label="采样月份" prop="sampleDate" />
  37. <el-table-column label="后湖" prop="houRiver" />
  38. <el-table-column label="董湖" prop="dongRiver" />
  39. <el-table-column label="春晖湖" prop="chunhuiRiver" />
  40. <el-table-column label="航空公园" prop="hkgyRiver" />
  41. <el-table-column label="湖北职业学院" prop="zyxyRiver" />
  42. <el-table-column label="操作" show-overflow-tooltip width="200">
  43. <template #default="{ row }">
  44. <el-button type="primary" link @click="checkDetail(row)">详情</el-button>
  45. <el-button type="primary" link @click="editData(row)">修改</el-button>
  46. <el-button type="danger" link @click="deleteData(row)">删除</el-button>
  47. </template>
  48. </el-table-column>
  49. </el-table>
  50. <!-- 分页 -->
  51. <pagination
  52. v-show="total > 0"
  53. :total="total"
  54. v-model:page="queryParams.pageNum"
  55. v-model:limit="queryParams.pageSize"
  56. @pagination="getDataList"
  57. />
  58. <!-- 添加 修改 查看彈框 -->
  59. <el-dialog :title="dialogTitle" v-model="showDialog" width="50%" :close-on-click-modal="false">
  60. <el-form ref="ruleForm" :model="formData" :rules="formRules" label-width="150" :disabled="isDisab">
  61. <el-row>
  62. <el-form-item label="采样时间:" prop="sampleTime1">
  63. <el-date-picker
  64. clearable
  65. format="YYYY-MM"
  66. value-format="YYYY-MM"
  67. v-model="formData.sampleTime1"
  68. type="month"
  69. placeholder="请选择"
  70. @change="change"
  71. />
  72. </el-form-item>
  73. <el-form-item label="后湖:" prop="houRiver" style="width: 45%">
  74. <el-input v-model="formData.houRiver" placeholder="请输入" style="width: 100%" clearable />
  75. </el-form-item>
  76.  
  77. <el-form-item label="董湖:" prop="dongRiver" style="width: 45%">
  78. <el-input v-model="formData.dongRiver" placeholder="请输入" style="width: 100%" clearable />
  79. </el-form-item>
  80.  
  81. <el-form-item label="春晖湖:" prop="chunhuiRiver" style="width: 45%">
  82. <el-input v-model="formData.chunhuiRiver" placeholder="请输入" style="width: 100%" clearable />
  83. </el-form-item>
  84. <el-form-item label="航空公园:" prop="hkgyRiver" style="width: 45%">
  85. <el-input v-model="formData.hkgyRiver" placeholder="请输入" style="width: 100%" clearable />
  86. </el-form-item>
  87. <el-form-item label="湖北职业学院:" prop="zyxyRiver" style="width: 45%">
  88. <el-input v-model="formData.zyxyRiver" placeholder="请输入" style="width: 100%" clearable />
  89. </el-form-item>
  90. </el-row>
  91. </el-form>
  92. <template #footer>
  93. <div class="dialog-footer">
  94. <el-button type="primary" @click="submitForm" v-show="!isDisab">保 存</el-button>
  95. <el-button @click="cancel">关闭</el-button>
  96. </div>
  97. </template>
  98. </el-dialog>
  99. </div>
  100. </template>
  101. <script setup>
  102. import {
  103. artificialInlandRiversWaterPage,
  104. artificialInlandRiversWaterAdd,
  105. waterQualitySampleInfoEdit,
  106. artificialInlandRiversWaterDelete,
  107. } from '@/api/newPageline/riverCapacity.js';
  108. const { proxy } = getCurrentInstance();
  109. const tableData = ref([]);
  110. const tableLoading = ref(false);
  111. const isDisab = ref(false);
  112. const showDialog = ref(false);
  113. const dialogTitle = ref('');
  114. const total = ref(0);
  115. const AllData = reactive({
  116. formData: { sampleYear: '', sampleDate: '' },
  117. queryParams: {
  118. pageNum: 1,
  119. pageSize: 10,
  120. houRiver: '',
  121. dongRiver: '',
  122. chunhuiRiver: '',
  123. hkgyRiver: '',
  124. zyxyRiver: '',
  125. sampleTime: '',
  126. sampleYear: '',
  127. sampleDate: '',
  128. },
  129. formRules: {
  130. riverId: [{ required: true, message: '请选择', trigger: 'blur' }],
  131. sampleTime1: [{ required: true, message: '请选择', trigger: 'blur' }],
  132. },
  133. });
  134. const { queryParams, formData, formRules } = toRefs(AllData);
  135.  
  136. /** 表单重置 */
  137. function resetForm() {
  138. formData.value = {
  139. sampleDate: undefined,
  140. houRiver: undefined,
  141. dongRiver: undefined,
  142. chunhuiRiver: undefined,
  143. hkgyRiver: undefined,
  144. zyxyRiver: undefined,
  145. sampleTime: undefined,
  146. sampleYear: undefined,
  147. };
  148. proxy.resetForm('ruleForm');
  149. }
  150. //搜索
  151. function searchData() {
  152. queryParams.value.pageNum = 1;
  153. getDataList();
  154. }
  155. //重置
  156. function resetData() {
  157. proxy.resetForm('queryRef');
  158. searchData();
  159. }
  160.  
  161. /** 查询列表 */
  162. function getDataList() {
  163. tableLoading.value = true;
  164. if (queryParams.value.sampleTime) {
  165. queryParams.value.sampleYear = queryParams.value.sampleTime.split('-')[0];
  166. queryParams.value.sampleDate = queryParams.value.sampleTime;
  167. } else {
  168. queryParams.value.sampleYear = [];
  169. queryParams.value.sampleDate = [];
  170. }
  171. let param = {
  172. orderBy: 'id asc',
  173. pageNum: 1,
  174. pageSize: 10,
  175. ...queryParams.value,
  176. };
  177. artificialInlandRiversWaterPage(param).then(res => {
  178. tableData.value = res.data;
  179. total.value = res.total;
  180. tableLoading.value = false;
  181. });
  182. }
  183. /** 新增按钮操作 */
  184. function addData() {
  185. resetForm();
  186. isDisab.value = false;
  187. showDialog.value = true;
  188. dialogTitle.value = '新增上报';
  189. }
  190.  
  191. //表格修改
  192. function editData(row) {
  193. formData.value = { ...row };
  194. isDisab.value = false;
  195. showDialog.value = true;
  196. dialogTitle.value = '修改上报';
  197. console.log(row, 'row');
  198. formData.value.sampleTime1 = formData.value.sampleDate;
  199. }
  200.  
  201. //详情按钮
  202. function checkDetail(row) {
  203. dialogTitle.value = '查看上报记录';
  204. isDisab.value = true;
  205. showDialog.value = true;
  206. formData.value = { ...row };
  207. formData.value.sampleTime1 = formData.value.sampleDate;
  208. }
  209.  
  210. /** 新增弹框 修改弹框 提交按钮 */
  211. async function submitForm() {
  212. proxy.$refs['ruleForm'].validate(valid => {
  213. if (valid) {
  214. console.log('formData.value', formData.value);
  215. if (formData.value.sampleTime1) {
  216. formData.value.sampleYear = formData.value.sampleTime1.split('-')[0];
  217. formData.value.sampleDate = formData.value.sampleTime1;
  218. }
  219. if (formData.value.id != undefined) {
  220. waterQualitySampleInfoEdit(formData.value).then(() => {
  221. console.log(formData.value, 'formData.value');
  222. proxy.$modal.msgSuccess('修改成功');
  223. showDialog.value = false;
  224. getDataList();
  225. });
  226. } else {
  227. artificialInlandRiversWaterAdd(formData.value).then(() => {
  228. console.log(formData.value, 'formData.valueformData.valueformData.value');
  229. proxy.$modal.msgSuccess('新增成功');
  230. showDialog.value = false;
  231. getDataList();
  232. });
  233. }
  234. }
  235. });
  236. }
  237. // 表格删除
  238. function deleteData(row) {
  239. proxy.$modal
  240. .confirm('是否确认删除?')
  241. .then(async () => {
  242. const res = await artificialInlandRiversWaterDelete(row.id);
  243. if (res?.code !== 200) return;
  244. proxy.$modal.msgSuccess('操作成功!');
  245. getDataList();
  246. })
  247. .catch(() => {});
  248. }
  249.  
  250. /** 取消按钮 */
  251. function cancel() {
  252. showDialog.value = false;
  253. resetForm();
  254. }
  255.  
  256. onMounted(() => {
  257. getDataList();
  258. });
  259. </script>
  260. <style scoped lang="scss"></style>