Newer
Older
KaiFengPC / src / views / project / projectConfiguration / xmlxwh / todoDon.vue
@鲁yixuan 鲁yixuan on 29 Aug 10 KB updata
  1. <template>
  2. <div class="water-analysis-page1">
  3. <el-table :key="isFlag" :data="tableData" v-loading="tableLoading" max-height="500">
  4. <el-table-column type="index" width="55" label="序号" />
  5. <el-table-column label="项目类型编码" prop="projectTypeCode" show-overflow-tooltip />
  6. <el-table-column label="项目类型名称" prop="projectTypeName" show-overflow-tooltip />
  7. <el-table-column label="所属类型" prop="ownership" width="160" show-overflow-tooltip>
  8. <template #default="{ row }">
  9. <dict-tag :options="ownership" :value="row.ownership" />
  10. </template>
  11. </el-table-column>
  12. <el-table-column label="描述" prop="remark" show-overflow-tooltip />
  13. <el-table-column label="是否启用" prop="status">
  14. <template #default="{ row }">
  15. {{ row.status == 0 ? '是' : '否' }}
  16. </template>
  17. </el-table-column>
  18. <el-table-column label="操作" width="280">
  19. <template #default="{ row }">
  20. <el-button icon="Connection" link type="primary" @click="onCheck(row, 0, '配置')">配置</el-button>
  21. <el-button icon="View" link type="primary" @click="onCheck(row, 1, '详情')">详情</el-button>
  22. <el-button icon="Edit" link type="warning" @click="onCheck(row, 2, '修改')">修改</el-button>
  23. <el-button icon="Delete" link type="danger" @click="onCheck(row, 3)">删除</el-button>
  24. </template>
  25. </el-table-column>
  26. </el-table>
  27. <pagination
  28. v-show="totals > 0"
  29. :total="totals"
  30. v-model:page="FormList.pageNum"
  31. v-model:limit="FormList.pageSize"
  32. @pagination="getInfoList(FormList)"
  33. />
  34. <el-dialog v-model="visible" :title="'项目类型维护' + title" :modal-append-to-body="false" :close-on-click-modal="false" width="50%">
  35. <tableDalgo ref="tableDalgoRef" v-if="visible" @onModalClose="onModalClose" :typeList="typeList"></tableDalgo>
  36. <template #footer>
  37. <div class="dialog-footer">
  38. <el-button v-if="typeList?.type != 1" type="primary" @click="submit">确定</el-button>
  39. <el-button @click="visible = false">取消</el-button>
  40. </div>
  41. </template>
  42. </el-dialog>
  43. <el-dialog v-model="visible1" title="配置" :modal-append-to-body="false" :close-on-click-modal="false" width="50%" class="noHidden">
  44. <template v-if="visible1">
  45. <div class="btns">
  46. <el-button type="primary" plain icon="Plus" @click="openDialog({}, 'add')">新增</el-button>
  47. </div>
  48. <el-table class="table" :data="list" v-loading="loading" element-loading-text="数据加载中...">
  49. <el-table-column label="项目内容类型" prop="projectContentType" show-overflow-tooltip>
  50. <template #default="{ row }">
  51. <span>{{ findText('project_content_type', row.projectContentType) }}</span>
  52. </template>
  53. </el-table-column>
  54. <el-table-column label="项目内容(key)" prop="propertyKey" show-overflow-tooltip />
  55. <el-table-column label="项目内容名称" prop="propertyName" show-overflow-tooltip />
  56. <el-table-column label="排序" prop="sort" show-overflow-tooltip />
  57. <el-table-column label="操作" width="150">
  58. <template #default="{ row, $index }">
  59. <el-button type="primary" link size="small" @click="openDialog(row, 'view')">查看</el-button>
  60. <el-button type="primary" link size="small" @click="openDialog(row, 'edit')">修改</el-button>
  61. <el-button type="danger" link size="small" @click="del(row, $index)">删除</el-button>
  62. </template>
  63. </el-table-column>
  64. </el-table>
  65. </template>
  66. <template #footer>
  67. <div class="dialog-footer">
  68. <el-button type="primary" @click="submit1">确定</el-button>
  69. <el-button @click="closeDialog">取消</el-button>
  70. </div>
  71. </template>
  72. </el-dialog>
  73. <el-dialog
  74. v-model="visible2"
  75. :title="`${configOpts.text}配置`"
  76. :close-on-click-modal="false"
  77. width="50%"
  78. :before-close="closeDialog2"
  79. class="dialog"
  80. >
  81. <el-form ref="ruleForm" :model="form" :rules="rules" class="dialogForm" :disabled="configOpts.type === 'view'">
  82. <el-row :gutter="20">
  83. <el-col :span="12">
  84. <el-form-item label="项目内容类型:" prop="projectContentType" class="formItem">
  85. <el-select v-model="form.projectContentType" placeholder="请选择项目内容类型" style="width: 100%">
  86. <el-option v-for="dict in project_content_type" :key="dict.value" :label="dict.label" :value="dict.value" />
  87. </el-select>
  88. </el-form-item>
  89. </el-col>
  90. <el-col :span="12">
  91. <el-form-item label="项目内容key:" prop="propertyKey" class="formItem">
  92. <el-input v-model="form.propertyKey" placeholder="请输入项目内容key" />
  93. </el-form-item>
  94. </el-col>
  95. </el-row>
  96. <el-row :gutter="20">
  97. <el-col :span="12">
  98. <el-form-item label="项目内容名称:" prop="propertyName" class="formItem">
  99. <el-input v-model="form.propertyName" placeholder="请输入项目内容名称" />
  100. </el-form-item>
  101. </el-col>
  102. <el-col :span="12">
  103. <el-form-item label="排序:" prop="sort" class="formItem">
  104. <el-input v-model="form.sort" placeholder="请输入排序" />
  105. </el-form-item>
  106. </el-col>
  107. </el-row>
  108. </el-form>
  109. <template #footer v-if="configOpts.type !== 'view'">
  110. <div class="dialog-footer">
  111. <el-button type="primary" @click="submit2">确定</el-button>
  112. <el-button @click="closeDialog2">取消</el-button>
  113. </div>
  114. </template>
  115. </el-dialog>
  116. </div>
  117. </template>
  118. <script setup>
  119. import { required } from '@/utils/validate-helper';
  120. import {
  121. getInfo,
  122. projectInfoDelete,
  123. projectInfoGet,
  124. projectItemDescriptionConfigAddBatch,
  125. getProjectItemDescriptionConfigList,
  126. } from '@/api/project/xmlxwh';
  127. import tableDalgo from './tableDalgo.vue';
  128. import { formatMonths } from '@/utils';
  129. import emgBox1 from '@/utils/ElMessageBox1';
  130. import { ElMessage } from 'element-plus';
  131. import { FileSystemList } from '@/api/project/tenderReview';
  132. import { optTextMap } from '@/utils/map';
  133. import { inheritAttr } from '@/utils/v3';
  134. import { useDicts } from '@/hooks';
  135. const { proxy } = getCurrentInstance();
  136. const { ownership } = proxy.useDict('ownership');
  137. const { project_content_type, findText } = useDicts(proxy);
  138.  
  139. const tableDalgoRef = ref();
  140. let visible = ref(false);
  141. let isFlag = ref(1);
  142. const title = ref('');
  143. const FormList = ref({
  144. pageNum: 1,
  145. pageSize: 10,
  146. });
  147. const totals = ref(0);
  148. let dataForm = reactive({
  149. date: formatMonths(new Date()),
  150. tableData: '',
  151. tableDateTwo: '',
  152. tableLoading: true,
  153. });
  154. let { date, tableData, tableDateTwo, tableLoading } = toRefs(dataForm);
  155. const visible1 = ref(false);
  156. const list = ref([]);
  157. const loading = ref(false);
  158. const configOpts = reactive({
  159. type: '',
  160. text: '',
  161. });
  162. const form = reactive({
  163. projectTypeId: '',
  164. projectContentType: '',
  165. propertyKey: '',
  166. propertyName: '',
  167. sort: '',
  168. });
  169. const rules = reactive({
  170. projectContentType: required('项目内容类型'),
  171. propertyKey: required('项目内容'),
  172. propertyName: required('项目内容名称'),
  173. sort: required('排序'),
  174. });
  175. let row = {};
  176. const visible2 = ref(false);
  177. const outRow = shallowRef({});
  178. //获取列表数据
  179. const getInfoList = async prams => {
  180. tableLoading.value = true;
  181. let { data, total } = await getInfo(prams);
  182. tableData.value = data;
  183. totals.value = total;
  184. setTimeout(() => {
  185. tableLoading.value = false;
  186. }, 1000);
  187. };
  188. //搜索
  189. const search = p => {
  190. FormList.value = p;
  191. FormList.value.pageNum = 1;
  192. getInfoList(p);
  193. };
  194. defineExpose({ search });
  195. // 查看上报数据
  196. let typeList = ref({});
  197. const onCheck = (row, ty, t) => {
  198. title.value = t;
  199. if (ty == 1 || ty == 2) {
  200. projectInfoGet(row.id).then(({ code, data }) => {
  201. if (code == 200) {
  202. typeList.value = { ...data, type: ty };
  203. FileSystemList({
  204. refId: row.id,
  205. refType: 'proProjectType',
  206. }).then(({ data }) => {
  207. typeList.value.fileList1 = data;
  208. visible.value = true;
  209. });
  210. }
  211. });
  212. } else if (ty == 3) {
  213. emgBox1(row.id, projectInfoDeleteM, '您确定删除吗?');
  214. } else if (ty === 0) {
  215. visible1.value = true;
  216. outRow.value = row;
  217. form.projectTypeId = row.id;
  218. getList(row.id);
  219. }
  220. };
  221. //删除
  222. const projectInfoDeleteM = async id => {
  223. let { code } = await projectInfoDelete(id);
  224. if (code == 200) {
  225. ElMessage({
  226. type: 'success',
  227. message: '操作成功',
  228. });
  229. getInfoList(FormList.value);
  230. }
  231. };
  232. //撤回操作
  233. const Returncnfiorm = async id => {
  234. let { code } = await projectInfoDelete(id);
  235. };
  236. function onModalClose() {
  237. visible.value = false;
  238. console.log('object', 3444);
  239.  
  240. getInfoList(FormList.value);
  241. }
  242. function submit() {
  243. tableDalgoRef.value.submit();
  244. }
  245.  
  246. const submit1 = async () => {
  247. const params = {
  248. projectTypeId: outRow.value.id,
  249. saveRequestList: list.value,
  250. };
  251. const res = await projectItemDescriptionConfigAddBatch(params);
  252. if (res?.code !== 200) return;
  253. proxy.$modal.msgSuccess('操作成功!');
  254. closeDialog();
  255. };
  256. const openDialog = (data, opt) => {
  257. row = data;
  258. configOpts.type = opt;
  259. configOpts.text = optTextMap.get(opt);
  260. visible2.value = true;
  261. nextTick(() => {
  262. inheritAttr(data, form);
  263. console.log(form);
  264. });
  265. };
  266.  
  267. const closeDialog = () => {
  268. visible1.value = false;
  269. };
  270.  
  271. const submit2 = () => {
  272. proxy.$refs.ruleForm.validate(async (valid, fields) => {
  273. if (valid) {
  274. if (configOpts.type === 'add') {
  275. list.value.push({ ...form });
  276. } else {
  277. inheritAttr(form, row);
  278. }
  279. // proxy.$modal.msgSuccess('操作成功!')
  280. closeDialog2();
  281. } else {
  282. console.log('error submit!', fields);
  283. }
  284. });
  285. };
  286.  
  287. const del = (row, index) => {
  288. proxy.$modal
  289. .confirm('是否确认删除?')
  290. .then(async () => {
  291. list.value.splice(index, 1);
  292. })
  293. .catch(() => {});
  294. };
  295.  
  296. const closeDialog2 = () => {
  297. proxy.$refs.ruleForm.resetFields();
  298. visible2.value = false;
  299. row = {};
  300. };
  301.  
  302. const getList = async id => {
  303. const res = await getProjectItemDescriptionConfigList({ projectTypeId: id });
  304. if (res?.code !== 200) return;
  305. list.value = res?.data || [];
  306. };
  307.  
  308. onMounted(() => {
  309. getInfoList(FormList.value);
  310. });
  311. </script>
  312. <style lang="scss" scoped>
  313. .water-analysis-page1 {
  314. height: 90vh;
  315. :deep(.formItem) {
  316. .el-form-item__label {
  317. width: 110px;
  318. word-break: keep-all;
  319. }
  320. }
  321. }
  322.  
  323. .btns {
  324. display: flex;
  325. justify-content: flex-end;
  326. margin-bottom: 15px;
  327. }
  328. </style>