Newer
Older
KaiFengPC / src / views / spongePerformance / longTerm / examinemanage / index.vue
@zhangdeliang zhangdeliang on 23 May 6 KB 初始化项目
  1. <template>
  2. <div class="examineManage">
  3. <div class="top">
  4. <el-form ref="ruleForm" :model="form">
  5. <el-row :gutter="20">
  6. <el-col :span="4">
  7. <el-form-item label="考核年度:" prop="time">
  8. <el-date-picker v-model="form.year" type="year" value-format="YYYY" placeholder="请选择年份" style="width: 100%" />
  9. </el-form-item>
  10. </el-col>
  11. <el-col :span="3">
  12. <el-form-item>
  13. <el-button type="primary" icon="Search" @click="search"> 查询</el-button>
  14. <el-button icon="Refresh" @click="resetQuery">重置</el-button>
  15. </el-form-item>
  16. </el-col>
  17. </el-row>
  18. </el-form>
  19. <el-row class="mb8">
  20. <el-button class="mr10" type="primary" plain icon="Plus" @click="openDialog(_, 'add')">新增</el-button>
  21. </el-row>
  22. </div>
  23. <el-table :data="tableData" v-loading="loading" :max-height="600">
  24. <el-table-column type="index" width="55" label="序号" />
  25. <el-table-column label="年份" prop="year" show-overflow-tooltip />
  26. <el-table-column label="更新时间" prop="updateTime" show-overflow-tooltip />
  27. <el-table-column label="修改人" prop="updateBy" show-overflow-tooltip />
  28. <el-table-column label="备注" prop="remark" show-overflow-tooltip />
  29. <el-table-column label="操作" show-overflow-tooltip width="340">
  30. <template #default="{ row }">
  31. <el-button link type="primary" icon="View" @click="operateHandle(row, 'view')">查看</el-button>
  32. <el-button type="warning" icon="Edit" link @click="openDialog(row, 'edit')">编辑</el-button>
  33. <el-button type="success" icon="Edit" link @click="operateHandle(row, 'edit')">指标</el-button>
  34. <el-button type="danger" icon="Delete" link @click="del(row)">删除</el-button>
  35. </template>
  36. </el-table-column>
  37. </el-table>
  38. <pagination :total="total" v-model:page="pageNum" v-model:limit="pageSize" @pagination="getTableList" />
  39. <el-dialog
  40. v-model="visible"
  41. :title="`${opts.text}绩效评估`"
  42. :close-on-click-modal="false"
  43. width="30%"
  44. :before-close="close"
  45. class="dialog"
  46. >
  47. <el-form ref="dialogruleForm" :rules="ruleFormRules" :model="dialogform" label-width="auto">
  48. <el-form-item label="考核年度:" prop="year">
  49. <el-date-picker
  50. v-model="dialogform.year"
  51. type="year"
  52. placeholder="请选择年份"
  53. style="width: 100%"
  54. value-format="YYYY"
  55. :disabled="opts.type == 'edit'"
  56. />
  57. </el-form-item>
  58. <el-form-item label="备注:" prop="remark">
  59. <el-input v-model="dialogform.remark" type="textarea" placeholder="请输入备注"></el-input>
  60. </el-form-item>
  61. </el-form>
  62. <template #footer v-if="opts.type !== 'view'">
  63. <div class="dialog-footer">
  64. <el-button type="primary" @click="submit">保存</el-button>
  65. <el-button @click="close">取消</el-button>
  66. </div>
  67. </template>
  68. </el-dialog>
  69. </div>
  70. </template>
  71.  
  72. <script setup>
  73. import { ref, reactive, onMounted } from 'vue';
  74. import operate from './operate.vue';
  75. import {
  76. getAssessTargetConfigPage,
  77. assessTargetConfigCopy,
  78. assessTargetConfigDel,
  79. performanceConfigAdd,
  80. performanceConfigEdit,
  81. } from '@/api/spongePerformance/examineManage.js';
  82. import { optTextMap, statusMap } from '@/utils/map';
  83. import { usePagination } from '@/hooks';
  84. const { proxy } = getCurrentInstance();
  85. // const route = useRoute();
  86. const dialogform = ref({});
  87. const router = useRouter();
  88. const emit = defineEmits(['toggle']);
  89. const { sponge_engineering_type } = proxy.useDict('sponge_engineering_type');
  90. const engineeringTypeText = itemType => {
  91. const item = sponge_engineering_type.value.find(it => it.value === itemType);
  92. return item?.label || '';
  93. };
  94. const { assess_type } = proxy.useDict('assess_type');
  95. const assessTypeText = itemType => {
  96. const item = assess_type.value.find(it => it.value === itemType);
  97. return item?.label || '';
  98. };
  99. const ruleFormRules = {
  100. year: [{ required: true, message: '考核年度不能为空', trigger: ['change'] }],
  101. };
  102. const form = ref({
  103. status: '',
  104. time: [],
  105. });
  106. const params = computed(() => {
  107. const args = JSON.parse(JSON.stringify(form.value));
  108. const { time } = args;
  109. delete args.time;
  110. return {
  111. ...args,
  112. openStartTime: time[0] || '',
  113. openEndTime: time[1] || '',
  114. };
  115. });
  116.  
  117. const { pageNum, pageSize, tableData, total, loading, getTableList } = usePagination(getAssessTargetConfigPage, params);
  118. const opts = reactive({
  119. type: '',
  120. text: '',
  121. });
  122. const visible = ref(false);
  123.  
  124. const search = () => {
  125. pageNum.value = 1;
  126. getTableList();
  127. };
  128.  
  129. const resetQuery = () => {
  130. form.value.year = '';
  131. proxy.$refs.ruleForm.resetFields();
  132. search();
  133. };
  134.  
  135. const openDialog = (row, type) => {
  136. visible.value = true;
  137. opts.type = type;
  138. if (type == 'edit') dialogform.value = row;
  139. else dialogform.value = {};
  140. };
  141. const close = type => {
  142. visible.value = false;
  143. proxy.$refs.dialogruleForm.resetFields();
  144. };
  145.  
  146. const submit = () => {
  147. proxy.$refs.dialogruleForm.validate(async (valid, fields) => {
  148. if (valid) {
  149. const params = { ...dialogform.value };
  150. console.log('opts.type', opts.type);
  151. if (opts.type == 'add') {
  152. const res = await performanceConfigAdd(params);
  153. if (res?.code !== 200) return;
  154. proxy.$modal.msgSuccess('操作成功!');
  155. visible.value = false;
  156. } else {
  157. const res = await performanceConfigEdit(params);
  158. if (res?.code !== 200) return;
  159. proxy.$modal.msgSuccess('操作成功!');
  160. visible.value = false;
  161. }
  162. getTableList();
  163. } else {
  164. console.log('error submit!', fields);
  165. }
  166. });
  167. };
  168.  
  169. const operateHandle = (data, type) => {
  170. console.log('data', data);
  171. router.push(`/examinemanage/control/${data.id}?type=${type}&status=${data.status}&name=${data.configName}&year=${data.year}`);
  172. };
  173.  
  174. const copy = row => {
  175. proxy.$modal
  176. .confirm('是否确认复制?')
  177. .then(async () => {
  178. const formData = new FormData();
  179. formData.append('assessTargetId', row.id);
  180. const res = await assessTargetConfigCopy(formData);
  181. if (res?.code !== 200) return;
  182. proxy.$modal.msgSuccess('操作成功!');
  183. getTableList();
  184. })
  185. .catch(() => {});
  186. };
  187.  
  188. const del = row => {
  189. proxy.$modal
  190. .confirm('是否确认删除?')
  191. .then(async () => {
  192. const res = await assessTargetConfigDel(row.id);
  193. if (res?.code !== 200) return;
  194. proxy.$modal.msgSuccess('操作成功!');
  195. getTableList();
  196. })
  197. .catch(() => {});
  198. };
  199.  
  200. onMounted(() => {
  201. getTableList();
  202. });
  203. </script>
  204.  
  205. <style lang="scss" scoped>
  206. .examineManage {
  207. padding: 20px;
  208. height: 90vh;
  209. overflow-y: hidden;
  210. .top {
  211. margin-bottom: 15px;
  212. }
  213. }
  214.  
  215. :deep(.dialog) {
  216. .el-dialog__body {
  217. padding-bottom: 20px !important;
  218. }
  219. .el-dialog__footer {
  220. padding-top: 0 !important;
  221. }
  222. }
  223. </style>