| | |
| | | <script lang="ts" name="procurementComplaint" setup> |
| | | import { ref, reactive, onMounted } from 'vue'; |
| | | import { ElMessage } from 'element-plus'; |
| | | import type { FormRules } from 'element-plus'; |
| | | import { formatDate } from '/@/utils/formatTime'; |
| | | import { useProcurementComplaintApi } from '/@/api/fb_p_complaints/procurementComplaint'; |
| | | import { log } from 'console'; |
| | | import { ref, reactive, onMounted } from "vue"; |
| | | import { ElMessage } from "element-plus"; |
| | | import type { FormRules } from "element-plus"; |
| | | import { formatDate } from "/@/utils/formatTime"; |
| | | import { useProcurementComplaintApi } from "/@/api/fb_p_complaints/procurementComplaint"; |
| | | import { log } from "console"; |
| | | |
| | | //父级传递来的函数,用于回调 |
| | | const emit = defineEmits(['reloadTable']); |
| | | const emit = defineEmits(["reloadTable"]); |
| | | const procurementComplaintApi = useProcurementComplaintApi(); |
| | | const ruleFormRef = ref(); |
| | | |
| | | const state = reactive({ |
| | | title: '', |
| | | title: "", |
| | | loading: false, |
| | | showDialog: false, |
| | | ruleForm: { |
| | | complaints: [{ itemDescription: '' }], |
| | | complaints: [{ itemDescription: "" }] |
| | | } as any, |
| | | stores: {}, |
| | | dropdownData: {} as any, |
| | | dropdownData: {} as any |
| | | }); |
| | | |
| | | const handlingStatus = [ |
| | | { value: 0, label: '其它' }, |
| | | { value: 1, label: '成立' }, |
| | | { value: 2, label: '驳回' }, |
| | | { value: 3, label: '部分成立' }, |
| | | { value: 0, label: "其它" }, |
| | | { value: 1, label: "成立" }, |
| | | { value: 2, label: "驳回" }, |
| | | { value: 3, label: "部分成立" } |
| | | ]; |
| | | |
| | | // 自行添加其他规则 |
| | | const rules = ref<FormRules>({ |
| | | projectCode: [{ required: true, message: '请选择项目编号!', trigger: 'blur' }], |
| | | projectName: [{ required: true, message: '请选择项目名称!', trigger: 'blur' }], |
| | | decisionDate: [{ required: true, message: '请选择决定日期!', trigger: 'change' }], |
| | | purchaser: [{ required: true, message: '请选择采购人!', trigger: 'blur' }], |
| | | procurementAgency: [{ required: true, message: '请选择采购代理机构!', trigger: 'blur' }], |
| | | projectCode: [ |
| | | { required: true, message: "请选择项目编号!", trigger: "blur" } |
| | | ], |
| | | projectName: [ |
| | | { required: true, message: "请选择项目名称!", trigger: "blur" } |
| | | ], |
| | | decisionDate: [ |
| | | { required: true, message: "请选择决定日期!", trigger: "change" } |
| | | ], |
| | | purchaser: [{ required: true, message: "请选择采购人!", trigger: "blur" }], |
| | | procurementAgency: [ |
| | | { required: true, message: "请选择采购代理机构!", trigger: "blur" } |
| | | ] |
| | | }); |
| | | |
| | | // 页面加载时 |
| | |
| | | // 打开弹窗 |
| | | const openDialog = async (row: any, title: string) => { |
| | | state.title = title; |
| | | row = row ?? { complaints: [{ itemDescription: '' }] }; |
| | | state.ruleForm = row.id ? await procurementComplaintApi.detail(row.id).then((res) => res.data.result) : JSON.parse(JSON.stringify(row)); |
| | | row = row ?? { complaints: [{ itemDescription: "" }] }; |
| | | state.ruleForm = row.id |
| | | ? await procurementComplaintApi.detail(row.id).then(res => res.data.result) |
| | | : JSON.parse(JSON.stringify(row)); |
| | | state.showDialog = true; |
| | | console.log(state.ruleForm.complaints, state.ruleForm.complaints.length); |
| | | }; |
| | | |
| | | // 关闭弹窗 |
| | | const closeDialog = () => { |
| | | emit('reloadTable'); |
| | | emit("reloadTable"); |
| | | state.showDialog = false; |
| | | }; |
| | | |
| | |
| | | ruleFormRef.value.validate(async (isValid: boolean, fields?: any) => { |
| | | if (isValid) { |
| | | let values = state.ruleForm; |
| | | await procurementComplaintApi[state.ruleForm.id ? 'update' : 'add'](values); |
| | | await procurementComplaintApi[state.ruleForm.id ? "update" : "add"]( |
| | | values |
| | | ); |
| | | closeDialog(); |
| | | } else { |
| | | ElMessage({ |
| | | message: `表单有${Object.keys(fields).length}处验证失败,请修改后再提交`, |
| | | type: 'error', |
| | | type: "error" |
| | | }); |
| | | } |
| | | }); |
| | | }; |
| | | |
| | | const changeComplaints = (index:any,txt: String) => { |
| | | if (txt == 'add') { |
| | | state.ruleForm.complaints.splice(index+1, 0, { itemDescription: '' }) |
| | | if (txt == "add") { |
| | | state.ruleForm.complaints.splice(index + 1, 0, { itemDescription: "" }); |
| | | } else { |
| | | state.ruleForm.complaints.splice(index, 1) |
| | | state.ruleForm.complaints.splice(index, 1); |
| | | } |
| | | }; |
| | | |
| | |
| | | </script> |
| | | <template> |
| | | <div class="procurementComplaint-container"> |
| | | <el-dialog v-model="state.showDialog" :width="900" draggable :close-on-click-modal="false"> |
| | | <el-dialog |
| | | v-model="state.showDialog" |
| | | :width="900" |
| | | draggable |
| | | :close-on-click-modal="false" |
| | | > |
| | | <template #header> |
| | | <div style="color: #fff"> |
| | | <span>{{ state.title }}</span> |
| | | </div> |
| | | </template> |
| | | <el-form :model="state.ruleForm" ref="ruleFormRef" label-width="auto" :rules="rules"> |
| | | <el-form |
| | | ref="ruleFormRef" |
| | | :model="state.ruleForm" |
| | | label-width="auto" |
| | | :rules="rules" |
| | | > |
| | | <el-row :gutter="35"> |
| | | <el-form-item v-show="false"> |
| | | <el-input v-model="state.ruleForm.id" /> |
| | | </el-form-item> |
| | | <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> |
| | | <el-form-item label="决定日期" prop="decisionDate"> |
| | | <el-date-picker v-model="state.ruleForm.decisionDate" type="date" placeholder="请选择决定日期" /> |
| | | <el-date-picker |
| | | v-model="state.ruleForm.decisionDate" |
| | | type="date" |
| | | placeholder="请选择决定日期" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> |
| | | <el-form-item label="项目名称" prop="projectName"> |
| | | <el-input v-model="state.ruleForm.projectName" placeholder="请输入项目名称" maxlength="200" show-word-limit |
| | | clearable /> |
| | | <el-input |
| | | v-model="state.ruleForm.projectName" |
| | | placeholder="请输入项目名称" |
| | | maxlength="200" |
| | | show-word-limit |
| | | clearable |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> |
| | | <el-form-item label="项目编号" prop="projectCode"> |
| | | <el-input v-model="state.ruleForm.projectCode" placeholder="请输入项目编号" maxlength="50" show-word-limit |
| | | clearable /> |
| | | <el-input |
| | | v-model="state.ruleForm.projectCode" |
| | | placeholder="请输入项目编号" |
| | | maxlength="50" |
| | | show-word-limit |
| | | clearable |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> |
| | | <el-form-item label="采购人" prop="purchaser"> |
| | | <el-input v-model="state.ruleForm.purchaser" placeholder="请输入采购人" maxlength="100" show-word-limit |
| | | clearable /> |
| | | <el-input |
| | | v-model="state.ruleForm.purchaser" |
| | | placeholder="请输入采购人" |
| | | maxlength="100" |
| | | show-word-limit |
| | | clearable |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> |
| | | <el-form-item label="采购代理机构" prop="procurementAgency"> |
| | | <el-input v-model="state.ruleForm.procurementAgency" placeholder="请输入采购代理机构" maxlength="100" |
| | | show-word-limit clearable /> |
| | | <el-input |
| | | v-model="state.ruleForm.procurementAgency" |
| | | placeholder="请输入采购代理机构" |
| | | maxlength="100" |
| | | show-word-limit |
| | | clearable |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> |
| | | <el-form-item label="采购监督部门" prop="procurementSupervisionDepartment"> |
| | | <el-input v-model="state.ruleForm.procurementSupervisionDepartment" placeholder="请输入采购监督部门" |
| | | maxlength="100" show-word-limit clearable /> |
| | | <el-form-item |
| | | label="采购监督部门" |
| | | prop="procurementSupervisionDepartment" |
| | | > |
| | | <el-input |
| | | v-model="state.ruleForm.procurementSupervisionDepartment" |
| | | placeholder="请输入采购监督部门" |
| | | maxlength="100" |
| | | show-word-limit |
| | | clearable |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> |
| | | <el-form-item label="投诉人" prop="complainant"> |
| | | <el-input v-model="state.ruleForm.complainant" placeholder="请输入投诉人" maxlength="100" show-word-limit |
| | | clearable /> |
| | | <el-input |
| | | v-model="state.ruleForm.complainant" |
| | | placeholder="请输入投诉人" |
| | | maxlength="100" |
| | | show-word-limit |
| | | clearable |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> |
| | | <el-form-item label="线上地址" prop="url"> |
| | | <el-input v-model="state.ruleForm.url" placeholder="请输入线上地址" maxlength="255" show-word-limit clearable /> |
| | | <el-input |
| | | v-model="state.ruleForm.url" |
| | | placeholder="请输入线上地址" |
| | | maxlength="255" |
| | | show-word-limit |
| | | clearable |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="20"> |
| | | <template v-for="(item,index) in state.ruleForm.complaints" :key="index"> |
| | | <template |
| | | v-for="(item, index) in state.ruleForm.complaints" |
| | | :key="index" |
| | | > |
| | | <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> |
| | | <el-form-item :label="`投诉事项${index==0?'':index}`" prop="complaints"> |
| | | <el-input v-model="item.itemDescription" type="textarea" :placeholder="`请输入投诉事项${index==0?'':index}`" |
| | | maxlength="1000" show-word-limit clearable /> |
| | | <el-form-item |
| | | :label="`投诉事项${index == 0 ? '' : index}`" |
| | | prop="complaints" |
| | | > |
| | | <el-input |
| | | v-model="item.itemDescription" |
| | | type="textarea" |
| | | :placeholder="`请输入投诉事项${index == 0 ? '' : index}`" |
| | | maxlength="1000" |
| | | show-word-limit |
| | | clearable |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" class=""> |
| | | <el-form-item :label="`处理描述${index==0?'':index}`" prop="complaints"> |
| | | <el-input v-model="item.handlingResult" type="textarea" :placeholder="`请输入处理描述${index==0?'':index}`" |
| | | maxlength="1000" show-word-limit clearable /> |
| | | <el-form-item |
| | | :label="`处理描述${index == 0 ? '' : index}`" |
| | | prop="complaints" |
| | | > |
| | | <el-input |
| | | v-model="item.handlingResult" |
| | | type="textarea" |
| | | :placeholder="`请输入处理描述${index == 0 ? '' : index}`" |
| | | maxlength="1000" |
| | | show-word-limit |
| | | clearable |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6" class="mb20"> |
| | | <el-form-item :label="`投诉状态${index==0?'':index}`" prop="complaints"> |
| | | <el-form-item |
| | | :label="`投诉状态${index == 0 ? '' : index}`" |
| | | prop="complaints" |
| | | > |
| | | <el-select v-model="item.handlingStatus"> |
| | | <el-option v-for="item in handlingStatus" :key="item.value" :label="item.label" :value="item.value" /> |
| | | <el-option |
| | | v-for="item in handlingStatus" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | /> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :xs="1" :sm="1" :md="1" :lg="1" :xl="1" class="mb20"> |
| | | <el-button type="primary" @click="changeComplaints(index,'add')">+</el-button> |
| | | <el-button type="primary" @click="changeComplaints(index, 'add')" |
| | | >+</el-button |
| | | > |
| | | </el-col> |
| | | <el-col :xs="1" :sm="1" :md="1" :lg="1" :xl="1" class="mb20" |
| | | v-if="state.ruleForm.complaints&&state.ruleForm.complaints.length>1"> |
| | | <el-button type="primary" @click="changeComplaints(index)">-</el-button> |
| | | <el-col |
| | | v-if=" |
| | | state.ruleForm.complaints && |
| | | state.ruleForm.complaints.length > 1 |
| | | " |
| | | :xs="1" |
| | | :sm="1" |
| | | :md="1" |
| | | :lg="1" |
| | | :xl="1" |
| | | class="mb20" |
| | | > |
| | | <el-button type="primary" @click="changeComplaints(index)" |
| | | >-</el-button |
| | | > |
| | | </el-col> |
| | | <el-divider v-if="state.ruleForm.complaints&&state.ruleForm.complaints.length>1" /> |
| | | <el-divider |
| | | v-if=" |
| | | state.ruleForm.complaints && |
| | | state.ruleForm.complaints.length > 1 |
| | | " |
| | | /> |
| | | </template> |
| | | |
| | | </el-row> |
| | | </el-form> |
| | | <template #footer> |
| | | <span class="dialog-footer"> |
| | | <el-button @click="() => state.showDialog = false">取 消</el-button> |
| | | <el-button @click="submit" type="primary" v-reclick="1000">确 定</el-button> |
| | | <el-button @click="() => (state.showDialog = false)">取 消</el-button> |
| | | <el-button v-reclick="1000" type="primary" @click="submit" |
| | | >确 定</el-button |
| | | > |
| | | </span> |
| | | </template> |
| | | </el-dialog> |