123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404 |
- <template>
- <div>
- <div class="app-container">
- <div v-show="!dialog.visible && !detailState.show && !addState.show && !EditState.show">
- <el-row :gutter="20">
- <el-col :lg="4" :xs="24" style="">
- <el-input v-model="deptName" placeholder="请输入部门名称" prefix-icon="Search" clearable />
- <el-tree
- ref="deptTreeRef"
- class="mt-2"
- node-key="id"
- :data="deptOptions"
- :props="{ label: 'label', children: 'children' }"
- :expand-on-click-node="false"
- :filter-node-method="filterNode"
- highlight-current
- default-expand-all
- @node-click="handleNodeClick"
- />
- </el-col>
- <el-col :lg="20" :xs="24">
- <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
- <div v-show="showSearch" class="mb-[10px]">
- <h1>茂名市责任人列表</h1>
- <el-form ref="queryFormRef" :model="queryParams" :inline="true">
- <el-form-item>
- <el-button type="primary">批量导出</el-button>
- <el-button type="primary" @click="handleUpload">批量导入</el-button>
- <el-button type="primary" @click="handleAdd">新建责任人</el-button>
- <el-button type="primary" @click="handleShowUploadDetails">查看导入情况</el-button>
- </el-form-item>
- <el-form-item label="姓名:" prop="Name" label-width="auto">
- <el-input v-model="queryParams.Name" placeholder="请输入联系人" clearable @keyup.enter="handleQuery" />
- </el-form-item>
- <el-form-item>
- <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
- <el-button icon="Refresh" @click="resetQuery">重置</el-button>
- </el-form-item>
- </el-form>
- </div>
- </transition>
- <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
- <el-table-column type="selection" width="50" align="center" />
- <el-table-column v-if="columns[0].visible" key="userId" label="用户编号" align="center" prop="userId" />
- <el-table-column
- v-if="columns[1].visible"
- key="name"
- label="姓名"
- align="center"
- prop="name"
- :show-overflow-tooltip="true"
- width="120"
- />
- <el-table-column
- v-if="columns[2].visible"
- key="area_name"
- label="行政区划"
- align="center"
- prop="area_name"
- :show-overflow-tooltip="true"
- />
- <el-table-column
- v-if="columns[3].visible"
- key="unit_name"
- label="所属单位"
- align="center"
- prop="unit_name"
- :show-overflow-tooltip="true"
- />
- <el-table-column v-if="columns[4].visible" key="position" label="职务" align="center" prop="position" width="120" />
- <el-table-column v-if="columns[5].visible" key="phone" label="电话号码" align="center" prop="phone" width="120" />
- <el-table-column v-if="columns[6].visible" label="责任类型" align="center" prop="type_parent_list" width="160">
- <template #default="scope">
- <span v-for="(typeParent, index) in scope.row.type_parent_list" :key="index">
- <span v-if="index > 0">、</span>
- {{ typeParent.type_parent }}
- </span>
- </template>
- </el-table-column>
- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
- <template #default="scope">
- <el-text v-hasPermi="['system:menu:resetPwd']" class="common-btn-text-primary" @click="handleView(scope.row)">查看详情</el-text>
- <el-text v-hasPermi="['system:menu:edit']" class="common-btn-text-primary" @click="handleUpdate(scope.row)">修改</el-text>
- <el-text v-hasPermi="['system:menu:remove']" class="common-btn-text-danger" @click="handleDelete(scope.row)">删除</el-text>
- </template>
- </el-table-column>
- </el-table>
- <pagination
- v-show="total > 0"
- v-model:page="queryParams.page"
- v-model:limit="queryParams.pageSize"
- :total="total"
- @pagination="getList"
- />
- </el-col>
- </el-row>
- </div>
- <DataImport v-model="uploadShow" url="" file-name="责任人信息批量导入模板" steps-text="责任人信息" />
- <DataImportDetail v-model="showUploadDetails" />
- <detail v-if="detailState.show" :id="detailState.id" @close="handledetailClose"></detail>
- <add v-if="addState.show" @close="handleAddClose" @refresh="getList"></add>
- <Edit v-if="EditState.show" :id="EditState.id" @close="handleEditClose" @refresh="getList"></Edit>
- </div>
- </div>
- </template>
- <script setup lang="ts">
- import api from '@/api/system/user';
- import { UserForm, UserQuery, UserVO } from '@/api/system/user/types';
- import { deleteData, getTableList } from '@/api/PreventionResponsible/index';
- import { DeptVO } from '@/api/system/dept/types';
- import { RoleVO } from '@/api/system/role/types';
- import { PostQuery, PostVO } from '@/api/system/post/types';
- import { treeselect } from '@/api/system/dept';
- import { globalHeaders } from '@/utils/request';
- import { to } from 'await-to-js';
- import { optionselect } from '@/api/system/post';
- import detail from '@/views/setting/PreventionResponsible/detail.vue';
- import add from '@/views/setting/PreventionResponsible/add.vue';
- import Edit from '@/views/setting/PreventionResponsible/Edit.vue';
- import { reactive, ref } from 'vue';
- import { deleteMaterialRoot } from '@/api/comprehensiveGuarantee/materialReserveManagement/warehouseManagement';
- const router = useRouter();
- const { proxy } = getCurrentInstance() as ComponentInternalInstance;
- const userList = ref<UserVO[]>();
- const loading = ref(true);
- const showSearch = ref(true);
- const ids = ref<Array<number | string>>([]);
- const single = ref(true);
- const multiple = ref(true);
- const total = ref(0);
- const dateRange = ref<[DateModelType, DateModelType]>(['', '']);
- const deptName = ref('');
- const deptOptions = ref<DeptVO[]>([]);
- const initPassword = ref<string>('');
- const postOptions = ref<PostVO[]>([]);
- const roleOptions = ref<RoleVO[]>([]);
- // 列显隐信息
- const columns = ref<FieldOption[]>([
- { key: 0, label: `用户编号`, visible: false, children: [] },
- { key: 1, label: `姓名`, visible: true, children: [] },
- { key: 2, label: `行政区划`, visible: true, children: [] },
- { key: 3, label: `所属单位`, visible: true, children: [] },
- { key: 4, label: `职务`, visible: true, children: [] },
- { key: 5, label: `电话号码`, visible: true, children: [] },
- { key: 6, label: `责任类型`, visible: true, children: [] }
- ]);
- const deptTreeRef = ref<ElTreeInstance>();
- const queryFormRef = ref<ElFormInstance>();
- const userFormRef = ref<ElFormInstance>();
- const dialog = reactive<DialogOption>({
- visible: false,
- title: ''
- });
- const initFormData: UserForm = {
- id: undefined,
- name: '',
- area_code: '',
- unit_name: '',
- position: '',
- phone: '',
- type_parent_list: []
- };
- const initData: PageData<UserForm, UserQuery> = {
- form: { ...initFormData },
- queryParams: {
- page: 1,
- pageSize: 10,
- Name: ''
- },
- rules: {
- userName: [
- { required: true, message: '用户名称不能为空', trigger: 'blur' },
- {
- min: 2,
- max: 20,
- message: '用户名称长度必须介于 2 和 20 之间',
- trigger: 'blur'
- }
- ],
- nickName: [{ required: true, message: '用户昵称不能为空', trigger: 'blur' }],
- password: [
- { required: true, message: '用户密码不能为空', trigger: 'blur' },
- {
- min: 5,
- max: 20,
- message: '用户密码长度必须介于 5 和 20 之间',
- trigger: 'blur'
- },
- { pattern: /^[^<>"'|\\]+$/, message: '不能包含非法字符:< > " \' \\\ |', trigger: 'blur' }
- ],
- email: [
- {
- type: 'email',
- message: '请输入正确的邮箱地址',
- trigger: ['blur', 'change']
- }
- ],
- phonenumber: [
- {
- pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
- message: '请输入正确的手机号码',
- trigger: 'blur'
- }
- ],
- roleIds: [{ required: true, message: '用户角色不能为空', trigger: 'blur' }]
- }
- };
- const data = reactive<PageData<UserForm, UserQuery>>(initData);
- const { queryParams, form, rules } = toRefs<PageData<UserForm, UserQuery>>(data);
- /** 通过条件过滤节点 */
- const filterNode = (value: string, data: any) => {
- if (!value) return true;
- return data.label.indexOf(value) !== -1;
- };
- /** 根据名称筛选部门树 */
- watchEffect(
- () => {
- deptTreeRef.value?.filter(deptName.value);
- },
- {
- flush: 'post' // watchEffect会在DOM挂载或者更新之前就会触发,此属性控制在DOM元素更新后运行
- }
- );
- /** 查询部门下拉树结构 */
- const getTreeSelect = async () => {
- const res = await api.deptTreeSelect();
- deptOptions.value = res.data;
- };
- /** 查询用户列表 */
- const getList = async () => {
- loading.value = true;
- getTableList(queryParams.value)
- .then((res) => {
- userList.value = res.data;
- total.value = res.total;
- })
- .finally(() => {
- loading.value = false;
- });
- };
- /** 节点单击事件 */
- const handleNodeClick = (data: DeptVO) => {
- queryParams.value.deptId = data.id;
- handleQuery();
- };
- /** 搜索按钮操作 */
- const handleQuery = () => {
- queryParams.value.pageNum = 1;
- getList();
- };
- /** 重置按钮操作 */
- const resetQuery = () => {
- queryFormRef.value?.resetFields();
- queryParams.value.pageNum = 1;
- deptTreeRef.value?.setCurrentKey(undefined);
- handleQuery();
- };
- /** 删除按钮操作 */
- const handleDelete = (row?: UserVO) => {
- const userIds = row?.id || ids.value;
- proxy?.$modal.confirm('是否确认删除用户编号为"' + userIds + '"的数据项?').then(() => {
- deleteData(userIds);
- getList();
- proxy?.$modal.msgSuccess('删除成功');
- });
- };
- let detailState = reactive({
- show: false,
- id: ''
- });
- /** 查看详情按钮操作 */
- const handleView = async (row: UserVO) => {
- detailState.show = true;
- detailState.id = row.id;
- };
- const handledetailClose = () => {
- detailState.show = false;
- };
- let addState = reactive({
- show: false
- });
- let EditState = reactive({
- show: false,
- id: ''
- });
- // 新建责任人按钮操作
- const handleAddClose = () => {
- addState.show = false;
- };
- const handleEditClose = () => {
- EditState.show = false;
- };
- const handleAdd = (row: UserVO) => {
- addState.show = true;
- addState.id = row.id;
- };
- const handleUpdate = (row: UserVO) => {
- EditState.show = true;
- EditState.id = row.id;
- };
- /** 选择条数 */
- const handleSelectionChange = (selection: UserVO[]) => {
- ids.value = selection.map((item) => item.userId);
- single.value = selection.length != 1;
- multiple.value = !selection.length;
- };
- /** 导出按钮操作 */
- const handleExport = () => {
- proxy?.download(
- 'system/user/export',
- {
- ...queryParams.value
- },
- `user_${new Date().getTime()}.xlsx`
- );
- };
- /** 初始化部门数据 */
- const initTreeData = async () => {
- // 判断部门的数据是否存在,存在不获取,不存在则获取
- if (deptOptions.value === undefined) {
- const { data } = await treeselect();
- deptOptions.value = data;
- }
- };
- /** 重置操作表单 */
- const reset = () => {
- form.value = { ...initFormData };
- userFormRef.value?.resetFields();
- };
- /** 取消按钮 */
- const cancel = () => {
- dialog.visible = false;
- reset();
- };
- /** 新增按钮操作 */
- // const handleAdd = async () => {
- // reset();
- // const { data } = await api.getUser();
- // dialog.visible = true;
- // dialog.title = '新增用户';
- // await initTreeData();
- // postOptions.value = data.posts;
- // roleOptions.value = data.roles;
- // // form.value.password = initPassword.value.toString();
- // };
- // /** 修改按钮操作 */
- // const handleUpdate = async (row?: UserForm) => {
- // reset();
- // const userId = row?.userId || ids.value[0];
- // const { data } = await api.getUser(userId);
- // dialog.visible = true;
- // dialog.title = '修改用户';
- // await initTreeData();
- // Object.assign(form.value, data.user);
- // postOptions.value = data.posts;
- // roleOptions.value = data.roles;
- // form.value.postIds = data.postIds;
- // form.value.roleIds = data.roleIds;
- // form.value.password = '';
- // };
- // 导入
- let uploadShow = ref(false);
- const handleUpload = () => {
- uploadShow.value = true;
- };
- let showUploadDetails = ref(false);
- const handleShowUploadDetails = () => {
- showUploadDetails.value = true;
- };
- let onMounted1 = onMounted(() => {
- getTreeSelect(); // 初始化部门数据
- getList(); // 初始化列表数据
- proxy?.getConfigKey('sys.user.initPassword').then((response) => {
- initPassword.value = response.data;
- });
- });
- // 监听查询参数变化并重新获取数据
- watch(queryParams, () => {
- getList();
- });
- </script>
- <style scoped lang="scss"></style>
|