Newer
Older
KaiFengPC / src / views / spongePerformance / ManagementPerformance / SpongeCityConstruction.vue
@鲁yixuan 鲁yixuan on 6 Jun 5 KB update
  1. <template>
  2. <div class="publicContainer">
  3. <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
  4. <el-form-item label="时间" prop="date">
  5. <el-date-picker
  6. clearable
  7. v-model="queryParams.installDate"
  8. type="date"
  9. value-format="YYYY-MM-DD"
  10. placeholder="请选择安装日期"
  11. style="width: 100%"
  12. >
  13. </el-date-picker>
  14. </el-form-item>
  15.  
  16. <el-form-item>
  17. <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
  18. <el-button type="primary" icon="Plus" @click="handleAdd">新增</el-button>
  19. <el-button icon="Refresh" @click="resetQuery">重置</el-button>
  20. </el-form-item>
  21. </el-form>
  22.  
  23. <!-- 表格 -->
  24. <el-table :data="dataList" v-loading="loading" stripe :max-height="580">
  25. <el-table-column type="index" width="55" label="序号" />
  26. <el-table-column label="时间" prop="q" />
  27. <el-table-column label="培训地点" prop="w" />
  28. <el-table-column label="培训内容" prop="e" />
  29. <el-table-column label="参加人员" prop="r" />
  30. <el-table-column label="链接" prop="t" />
  31.  
  32. <el-table-column label="操作" width="240">
  33. <template #default="scope">
  34. <el-button link icon="View" type="primary" @click="handleDetail(scope.row, 'view')">查看</el-button>
  35. <el-button link type="warning" icon="Edit" @click="handleUpdate(scope.row, 'view')">修改</el-button>
  36. <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row, 'view')">删除</el-button>
  37. </template>
  38. </el-table-column>
  39. </el-table>
  40. <!-- 分页 -->
  41. <pagination
  42. v-show="total > 0"
  43. :total="total"
  44. v-model:page="queryParams.pageNum"
  45. v-model:limit="queryParams.pageSize"
  46. @pagination="getList"
  47. />
  48. <!-- 新增弹窗 -->
  49. <el-dialog :title="title" v-model="open" width="800px" append-to-body :close-on-click-modal="false">
  50. <el-form ref="roleRef" :model="form" :rules="rules" label-width="130px" :disabled="multiple">
  51. <el-row :gutter="20">
  52. <el-col :span="12">
  53. <el-form-item label="时间:" prop="w">
  54. <el-date-picker
  55. clearable
  56. v-model="queryParams.installDate"
  57. type="date"
  58. value-format="YYYY-MM-DD"
  59. placeholder="请选择日期"
  60. style="width: 100%"
  61. >
  62. </el-date-picker>
  63. </el-form-item>
  64. </el-col>
  65. <el-col :span="12">
  66. <el-form-item label="培训地点:" prop="w">
  67. <el-input v-model="form.w" type="textarea" placeholder="请输入培训地点" clearable style="width: 100%" />
  68. </el-form-item>
  69. </el-col>
  70. </el-row>
  71.  
  72. <el-row :gutter="20">
  73. <el-col :span="12">
  74. <el-form-item label="培训内容:" prop="w">
  75. <el-input v-model="form.w" type="textarea" placeholder="请输入培训内容" clearable style="width: 100%" />
  76. </el-form-item>
  77. </el-col>
  78. <el-col :span="12">
  79. <el-form-item label="参加人员:" prop="fileTag1">
  80. <el-input v-model="form.w" type="textarea" placeholder="请输入参加人员" clearable style="width: 100%" />
  81. </el-form-item>
  82. </el-col>
  83. </el-row>
  84. <el-row :gutter="20">
  85. <el-col>
  86. <el-form-item label="链接:" prop="fileTag1">
  87. <el-input v-model="form.w" type="textarea" placeholder="请输入链接" clearable />
  88. </el-form-item>
  89. </el-col>
  90. </el-row>
  91. </el-form>
  92. <template #footer>
  93. <div class="dialog-footer">
  94. <el-button type="primary" @click="submitForm">确 定</el-button>
  95. <el-button @click="cancel">取 消</el-button>
  96. </div>
  97. </template>
  98. </el-dialog>
  99. </div>
  100. </template>
  101. <script setup name="WaterSupplyWaterPlants">
  102. const { proxy } = getCurrentInstance();
  103. const open = ref(false);
  104. const multiple = ref(false);
  105. const showSearch = ref(true);
  106. const Xcfrequency = ref([
  107. {
  108. value: 'tian',
  109. label: '天',
  110. },
  111. {
  112. value: 'zhou',
  113. label: '周',
  114. },
  115. ]);
  116. const loading = ref(true);
  117. const total = ref(0);
  118. const title = ref('');
  119. const dataList = ref([]);
  120. const AllData = reactive({
  121. id: '',
  122. form: {},
  123. queryParams: {
  124. pageNum: 1,
  125. pageSize: 10,
  126. caseType: 1,
  127. handleStatus: '',
  128. searchContent: '',
  129. },
  130. rules: {
  131. id: [{ required: true, message: '请输入', trigger: 'blur' }],
  132. eventDescription: [{ required: true, message: '请输入', trigger: 'blur' }],
  133. },
  134. });
  135. const { queryParams, form, rules } = toRefs(AllData);
  136. //搜索
  137. function handleQuery() {
  138. getList();
  139. }
  140. //重置
  141. function resetQuery() {
  142. proxy.resetForm('queryRef');
  143. handleQuery();
  144. }
  145. // 新增
  146. function handleAdd() {
  147. title.value = '新增水厂供水';
  148. open.value = true;
  149. form.value = {};
  150. multiple.value = false;
  151. form.value.fileTag = Xcfrequency.value[0].value;
  152. }
  153. // 新增中取消事件
  154. function cancel() {
  155. open.value = false;
  156. proxy.resetForm('roleRef');
  157. }
  158.  
  159. // 巡查频率下拉框点击事件
  160. function changeStation(value) {
  161. // console.log(value, 'value');
  162. }
  163.  
  164. //查看详情操作
  165. function handleDetail(row) {
  166. open.value = true;
  167. title.value = '查看水厂供水';
  168. multiple.value = true;
  169. form.value = row;
  170. }
  171. // 修改按钮操作
  172. function handleUpdate(row) {
  173. open.value = true;
  174. title.value = '修改水厂供水';
  175. multiple.value = false;
  176. form.value = { ...row };
  177. }
  178.  
  179. /** 查询列表 */
  180. const getList = async () => {
  181. // loading.value = true;
  182. loading.value = false;
  183. };
  184.  
  185. onMounted(() => {
  186. getList();
  187. });
  188. </script>
  189. <style scoped lang="scss">
  190. .dituclass {
  191. width: 100%;
  192. height: 300px;
  193. // background: red;
  194. margin-bottom: 10px;
  195. border: 1px solid #004565;
  196. }
  197. </style>