index.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434
  1. <template>
  2. <div>
  3. <div class="app-container">
  4. <div v-show="!dialog.visible && !detailState.show && !addState.show && !EditState.show">
  5. <el-row :gutter="20">
  6. <el-col :lg="4" :xs="24" style="">
  7. <el-input v-model="deptName" placeholder="请输入部门名称" prefix-icon="Search" clearable />
  8. <el-tree
  9. ref="deptTreeRef"
  10. class="mt-2"
  11. node-key="id"
  12. :data="treeData"
  13. :props="defaultProps"
  14. :expand-on-click-node="false"
  15. :filter-node-method="filterNode"
  16. highlight-current
  17. @node-click="handleNodeClick"
  18. :default-expanded-keys="treeExpandelKeys"
  19. />
  20. </el-col>
  21. <el-col :lg="20" :xs="24">
  22. <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
  23. <div v-show="showSearch" class="mb-[10px]">
  24. <h1>茂名市责任人列表</h1>
  25. <el-form ref="queryFormRef" :model="queryParams" :inline="true">
  26. <el-form-item>
  27. <el-button type="primary">批量导出</el-button>
  28. <el-button type="primary" @click="handleUpload">批量导入</el-button>
  29. <el-button type="primary" @click="handleAdd">新建责任人</el-button>
  30. <el-button type="primary" @click="handleShowUploadDetails">查看导入情况</el-button>
  31. </el-form-item>
  32. <el-form-item label="姓名:" prop="Name" label-width="auto">
  33. <el-input v-model="queryParams.Name" placeholder="请输入联系人" clearable @keyup.enter="handleQuery" />
  34. </el-form-item>
  35. <el-form-item>
  36. <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
  37. <el-button icon="Refresh" @click="resetQuery">重置</el-button>
  38. </el-form-item>
  39. </el-form>
  40. </div>
  41. </transition>
  42. <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
  43. <el-table-column type="selection" width="50" align="center" />
  44. <el-table-column v-if="columns[0].visible" key="userId" label="用户编号" align="center" prop="userId" />
  45. <el-table-column
  46. v-if="columns[1].visible"
  47. key="name"
  48. label="姓名"
  49. align="center"
  50. prop="name"
  51. :show-overflow-tooltip="true"
  52. width="120"
  53. />
  54. <el-table-column
  55. v-if="columns[2].visible"
  56. key="area_name"
  57. label="行政区划"
  58. align="center"
  59. prop="area_name"
  60. :show-overflow-tooltip="true"
  61. />
  62. <el-table-column
  63. v-if="columns[3].visible"
  64. key="unit_name"
  65. label="所属单位"
  66. align="center"
  67. prop="unit_name"
  68. :show-overflow-tooltip="true"
  69. />
  70. <el-table-column v-if="columns[4].visible" key="position" label="职务" align="center" prop="position" width="120" />
  71. <el-table-column v-if="columns[5].visible" key="phone" label="电话号码" align="center" prop="phone" width="120" />
  72. <el-table-column v-if="columns[6].visible" label="责任类型" align="center" prop="type_parent_list" width="160">
  73. <template #default="scope">
  74. <span v-for="(typeParent, index) in scope.row.type_parent_list" :key="index">
  75. <span v-if="index > 0">、</span>
  76. {{ typeParent.type_parent }}
  77. </span>
  78. </template>
  79. </el-table-column>
  80. <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
  81. <template #default="scope">
  82. <el-text v-hasPermi="['system:menu:resetPwd']" class="common-btn-text-primary" @click="handleView(scope.row)">查看详情</el-text>
  83. <el-text v-hasPermi="['system:menu:edit']" class="common-btn-text-primary" @click="handleUpdate(scope.row)">修改</el-text>
  84. <el-text v-hasPermi="['system:menu:remove']" class="common-btn-text-danger" @click="handleDelete(scope.row)">删除</el-text>
  85. </template>
  86. </el-table-column>
  87. </el-table>
  88. <pagination
  89. v-show="total > 0"
  90. v-model:page="queryParams.page"
  91. v-model:limit="queryParams.pageSize"
  92. :total="total"
  93. @pagination="getList"
  94. />
  95. </el-col>
  96. </el-row>
  97. </div>
  98. <DataImport v-model="uploadShow" url="9b6a6246-d6de-11ef-bfa9-fa163e4bf12e.xlsx" file-name="责任人信息批量导入模板.xlsx" steps-text="责任人信息" />
  99. <DataImportDetail v-model="showUploadDetails" v-if="showUploadDetails" />
  100. <detail v-if="detailState.show" :id="detailState.id" @close="handledetailClose"></detail>
  101. <add v-if="addState.show" @close="handleAddClose" @refresh="getList"></add>
  102. <Edit v-if="EditState.show" :id="EditState.id" @close="handleEditClose" @confirm="handleSure" @refresh="getList"></Edit>
  103. </div>
  104. </div>
  105. </template>
  106. <script setup lang="ts">
  107. import api from '@/api/system/user';
  108. import { UserForm, UserQuery, UserVO } from '@/api/system/user/types';
  109. import { deleteData, getRegionalTree, getRegionalTree3, getTableList } from '@/api/PreventionResponsible/index';
  110. import { DeptVO } from '@/api/system/dept/types';
  111. import { RoleVO } from '@/api/system/role/types';
  112. import { PostQuery, PostVO } from '@/api/system/post/types';
  113. import { treeselect } from '@/api/system/dept';
  114. import { globalHeaders } from '@/utils/request';
  115. import { to } from 'await-to-js';
  116. import { optionselect } from '@/api/system/post';
  117. import detail from '@/views/setting/PreventionResponsible/detail.vue';
  118. import add from '@/views/setting/PreventionResponsible/add.vue';
  119. import Edit from '@/views/setting/PreventionResponsible/Edit.vue';
  120. import { reactive, ref } from 'vue';
  121. import { deleteMaterialRoot } from '@/api/comprehensiveGuarantee/materialReserveManagement/warehouseManagement';
  122. const router = useRouter();
  123. const { proxy } = getCurrentInstance() as ComponentInternalInstance;
  124. const userList = ref<UserVO[]>();
  125. const loading = ref(true);
  126. const showSearch = ref(true);
  127. const ids = ref<Array<number | string>>([]);
  128. const single = ref(true);
  129. const multiple = ref(true);
  130. const total = ref(0);
  131. const dateRange = ref<[DateModelType, DateModelType]>(['', '']);
  132. const deptName = ref('');
  133. const deptOptions = ref<DeptVO[]>([]);
  134. const initPassword = ref<string>('');
  135. const postOptions = ref<PostVO[]>([]);
  136. const roleOptions = ref<RoleVO[]>([]);
  137. // const treeData = ref({});
  138. const treeData: Tree[] = ref([]);
  139. // 列显隐信息
  140. const columns = ref<FieldOption[]>([
  141. { key: 0, label: `用户编号`, visible: false, children: [] },
  142. { key: 1, label: `姓名`, visible: true, children: [] },
  143. { key: 2, label: `行政区划`, visible: true, children: [] },
  144. { key: 3, label: `所属单位`, visible: true, children: [] },
  145. { key: 4, label: `职务`, visible: true, children: [] },
  146. { key: 5, label: `电话号码`, visible: true, children: [] },
  147. { key: 6, label: `责任类型`, visible: true, children: [] }
  148. ]);
  149. const deptTreeRef = ref<ElTreeInstance>();
  150. const queryFormRef = ref<ElFormInstance>();
  151. const userFormRef = ref<ElFormInstance>();
  152. const dialog = reactive<DialogOption>({
  153. visible: false,
  154. title: ''
  155. });
  156. const initFormData: UserForm = {
  157. id: undefined,
  158. name: '',
  159. area_code: '',
  160. unit_name: '',
  161. position: '',
  162. phone: '',
  163. type_parent_list: []
  164. };
  165. const initData = {
  166. form: { ...initFormData },
  167. queryParams: {
  168. page: 1,
  169. pageSize: 10,
  170. Name: ''
  171. },
  172. rules: {
  173. userName: [
  174. { required: true, message: '用户名称不能为空', trigger: 'blur' },
  175. {
  176. min: 2,
  177. max: 20,
  178. message: '用户名称长度必须介于 2 和 20 之间',
  179. trigger: 'blur'
  180. }
  181. ],
  182. nickName: [{ required: true, message: '用户昵称不能为空', trigger: 'blur' }],
  183. password: [
  184. { required: true, message: '用户密码不能为空', trigger: 'blur' },
  185. {
  186. min: 5,
  187. max: 20,
  188. message: '用户密码长度必须介于 5 和 20 之间',
  189. trigger: 'blur'
  190. },
  191. { pattern: /^[^<>"'|\\]+$/, message: '不能包含非法字符:< > " \' \\\ |', trigger: 'blur' }
  192. ],
  193. email: [
  194. {
  195. type: 'email',
  196. message: '请输入正确的邮箱地址',
  197. trigger: ['blur', 'change']
  198. }
  199. ],
  200. phonenumber: [
  201. {
  202. pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
  203. message: '请输入正确的手机号码',
  204. trigger: 'blur'
  205. }
  206. ],
  207. roleIds: [{ required: true, message: '用户角色不能为空', trigger: 'blur' }]
  208. }
  209. };
  210. const data = reactive<PageData<UserForm, UserQuery>>(initData);
  211. const { queryParams, form, rules } = toRefs<PageData<UserForm, UserQuery>>(data);
  212. /** 通过条件过滤节点 */
  213. const filterNode = (value: string, data: any) => {
  214. if (!value) return true;
  215. return data.label.indexOf(value) !== -1;
  216. };
  217. /** 根据名称筛选部门树 */
  218. watchEffect(
  219. () => {
  220. deptTreeRef.value?.filter(deptName.value);
  221. },
  222. {
  223. flush: 'post' // watchEffect会在DOM挂载或者更新之前就会触发,此属性控制在DOM元素更新后运行
  224. }
  225. );
  226. /** 查询部门下拉树结构 */
  227. const treeExpandelKeys = ref([2]);
  228. interface Tree {
  229. id: string;
  230. name: string;
  231. children?: Tree[];
  232. }
  233. let defaultProps = reactive({
  234. label: "label",
  235. children: "children",
  236. isLeaf: 'isShowSelect',
  237. });
  238. // const loadNode = (node: Node, resolve: (data: Tree[]) => void) => {
  239. // const id = node.level === 0 ? "1" : node.data.id;
  240. // fetchData(resolve, id);
  241. // };
  242. const fetchData = async (resolve, id) => {
  243. let res = await getRegionalTree(id);
  244. return resolve(res.data);
  245. };
  246. /** 查询用户列表 */
  247. const getList = async () => {
  248. loading.value = true;
  249. getTableList(queryParams.value)
  250. .then((res) => {
  251. userList.value = res.data;
  252. total.value = res.total;
  253. })
  254. .finally(() => {
  255. loading.value = false;
  256. });
  257. };
  258. /** 节点单击事件 */
  259. const handleNodeClick = (data: DeptVO) => {
  260. queryParams.value.area_code = data.id;
  261. handleQuery();
  262. };
  263. /** 搜索按钮操作 */
  264. const handleQuery = () => {
  265. queryParams.value.page = 1;
  266. getList();
  267. };
  268. /** 重置按钮操作 */
  269. const resetQuery = () => {
  270. queryFormRef.value?.resetFields();
  271. queryParams.value.page = 1;
  272. deptTreeRef.value?.setCurrentKey(undefined);
  273. handleQuery();
  274. };
  275. /** 删除按钮操作 */
  276. const handleDelete = (row?: UserVO) => {
  277. const userIds = row?.id || ids.value;
  278. proxy?.$modal.confirm('是否确认删除用户编号为"' + userIds + '"的数据项?').then(() => {
  279. deleteData(userIds);
  280. getList();
  281. proxy?.$modal.msgSuccess('删除成功');
  282. });
  283. };
  284. let detailState = reactive({
  285. show: false,
  286. id: ''
  287. });
  288. /** 查看详情按钮操作 */
  289. const handleView = async (row: UserVO) => {
  290. detailState.show = true;
  291. detailState.id = row.id;
  292. };
  293. const handledetailClose = () => {
  294. detailState.show = false;
  295. };
  296. let addState = reactive({
  297. show: false
  298. });
  299. let EditState = reactive({
  300. show: false,
  301. id: ''
  302. });
  303. // 新建责任人按钮操作
  304. const handleAddClose = () => {
  305. addState.show = false;
  306. queryParams.value.page = 1;
  307. getList();
  308. };
  309. const handleEditClose = () => {
  310. EditState.show = false;
  311. // queryParams.value.page = 1;
  312. // getList();
  313. };
  314. const handleSure = () => {
  315. EditState.show = false;
  316. queryParams.value.page = 1;
  317. getList();
  318. }
  319. const handleAdd = (row: UserVO) => {
  320. addState.show = true;
  321. addState.id = row.id;
  322. };
  323. const handleUpdate = (row: UserVO) => {
  324. EditState.show = true;
  325. EditState.id = row.id;
  326. };
  327. /** 选择条数 */
  328. const handleSelectionChange = (selection: UserVO[]) => {
  329. ids.value = selection.map((item) => item.userId);
  330. single.value = selection.length != 1;
  331. multiple.value = !selection.length;
  332. };
  333. /** 导出按钮操作 */
  334. const handleExport = () => {
  335. proxy?.download(
  336. 'system/user/export',
  337. {
  338. ...queryParams.value
  339. },
  340. `user_${new Date().getTime()}.xlsx`
  341. );
  342. };
  343. /** 初始化部门数据 */
  344. const initTreeData = async () => {
  345. // 判断部门的数据是否存在,存在不获取,不存在则获取
  346. if (deptOptions.value === undefined) {
  347. const { data } = await treeselect();
  348. deptOptions.value = data;
  349. }
  350. };
  351. /** 重置操作表单 */
  352. const reset = () => {
  353. form.value = { ...initFormData };
  354. userFormRef.value?.resetFields();
  355. };
  356. /** 取消按钮 */
  357. const cancel = () => {
  358. dialog.visible = false;
  359. reset();
  360. };
  361. /** 新增按钮操作 */
  362. // const handleAdd = async () => {
  363. // reset();
  364. // const { data } = await api.getUser();
  365. // dialog.visible = true;
  366. // dialog.title = '新增用户';
  367. // await initTreeData();
  368. // postOptions.value = data.posts;
  369. // roleOptions.value = data.roles;
  370. // // form.value.password = initPassword.value.toString();
  371. // };
  372. // /** 修改按钮操作 */
  373. // const handleUpdate = async (row?: UserForm) => {
  374. // reset();
  375. // const userId = row?.userId || ids.value[0];
  376. // const { data } = await api.getUser(userId);
  377. // dialog.visible = true;
  378. // dialog.title = '修改用户';
  379. // await initTreeData();
  380. // Object.assign(form.value, data.user);
  381. // postOptions.value = data.posts;
  382. // roleOptions.value = data.roles;
  383. // form.value.postIds = data.postIds;
  384. // form.value.roleIds = data.roleIds;
  385. // form.value.password = '';
  386. // };
  387. // 导入
  388. let uploadShow = ref(false);
  389. const handleUpload = () => {
  390. uploadShow.value = true;
  391. };
  392. let showUploadDetails = ref(false);
  393. const handleShowUploadDetails = () => {
  394. showUploadDetails.value = true;
  395. };
  396. onMounted(() => {
  397. getList(); // 初始化列表数据
  398. proxy?.getConfigKey('sys.user.initPassword').then((response) => {
  399. initPassword.value = response.data;
  400. });
  401. getRegionalTree3().then((res) => {
  402. treeData.value = res.data;
  403. })
  404. });
  405. // 监听查询参数变化并重新获取数据
  406. watch(queryParams, () => {
  407. getList();
  408. });
  409. </script>
  410. <style scoped lang="scss"></style>