index.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404
  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="deptOptions"
  13. :props="{ label: 'label', children: 'children' }"
  14. :expand-on-click-node="false"
  15. :filter-node-method="filterNode"
  16. highlight-current
  17. default-expand-all
  18. @node-click="handleNodeClick"
  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="" file-name="责任人信息批量导入模板" steps-text="责任人信息" />
  99. <DataImportDetail v-model="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" @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, 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. // 列显隐信息
  138. const columns = ref<FieldOption[]>([
  139. { key: 0, label: `用户编号`, visible: false, children: [] },
  140. { key: 1, label: `姓名`, visible: true, children: [] },
  141. { key: 2, label: `行政区划`, visible: true, children: [] },
  142. { key: 3, label: `所属单位`, visible: true, children: [] },
  143. { key: 4, label: `职务`, visible: true, children: [] },
  144. { key: 5, label: `电话号码`, visible: true, children: [] },
  145. { key: 6, label: `责任类型`, visible: true, children: [] }
  146. ]);
  147. const deptTreeRef = ref<ElTreeInstance>();
  148. const queryFormRef = ref<ElFormInstance>();
  149. const userFormRef = ref<ElFormInstance>();
  150. const dialog = reactive<DialogOption>({
  151. visible: false,
  152. title: ''
  153. });
  154. const initFormData: UserForm = {
  155. id: undefined,
  156. name: '',
  157. area_code: '',
  158. unit_name: '',
  159. position: '',
  160. phone: '',
  161. type_parent_list: []
  162. };
  163. const initData: PageData<UserForm, UserQuery> = {
  164. form: { ...initFormData },
  165. queryParams: {
  166. page: 1,
  167. pageSize: 10,
  168. Name: ''
  169. },
  170. rules: {
  171. userName: [
  172. { required: true, message: '用户名称不能为空', trigger: 'blur' },
  173. {
  174. min: 2,
  175. max: 20,
  176. message: '用户名称长度必须介于 2 和 20 之间',
  177. trigger: 'blur'
  178. }
  179. ],
  180. nickName: [{ required: true, message: '用户昵称不能为空', trigger: 'blur' }],
  181. password: [
  182. { required: true, message: '用户密码不能为空', trigger: 'blur' },
  183. {
  184. min: 5,
  185. max: 20,
  186. message: '用户密码长度必须介于 5 和 20 之间',
  187. trigger: 'blur'
  188. },
  189. { pattern: /^[^<>"'|\\]+$/, message: '不能包含非法字符:< > " \' \\\ |', trigger: 'blur' }
  190. ],
  191. email: [
  192. {
  193. type: 'email',
  194. message: '请输入正确的邮箱地址',
  195. trigger: ['blur', 'change']
  196. }
  197. ],
  198. phonenumber: [
  199. {
  200. pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
  201. message: '请输入正确的手机号码',
  202. trigger: 'blur'
  203. }
  204. ],
  205. roleIds: [{ required: true, message: '用户角色不能为空', trigger: 'blur' }]
  206. }
  207. };
  208. const data = reactive<PageData<UserForm, UserQuery>>(initData);
  209. const { queryParams, form, rules } = toRefs<PageData<UserForm, UserQuery>>(data);
  210. /** 通过条件过滤节点 */
  211. const filterNode = (value: string, data: any) => {
  212. if (!value) return true;
  213. return data.label.indexOf(value) !== -1;
  214. };
  215. /** 根据名称筛选部门树 */
  216. watchEffect(
  217. () => {
  218. deptTreeRef.value?.filter(deptName.value);
  219. },
  220. {
  221. flush: 'post' // watchEffect会在DOM挂载或者更新之前就会触发,此属性控制在DOM元素更新后运行
  222. }
  223. );
  224. /** 查询部门下拉树结构 */
  225. const getTreeSelect = async () => {
  226. const res = await api.deptTreeSelect();
  227. deptOptions.value = res.data;
  228. };
  229. /** 查询用户列表 */
  230. const getList = async () => {
  231. loading.value = true;
  232. getTableList(queryParams.value)
  233. .then((res) => {
  234. userList.value = res.data;
  235. total.value = res.total;
  236. })
  237. .finally(() => {
  238. loading.value = false;
  239. });
  240. };
  241. /** 节点单击事件 */
  242. const handleNodeClick = (data: DeptVO) => {
  243. queryParams.value.deptId = data.id;
  244. handleQuery();
  245. };
  246. /** 搜索按钮操作 */
  247. const handleQuery = () => {
  248. queryParams.value.pageNum = 1;
  249. getList();
  250. };
  251. /** 重置按钮操作 */
  252. const resetQuery = () => {
  253. queryFormRef.value?.resetFields();
  254. queryParams.value.pageNum = 1;
  255. deptTreeRef.value?.setCurrentKey(undefined);
  256. handleQuery();
  257. };
  258. /** 删除按钮操作 */
  259. const handleDelete = (row?: UserVO) => {
  260. const userIds = row?.id || ids.value;
  261. proxy?.$modal.confirm('是否确认删除用户编号为"' + userIds + '"的数据项?').then(() => {
  262. deleteData(userIds);
  263. getList();
  264. proxy?.$modal.msgSuccess('删除成功');
  265. });
  266. };
  267. let detailState = reactive({
  268. show: false,
  269. id: ''
  270. });
  271. /** 查看详情按钮操作 */
  272. const handleView = async (row: UserVO) => {
  273. detailState.show = true;
  274. detailState.id = row.id;
  275. };
  276. const handledetailClose = () => {
  277. detailState.show = false;
  278. };
  279. let addState = reactive({
  280. show: false
  281. });
  282. let EditState = reactive({
  283. show: false,
  284. id: ''
  285. });
  286. // 新建责任人按钮操作
  287. const handleAddClose = () => {
  288. addState.show = false;
  289. };
  290. const handleEditClose = () => {
  291. EditState.show = false;
  292. };
  293. const handleAdd = (row: UserVO) => {
  294. addState.show = true;
  295. addState.id = row.id;
  296. };
  297. const handleUpdate = (row: UserVO) => {
  298. EditState.show = true;
  299. EditState.id = row.id;
  300. };
  301. /** 选择条数 */
  302. const handleSelectionChange = (selection: UserVO[]) => {
  303. ids.value = selection.map((item) => item.userId);
  304. single.value = selection.length != 1;
  305. multiple.value = !selection.length;
  306. };
  307. /** 导出按钮操作 */
  308. const handleExport = () => {
  309. proxy?.download(
  310. 'system/user/export',
  311. {
  312. ...queryParams.value
  313. },
  314. `user_${new Date().getTime()}.xlsx`
  315. );
  316. };
  317. /** 初始化部门数据 */
  318. const initTreeData = async () => {
  319. // 判断部门的数据是否存在,存在不获取,不存在则获取
  320. if (deptOptions.value === undefined) {
  321. const { data } = await treeselect();
  322. deptOptions.value = data;
  323. }
  324. };
  325. /** 重置操作表单 */
  326. const reset = () => {
  327. form.value = { ...initFormData };
  328. userFormRef.value?.resetFields();
  329. };
  330. /** 取消按钮 */
  331. const cancel = () => {
  332. dialog.visible = false;
  333. reset();
  334. };
  335. /** 新增按钮操作 */
  336. // const handleAdd = async () => {
  337. // reset();
  338. // const { data } = await api.getUser();
  339. // dialog.visible = true;
  340. // dialog.title = '新增用户';
  341. // await initTreeData();
  342. // postOptions.value = data.posts;
  343. // roleOptions.value = data.roles;
  344. // // form.value.password = initPassword.value.toString();
  345. // };
  346. // /** 修改按钮操作 */
  347. // const handleUpdate = async (row?: UserForm) => {
  348. // reset();
  349. // const userId = row?.userId || ids.value[0];
  350. // const { data } = await api.getUser(userId);
  351. // dialog.visible = true;
  352. // dialog.title = '修改用户';
  353. // await initTreeData();
  354. // Object.assign(form.value, data.user);
  355. // postOptions.value = data.posts;
  356. // roleOptions.value = data.roles;
  357. // form.value.postIds = data.postIds;
  358. // form.value.roleIds = data.roleIds;
  359. // form.value.password = '';
  360. // };
  361. // 导入
  362. let uploadShow = ref(false);
  363. const handleUpload = () => {
  364. uploadShow.value = true;
  365. };
  366. let showUploadDetails = ref(false);
  367. const handleShowUploadDetails = () => {
  368. showUploadDetails.value = true;
  369. };
  370. let onMounted1 = onMounted(() => {
  371. getTreeSelect(); // 初始化部门数据
  372. getList(); // 初始化列表数据
  373. proxy?.getConfigKey('sys.user.initPassword').then((response) => {
  374. initPassword.value = response.data;
  375. });
  376. });
  377. // 监听查询参数变化并重新获取数据
  378. watch(queryParams, () => {
  379. getList();
  380. });
  381. </script>
  382. <style scoped lang="scss"></style>