add.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384
  1. <template>
  2. <div class="common-dialog">
  3. <div class="common-dialog-content">
  4. <div class="common-dialog-title-box">
  5. <i class="common-dialog-title-icon" />
  6. <div>新建三防责任人信息</div>
  7. </div>
  8. <div class="common-dialog-box" style="width: 1000px">
  9. <el-form ref="formRef" :model="form" :rules="rules" label-width="160px">
  10. <el-form-item label="姓名:" prop="name">
  11. <el-input v-model="form.name" placeholder="请输入姓名" />
  12. </el-form-item>
  13. <el-form-item label="电话号码:" prop="phone">
  14. <el-input v-model="form.phone" placeholder="请输入电话号码" />
  15. </el-form-item>
  16. <el-form-item label="所属单位:" prop="unit_name">
  17. <el-input v-model="form.unit_name" placeholder="例如:XX市XX县人民政府" />
  18. <span style="color: #999; font-size: 12px; margin-left: 5px">请使用单位全称</span>
  19. </el-form-item>
  20. <el-form-item label="职务:" prop="position">
  21. <el-input v-model="form.position" placeholder="例如:县长/办公室主任/办事员等" />
  22. </el-form-item>
  23. <el-form-item label="行政区划:" prop="area_code">
  24. <el-select v-model="data1" placeholder="请选择" style="width: 200px; margin-right: 5px" clearable @change="getOptions2()">
  25. <el-option v-for="item in options1" :key="item.id" :label="item.label" :value="item.id" />
  26. </el-select>
  27. <el-select v-model="data2" placeholder="请选择" style="width: 200px; margin-right: 5px" clearable @change="getOptions3()">
  28. <el-option v-for="item in options2" :key="item.id" :label="item.label" :value="item.id" />
  29. </el-select>
  30. <el-select v-model="data3" placeholder="请选择" style="width: 200px; margin-right: 5px" clearable @change="getAreaContent()">
  31. <el-option v-for="item in options3" :key="item.id" :label="item.label" :value="item.id" />
  32. </el-select>
  33. </el-form-item>
  34. <el-form-item label="办公电话:" prop="office_phone">
  35. <div class="phone-input-container">
  36. <el-input v-model="form.office_phone_prefix" placeholder="例如:0668" style="width: 120px;"></el-input>
  37. <span class="phone-input-separator">-</span>
  38. <el-input v-model="form.office_phone_number" placeholder="例如:88888888" style="width: 200px;"></el-input>
  39. </div>
  40. </el-form-item>
  41. <el-form-item label="排位顺序:" prop="order_num">
  42. <el-input v-model="form.order_num" placeholder="例如:请输入排位序号1-999" />
  43. <span style="color: #999; font-size: 12px; margin-left: 5px">序号数值越小越靠前</span>
  44. </el-form-item>
  45. <el-form-item label="选择类别:" prop="category">
  46. <div>
  47. <el-checkbox-group v-model="checkboxGroup2" @change="changeChildType">
  48. <el-checkbox-button v-for="type in category" :key="type" :value="type" @click="deleteOne(type)">
  49. {{ type.label }}
  50. </el-checkbox-button>
  51. </el-checkbox-group>
  52. <el-tabs v-model="childType" class="demo-tabs" @tab-click="handleClick">
  53. <el-tab-pane v-for="item in checkboxGroup2" :label="item.label" :name="item.label">
  54. <el-checkbox-group v-model="item.checked" @change="getSubOption()">
  55. <el-checkbox-button v-for="item2 in item.children" :key="item2.id" :value="item2.id">
  56. {{ item2.label }}
  57. </el-checkbox-button>
  58. </el-checkbox-group>
  59. <div v-if="item.label === '成员单位'">
  60. <span>请填写单位名称:</span>
  61. <el-input v-model="item.dept_name" style="width: 240px" placeholder="如:茂名供电局" @change="memberUnits" />
  62. </div>
  63. <div v-if="item.label === '重点部门'">
  64. <span>请填写单位名称:</span>
  65. <el-input v-model="item.dept_name" style="width: 240px" placeholder="如:茂名市中心小学" @change="memberUnits" />
  66. <div style="display: flex">
  67. <span>请选择责任类别:</span>
  68. <el-checkbox-group v-model="item.other_type_id" @change="getChOption">
  69. <el-checkbox-button v-for="item2 in item.children2" v-if="item.id === '5'" :key="item2" :value="item2.id">
  70. {{ item2.label }}
  71. </el-checkbox-button>
  72. </el-checkbox-group>
  73. </div>
  74. </div>
  75. <div v-if="item.label === '水利工程'">
  76. <span>请填写单位名称:</span>
  77. <el-input v-model="item.dept_name" style="width: 240px" placeholder="如:北江大堰" @change="memberUnits" />
  78. <div style="display: flex">
  79. <span v-if="item.label === '水利工程'">请选择责任类别:</span>
  80. <el-checkbox-group v-model="item.other_type_id" @change="getChOption">
  81. <el-checkbox-button v-for="item2 in item.children2" v-if="item.id === '7'" :key="item2" :value="item2.id">
  82. {{ item2.label }}
  83. </el-checkbox-button>
  84. </el-checkbox-group>
  85. </div>
  86. </div>
  87. <div v-if="item.label === '抢险队伍'" style="display: flex">
  88. <span>请选择责任类别:</span>
  89. <el-checkbox-group v-model="item.other_type_id" @change="getChOption">
  90. <el-checkbox-button v-for="item2 in item.children2" v-if="item.id === '9'" :key="item2" :value="item2.id">
  91. {{ item2.label }}
  92. </el-checkbox-button>
  93. </el-checkbox-group>
  94. </div>
  95. <div v-if="item.label === '地质灾害'">
  96. <span>请填写隐患点名称:</span>
  97. <el-input v-model="item.denger_point_name" style="width: 240px" placeholder="" @change="memberUnits" />
  98. </div>
  99. <div v-if="item.label === '其他'">
  100. <span>请填写具体类型:</span>
  101. <el-input
  102. v-model="item.other_type_2_name"
  103. style="width: 240px"
  104. placeholder="请填写责任类型,如:重点单位等"
  105. @change="memberUnits"
  106. />
  107. </div>
  108. </el-tab-pane>
  109. </el-tabs>
  110. </div>
  111. </el-form-item>
  112. </el-form>
  113. <div class="common-dialog-footer">
  114. <el-button @click="goBack">取消</el-button>
  115. <el-button :loading="buttonLoading" type="primary" @click="submitNewPerson()">确定</el-button>
  116. </div>
  117. </div>
  118. </div>
  119. </div>
  120. </template>
  121. <script setup lang="ts">
  122. import { ref, toRefs } from 'vue';
  123. import type { TabsPaneContext } from 'element-plus';
  124. import { createNewPerson, getPersonRespon, getZoning, responsibleDetail } from '@/api/PreventionResponsible';
  125. const category = ref([]);
  126. const checkboxGroup2 = ref([]);
  127. const { proxy } = getCurrentInstance() as ComponentInternalInstance;
  128. const props = defineProps({
  129. id: String
  130. });
  131. const buttonLoading = ref(false);
  132. const data1 = ref();
  133. const data2 = ref();
  134. const data3 = ref();
  135. // 表单数据
  136. const data = reactive({
  137. form: {
  138. unit_name: '',
  139. name: '',
  140. area_code: '',
  141. position: '',
  142. phone: '',
  143. order_num: '',
  144. type_list: []
  145. },
  146. rules: {
  147. name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
  148. unit_name: [{ required: true, message: '所属单位不能为空', trigger: 'change' }],
  149. phone: [{ required: true, message: '电话号码不能为空', trigger: 'change' }],
  150. position: [{ required: true, message: '职务不能为空', trigger: 'blur' }],
  151. area_code: [{ required: true, message: '行政区划不能为空', trigger: 'change' }]
  152. }
  153. });
  154. const { form } = toRefs(data);
  155. const emits = defineEmits(['close']);
  156. const formRef = ref<InstanceType<typeof ElForm> | null>(null);
  157. const options1 = ref('');
  158. const options2 = ref('');
  159. const options3 = ref('');
  160. const getOptions1 = (id) => {
  161. getZoning(id).then((res) => {
  162. options1.value = res.data;
  163. });
  164. };
  165. const getOptions2 = () => {
  166. if (!data1.value) {
  167. data2.value = '';
  168. data3.value = '';
  169. form.value.area_code = undefined;
  170. options2.value = undefined;
  171. return;
  172. } else {
  173. getZoning(data1.value).then((res) => {
  174. options2.value = res.data;
  175. });
  176. form.value.area_code = data1.value;
  177. }
  178. };
  179. const getOptions3 = () => {
  180. if (!data2.value) {
  181. data3.value = '';
  182. form.value.area_code = data1.value;
  183. options3.value = undefined;
  184. return;
  185. } else {
  186. getZoning(data2.value).then((res) => {
  187. options3.value = res.data;
  188. });
  189. form.value.area_code = data2.value;
  190. }
  191. };
  192. const getAreaContent = () => {
  193. if (!data3.value) {
  194. form.value.area_code = data2.value;
  195. return;
  196. } else {
  197. form.value.area_code = data3.value;
  198. }
  199. };
  200. watch(data1, () => {
  201. data2.value = '';
  202. data3.value = '';
  203. options2.value = undefined;
  204. });
  205. watch(data2, () => {
  206. data3.value = '';
  207. options3.value = undefined;
  208. });
  209. const getCategory = () => {
  210. getPersonRespon().then((res) => {
  211. category.value = res.rows;
  212. });
  213. };
  214. const childType = ref();
  215. const changeChildType = () => {
  216. category.value.forEach((item) => {
  217. let index = checkboxGroup2.value.findIndex((item2) => item2.id === item.id);
  218. if (index === -1) {
  219. delete item.checked;
  220. }
  221. });
  222. childType.value = checkboxGroup2.value[checkboxGroup2.value.length - 1].label;
  223. };
  224. const getSubOption = () => {
  225. const obj = {
  226. type_parent_id: '',
  227. children: ''
  228. };
  229. for (let i = 0; i < checkboxGroup2.value.length; i++) {
  230. obj.type_parent_id = checkboxGroup2.value[i].id;
  231. obj.children = checkboxGroup2.value[i].checked;
  232. form.value.type_list[i] = obj;
  233. }
  234. };
  235. const memberUnits = () => {
  236. let datatemp = [];
  237. for (let i = 0; i < checkboxGroup2.value.length; i++) {
  238. if (!!checkboxGroup2.value[i] && checkboxGroup2.value[i].children.length > 0) {
  239. const obj = {
  240. type_parent_id: checkboxGroup2.value[i].id,
  241. children: checkboxGroup2.value[i].checked
  242. };
  243. if (['4', '5', '7'].includes(checkboxGroup2.value[i].id) && checkboxGroup2.value[i].dept_name) {
  244. //成员单位
  245. obj.dept_name = checkboxGroup2.value[i].dept_name;
  246. } else if (checkboxGroup2.value[i].id === '10' && checkboxGroup2.value[i].denger_point_name) {
  247. //地质灾害
  248. obj.denger_point_name = checkboxGroup2.value[i].denger_point_name;
  249. } else if (checkboxGroup2.value[i].id === '11' && checkboxGroup2.value[i].other_type_2_name) {
  250. //其他
  251. obj.other_type_2_name = checkboxGroup2.value[i].other_type_2_name;
  252. }
  253. datatemp.push(obj);
  254. }
  255. }
  256. form.value.type_list = datatemp;
  257. };
  258. const deleteOne = (type) => {
  259. const index = form.value.type_list.findIndex((item) => item.type_parent_id === type.id);
  260. if (index !== -1) {
  261. form.value.type_list.splice(index, 1);
  262. }
  263. };
  264. const getChOption = () => {
  265. debugger;
  266. let datatemp = [];
  267. for (let i = 0; i < checkboxGroup2.value.length; i++) {
  268. if (!!checkboxGroup2.value[i] && checkboxGroup2.value[i].other_type_id.length > 0) {
  269. const obj = {
  270. type_parent_id: checkboxGroup2.value[i].id,
  271. other_type_id: checkboxGroup2.value[i].other_type_id
  272. };
  273. datatemp.push(obj);
  274. }
  275. }
  276. form.value.type_list = datatemp;
  277. };
  278. const handleClick = (tab: TabsPaneContext, event: Event) => {
  279. console.log(tab, event);
  280. };
  281. const personType = ref([]);
  282. for (const i in category.value) {
  283. personType.value.push(category.value[i].label);
  284. }
  285. const submitNewPerson = async () => {
  286. // 打印当前表单值用于调试
  287. console.log('Form values before submit:', form.value);
  288. // 验证表单
  289. try {
  290. if (!formRef.value) {
  291. throw new Error('Form reference is not set');
  292. }
  293. const valid = await formRef.value.validate((valid, invalidFields) => {
  294. if (!valid) {
  295. console.error('Validation failed:', invalidFields); // 输出未通过验证的字段
  296. }
  297. return valid;
  298. });
  299. if (!valid) {
  300. proxy.$modal.msgError('请检查输入信息');
  301. return;
  302. }
  303. } catch (error) {
  304. console.error('Validation error:', error);
  305. proxy.$modal.msgError('请检查输入信息');
  306. return;
  307. }
  308. // 构建请求体
  309. const requestBody = {
  310. unit_name: form.value.unit_name,
  311. name: form.value.name,
  312. area_code: form.value.area_code,
  313. position: form.value.position,
  314. phone: form.value.phone,
  315. order_num: form.value.order_num,
  316. type_list: checkboxGroup2.value
  317. .map((item) => ({
  318. type_parent_id: item.id,
  319. children: item.checked || [],
  320. dept_name: item.dept_name || null,
  321. other_type_2_name: item.other_type_2_name || null,
  322. denger_point_name: item.denger_point_name || null
  323. }))
  324. .filter((item) => Object.values(item).some((val) => val !== null && val !== undefined))
  325. };
  326. buttonLoading.value = true; // 开始加载状态
  327. try {
  328. // 发送请求
  329. await createNewPerson(requestBody);
  330. proxy.$modal.msgSuccess('新增成功');
  331. emits('close', true); // 关闭对话框并通知父组件
  332. emits('refresh');
  333. } catch (error) {
  334. console.error('Error creating new person:', error);
  335. proxy.$modal.msgError('新增失败,请稍后再试或联系管理员');
  336. } finally {
  337. buttonLoading.value = false; // 结束加载状态
  338. }
  339. };
  340. onMounted(() => {
  341. if (props.id) {
  342. responsibleDetail(props.id).then((res) => {
  343. Object.assign(form.value, res.data);
  344. // 如果有特殊情况处理,如将API返回的类型列表转换为checkboxGroup2的格式
  345. checkboxGroup2.value = res.data.type_list.map((item) => ({
  346. id: item.type_parent_id,
  347. checked: item.children || [],
  348. dept_name: item.dept_name,
  349. other_type_2_name: item.other_type_2_name,
  350. denger_point_name: item.denger_point_name
  351. }));
  352. });
  353. }
  354. getOptions1(2);
  355. getCategory();
  356. });
  357. // 返回上一级
  358. const goBack = () => {
  359. emits('close');
  360. };
  361. </script>
  362. <style scoped lang="scss">
  363. .demo-tabs > .el-tabs__content {
  364. padding: 32px;
  365. color: #6b778c;
  366. font-size: 32px;
  367. font-weight: 600;
  368. }
  369. </style>