| | |
| | | <template> |
| | | <basic-container> |
| | | <avue-crud |
| | | :option="option" |
| | | :table-loading="loading" |
| | | :data="data" |
| | | ref="crud" |
| | | v-model="form" |
| | | :permission="permissionList" |
| | | :before-open="beforeOpen" |
| | | :before-close="beforeClose" |
| | | @row-del="rowDel" |
| | | @row-update="rowUpdate" |
| | | @row-save="rowSave" |
| | | @search-change="searchChange" |
| | | @search-reset="searchReset" |
| | | @selection-change="selectionChange" |
| | | @current-change="currentChange" |
| | | @size-change="sizeChange" |
| | | @refresh-change="refreshChange" |
| | | @on-load="onLoad" |
| | | @tree-load="treeLoad" |
| | | > |
| | | <template #menu-left> |
| | | <el-button |
| | | type="danger" |
| | | icon="el-icon-delete" |
| | | v-if="permission.dept_delete" |
| | | plain |
| | | @click="handleDelete" |
| | | > |
| | | 删除 |
| | | </el-button> |
| | | </template> |
| | | <template #menu="scope"> |
| | | <el-button |
| | | type="primary" |
| | | text |
| | | icon="el-icon-plus" |
| | | @click.stop="handleAdd(scope.row, scope.index)" |
| | | v-if="userInfo.role_name.includes('admin')" |
| | | > |
| | | 新增子项 |
| | | </el-button> |
| | | </template> |
| | | <template #deptCategory="{ row }"> |
| | | <el-tag>{{ row.deptCategoryName }}</el-tag> |
| | | </template> |
| | | <!-- 自定义 areaCode 的显示模板,确保显示单一值 --> |
| | | <template #areaCode="{ row }"> |
| | | <span>{{ row.areaName }}</span> |
| | | </template> |
| | | </avue-crud> |
| | | </basic-container> |
| | | </template> |
| | | |
| | | <script> |
| | | import { |
| | | getLazyList, |
| | | getChildLazyTree, |
| | | remove, |
| | | update, |
| | | add, |
| | | getDept, |
| | | getDeptTree, |
| | | } from '@/api/system/dept'; |
| | | import { getLazyTree } from '@/api/base/region'; |
| | | import { mapGetters } from 'vuex'; |
| | | import website from '@/config/website'; |
| | | |
| | | export default { |
| | | data() { |
| | | return { |
| | | form: {}, |
| | | selectionList: [], |
| | | query: {}, |
| | | loading: true, |
| | | parentId: 0, |
| | | page: { |
| | | pageSize: 10, |
| | | currentPage: 1, |
| | | total: 0, |
| | | }, |
| | | option: { |
| | | lazy: true, |
| | | tip: false, |
| | | simplePage: true, |
| | | searchShow: true, |
| | | searchMenuSpan: 6, |
| | | tree: true, |
| | | border: true, |
| | | index: true, |
| | | selection: true, |
| | | viewBtn: true, |
| | | menuWidth: 320, |
| | | dialogClickModal: false, |
| | | column: [ |
| | | { |
| | | label: '机构名称', |
| | | prop: 'deptName', |
| | | search: true, |
| | | labelWidth: 120, |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: '请输入机构名称', |
| | | trigger: 'blur', |
| | | }, |
| | | ], |
| | | }, |
| | | { |
| | | label: '机构全称', |
| | | prop: 'fullName', |
| | | search: true, |
| | | labelWidth: 120, |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: '请输入机构全称', |
| | | trigger: 'blur', |
| | | }, |
| | | ], |
| | | }, |
| | | { |
| | | label: '上级机构', |
| | | prop: 'parentId', |
| | | dicData: [], |
| | | type: 'tree', |
| | | hide: true, |
| | | addDisabled: false, |
| | | props: { |
| | | label: 'name', |
| | | value: 'id', |
| | | }, |
| | | labelWidth: 120, |
| | | rules: [ |
| | | { |
| | | required: false, |
| | | message: '请选择上级机构', |
| | | trigger: 'click', |
| | | }, |
| | | ], |
| | | }, |
| | | { |
| | | label: '机构类型', |
| | | type: 'select', |
| | | dicUrl: '/blade-system/dict/dictionary?code=org_category', |
| | | props: { |
| | | label: 'dictValue', |
| | | value: 'dictKey', |
| | | }, |
| | | dataType: 'number', |
| | | width: 120, |
| | | labelWidth: 120, |
| | | prop: 'deptCategory', |
| | | slot: true, |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: '请输入机构类型', |
| | | trigger: 'blur', |
| | | }, |
| | | ], |
| | | }, |
| | | { |
| | | label: '机构性质', |
| | | type: 'select', |
| | | dicUrl: '/blade-system/dict/dictionary?code=org_nature', |
| | | props: { |
| | | label: 'dictValue', |
| | | value: 'dictKey', |
| | | }, |
| | | dataType: 'number', |
| | | width: 120, |
| | | labelWidth: 120, |
| | | prop: 'deptNature', |
| | | slot: true, |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: '请输入机构性质', |
| | | trigger: 'blur', |
| | | }, |
| | | ], |
| | | }, |
| | | { |
| | | label: '排序', |
| | | prop: 'sort', |
| | | type: 'number', |
| | | align: 'right', |
| | | labelWidth: 120, |
| | | width: 80, |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: '请输入排序', |
| | | trigger: 'blur', |
| | | }, |
| | | ], |
| | | }, |
| | | { |
| | | label: '组织id', |
| | | prop: 'bingId', |
| | | type: 'number', |
| | | align: 'right', |
| | | labelWidth: 120, |
| | | addDisplay: false, |
| | | editDisplay: false, |
| | | width: 80, |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: '请输入组织id', |
| | | trigger: 'blur', |
| | | }, |
| | | ], |
| | | }, |
| | | { |
| | | label: '行政区划', |
| | | prop: 'areaCode', |
| | | checkStrictly: true, |
| | | type: 'cascader', |
| | | labelWidth: 120, |
| | | props: { |
| | | label: 'title', |
| | | value: 'value', |
| | | emitPath: false, // 只返回最后选中的值 |
| | | checkStrictly: true, // 可以选择任意一级 |
| | | multiple: false, // 确保只能单选 |
| | | expandTrigger: 'hover' // 鼠标悬停时展开子菜单 |
| | | }, |
| | | dataType: 'string', // 使用字符串类型 |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: '请选择行政区划', |
| | | trigger: 'change' |
| | | } |
| | | ], |
| | | change: ({ value }) => { |
| | | if (!value) { |
| | | this.form.areaCode = null; // 未选择时置为空 |
| | | } else { |
| | | // 如果 value 是逗号分隔的字符串,拆分并取最后一个值 |
| | | if (typeof value === 'string' && value.includes(',')) { |
| | | const codes = value.split(','); |
| | | this.form.areaCode = codes[codes.length - 1]; |
| | | } else { |
| | | this.form.areaCode = value; // 直接使用单一值 |
| | | } |
| | | } |
| | | console.log('cascader change value:', value); |
| | | console.log('处理后的区县编码:', this.form.areaCode); |
| | | }, |
| | | lazy: true, |
| | | lazyLoad(node, resolve) { |
| | | let level = node.level; |
| | | let list = []; |
| | | let callback = () => { |
| | | resolve( |
| | | (list || []).map((ele) => ({ |
| | | ...ele, |
| | | value: ele.value, // 保持原始值类型(字符串) |
| | | leaf: level >= 2 // 县级为最后一级 |
| | | })) |
| | | ); |
| | | }; |
| | | |
| | | if (level === 0) { |
| | | getLazyTree('000000000000').then((res) => { |
| | | list = res.data.data; |
| | | callback(); |
| | | }); |
| | | } else if (level === 1) { |
| | | getLazyTree(node.value).then((res) => { |
| | | list = res.data.data; |
| | | callback(); |
| | | }); |
| | | } else if (level === 2) { |
| | | getLazyTree(node.value).then((res) => { |
| | | list = res.data.data; |
| | | callback(); |
| | | }); |
| | | } else { |
| | | callback(); |
| | | } |
| | | } |
| | | }, |
| | | { |
| | | label: '备注', |
| | | prop: 'remark', |
| | | labelWidth: 120, |
| | | rules: [ |
| | | { |
| | | required: false, |
| | | message: '请输入备注', |
| | | trigger: 'blur', |
| | | }, |
| | | ], |
| | | hide: true, |
| | | }, |
| | | ], |
| | | }, |
| | | data: [], |
| | | }; |
| | | }, |
| | | computed: { |
| | | ...mapGetters(['userInfo', 'permission']), |
| | | permissionList() { |
| | | return { |
| | | addBtn: this.validData(this.permission.dept_add, false), |
| | | viewBtn: this.validData(this.permission.dept_view, false), |
| | | delBtn: this.validData(this.permission.dept_delete, false), |
| | | editBtn: this.validData(this.permission.dept_edit, false), |
| | | }; |
| | | }, |
| | | ids() { |
| | | let ids = []; |
| | | this.selectionList.forEach((ele) => { |
| | | ids.push(ele.id); |
| | | }); |
| | | return ids.join(','); |
| | | }, |
| | | }, |
| | | methods: { |
| | | initData() { |
| | | getDeptTree().then((res) => { |
| | | const column = this.findObject(this.option.column, 'parentId'); |
| | | column.dicData = res.data.data; |
| | | }); |
| | | }, |
| | | handleAdd(row) { |
| | | this.parentId = row.id; |
| | | const column = this.findObject(this.option.column, 'parentId'); |
| | | column.value = row.id; |
| | | column.addDisabled = true; |
| | | this.form.areaCode = null; // 初始化为空 |
| | | this.$refs.crud.rowAdd(); |
| | | }, |
| | | validateSubmitData(row) { |
| | | if (!row.areaCode) { |
| | | this.$message.warning('请选择行政区划'); |
| | | return false; |
| | | } |
| | | return true; |
| | | }, |
| | | rowSave(row, done, loading) { |
| | | if (!this.validateSubmitData(row)) { |
| | | loading(); |
| | | return; |
| | | } |
| | | console.log('--- Start rowSave ---'); |
| | | console.log('Form data before save:', this.form); |
| | | |
| | | // 处理 areaCode,确保只取最后一个值 |
| | | let areaCode = this.form.areaCode; |
| | | if (Array.isArray(areaCode)) { |
| | | areaCode = areaCode[areaCode.length - 1]; // 数组取最后一个 |
| | | } else if (typeof areaCode === 'string' && areaCode.includes(',')) { |
| | | const codes = areaCode.split(','); |
| | | areaCode = codes[codes.length - 1]; // 字符串拆分取最后一个 |
| | | } |
| | | row.areaCode = areaCode || null; // 确保非空 |
| | | |
| | | console.log('Row data before submit:', row); |
| | | |
| | | add(row).then( |
| | | (res) => { |
| | | console.log('Save response:', res.data); |
| | | const data = res.data.data; |
| | | row.id = data.id; |
| | | row.deptCategoryName = data.deptCategoryName; |
| | | row.tenantId = data.tenantId; |
| | | this.$message({ |
| | | type: 'success', |
| | | message: '操作成功!' |
| | | }); |
| | | this.onLoad(this.page); |
| | | done(row); |
| | | }, |
| | | (error) => { |
| | | console.log('Save error:', error); |
| | | this.loading = false; |
| | | loading(); |
| | | } |
| | | ); |
| | | }, |
| | | rowUpdate(row, index, done, loading) { |
| | | if (!this.validateSubmitData(row)) { |
| | | loading(); |
| | | return; |
| | | } |
| | | console.log('--- Start rowUpdate ---'); |
| | | |
| | | // 提交时只使用县级代码 |
| | | const submitData = { |
| | | ...row, |
| | | areaCode: row.areaCode.split(',').pop() // 取最后一个代码(县级) |
| | | }; |
| | | |
| | | console.log('Row data before submit:', row); |
| | | |
| | | update(submitData).then( |
| | | (res) => { |
| | | console.log('Update response:', res.data); |
| | | this.$message({ |
| | | type: 'success', |
| | | message: '操作成功!', |
| | | }); |
| | | this.onLoad(this.page); |
| | | done(row); |
| | | }, |
| | | (error) => { |
| | | console.log('Update error:', error); |
| | | this.loading = false; |
| | | loading(); |
| | | } |
| | | ).catch((error) => { |
| | | console.log('Update promise rejected:', error); |
| | | this.loading = false; |
| | | }); |
| | | }, |
| | | rowDel(row, index, done) { |
| | | this.$confirm('确定将选择数据删除?', { |
| | | confirmButtonText: '确定', |
| | | cancelButtonText: '取消', |
| | | type: 'warning', |
| | | }) |
| | | .then(() => { |
| | | return remove(row.id); |
| | | }) |
| | | .then(() => { |
| | | this.$message({ |
| | | type: 'success', |
| | | message: '操作成功!', |
| | | }); |
| | | this.onLoad(this.page); |
| | | done(row); |
| | | }); |
| | | }, |
| | | handleDelete() { |
| | | if (this.selectionList.length === 0) { |
| | | this.$message.warning('请选择至少一条数据'); |
| | | return; |
| | | } |
| | | this.$confirm('确定将选择数据删除?', { |
| | | confirmButtonText: '确定', |
| | | cancelButtonText: '取消', |
| | | type: 'warning', |
| | | }) |
| | | .then(() => { |
| | | return remove(this.ids); |
| | | }) |
| | | .then(() => { |
| | | this.data = []; |
| | | this.parentId = 0; |
| | | this.$refs.crud.refreshTable(); |
| | | this.$refs.crud.toggleSelection(); |
| | | this.onLoad(this.page); |
| | | this.$message({ |
| | | type: 'success', |
| | | message: '操作成功!', |
| | | }); |
| | | }); |
| | | }, |
| | | searchReset() { |
| | | this.query = {}; |
| | | this.parentId = 0; |
| | | this.onLoad(this.page); |
| | | }, |
| | | searchChange(params, done) { |
| | | this.query = params; |
| | | this.parentId = ''; |
| | | this.page.currentPage = 1; |
| | | this.onLoad(this.page, params); |
| | | done(); |
| | | }, |
| | | selectionChange(list) { |
| | | this.selectionList = list; |
| | | }, |
| | | selectionClear() { |
| | | this.selectionList = []; |
| | | this.$refs.crud.toggleSelection(); |
| | | }, |
| | | beforeOpen(done, type) { |
| | | if (['add', 'edit'].includes(type)) { |
| | | this.initData(); |
| | | } |
| | | if (['edit', 'view'].includes(type)) { |
| | | getDept(this.form.id).then((res) => { |
| | | const areaCode = res.data.data.areaCode; |
| | | const areaName = res.data.data.areaName; |
| | | |
| | | // 生成完整的行政区划代码 |
| | | const fullAreaCode = this.getFullAreaCode(areaCode); |
| | | |
| | | this.form = Object.assign({}, res.data.data, { |
| | | hasChildren: this.form.hasChildren, |
| | | // 使用完整的行政区划代码 |
| | | areaCode: fullAreaCode, |
| | | areaName: areaName || '', |
| | | }); |
| | | }); |
| | | } else if (type === 'add') { |
| | | this.form.areaCode = ''; |
| | | this.form.areaName = ''; |
| | | } |
| | | done(); |
| | | }, |
| | | beforeClose(done) { |
| | | this.parentId = ''; |
| | | const column = this.findObject(this.option.column, 'parentId'); |
| | | column.value = ''; |
| | | column.addDisabled = false; |
| | | this.form.areaCode = null; |
| | | done(); |
| | | }, |
| | | currentChange(currentPage) { |
| | | this.page.currentPage = currentPage; |
| | | this.onLoad(this.page); |
| | | }, |
| | | sizeChange(pageSize) { |
| | | this.page.pageSize = pageSize; |
| | | this.onLoad(this.page); |
| | | }, |
| | | refreshChange() { |
| | | this.onLoad(this.page, this.query); |
| | | }, |
| | | onLoad(page, params = {}) { |
| | | this.loading = true; |
| | | console.log('onLoad triggered with page:', page, 'params:', params); |
| | | console.log('Current parentId:', this.parentId, 'query:', this.query); |
| | | getLazyList(this.parentId, Object.assign(params, this.query)).then((res) => { |
| | | console.log('onLoad response:', res.data); |
| | | // 处理 areaCode,确保是单一字符串 |
| | | const data = (res.data.data || []).map(item => { |
| | | const fullAreaCode = this.getFullAreaCode(item.areaCode); |
| | | return { |
| | | ...item, |
| | | // 保存完整的行政区划代码 |
| | | areaCode: fullAreaCode, |
| | | // 使用原始的县级代码作为实际值 |
| | | originalAreaCode: item.areaCode |
| | | }; |
| | | }); |
| | | this.data = data; |
| | | this.loading = false; |
| | | this.selectionClear(); |
| | | console.log('Table data after onLoad:', this.data); |
| | | }).catch((error) => { |
| | | console.log('onLoad error:', error); |
| | | this.loading = false; |
| | | this.data = this.data; // 保留当前数据 |
| | | console.log('Table data after onLoad error:', this.data); |
| | | }); |
| | | }, |
| | | treeLoad(tree, treeNode, resolve) { |
| | | getChildLazyTree({ parentId: tree.id }).then((res) => { |
| | | resolve(res.data.data); |
| | | }); |
| | | }, |
| | | // 新增:获取完整的行政区划代码 |
| | | getFullAreaCode(countyCode) { |
| | | if (!countyCode) return ''; |
| | | // 县级代码是12位,省级代码取前2位,市级代码取前4位 |
| | | const provinceCode = countyCode.substring(0, 2) + '0000000000'; |
| | | const cityCode = countyCode.substring(0, 4) + '00000000'; |
| | | return `${provinceCode},${cityCode},${countyCode}`; |
| | | }, |
| | | }, |
| | | }; |
| | | </script> |
| | | |
| | | <style></style> |
| | | <basic-container> |
| | | <avue-crud |
| | | :option="option" |
| | | :table-loading="loading" |
| | | :data="data" |
| | | ref="crud" |
| | | v-model="form" |
| | | :permission="permissionList" |
| | | :before-open="beforeOpen" |
| | | :before-close="beforeClose" |
| | | @row-del="rowDel" |
| | | @row-update="rowUpdate" |
| | | @row-save="rowSave" |
| | | @search-change="searchChange" |
| | | @search-reset="searchReset" |
| | | @selection-change="selectionChange" |
| | | @current-change="currentChange" |
| | | @size-change="sizeChange" |
| | | @refresh-change="refreshChange" |
| | | @on-load="onLoad" |
| | | @tree-load="treeLoad" |
| | | > |
| | | <template #menu-left> |
| | | <el-button |
| | | type="danger" |
| | | icon="el-icon-delete" |
| | | v-if="permission.dept_delete" |
| | | plain |
| | | @click="handleDelete" |
| | | > |
| | | 删除 |
| | | </el-button> |
| | | </template> |
| | | <template #menu="scope"> |
| | | <el-button |
| | | type="primary" |
| | | text |
| | | icon="el-icon-plus" |
| | | @click.stop="handleAdd(scope.row, scope.index)" |
| | | v-if="userInfo.role_name.includes('admin')" |
| | | > |
| | | 新增子项 |
| | | </el-button> |
| | | </template> |
| | | <template #deptCategory="{ row }"> |
| | | <el-tag>{{ row.deptCategoryName }}</el-tag> |
| | | </template> |
| | | <!-- 自定义 areaCode 的显示模板,确保显示单一值 --> |
| | | <template #areaCode="{ row }"> |
| | | <span>{{ row.areaName }}</span> |
| | | </template> |
| | | </avue-crud> |
| | | </basic-container> |
| | | </template> |
| | | |
| | | <script> |
| | | import { |
| | | getLazyList, |
| | | getChildLazyTree, |
| | | remove, |
| | | update, |
| | | add, |
| | | getDept, |
| | | getDeptTree, |
| | | } from '@/api/system/dept'; |
| | | import { getLazyTree } from '@/api/base/region'; |
| | | import { mapGetters } from 'vuex'; |
| | | import website from '@/config/website'; |
| | | |
| | | export default { |
| | | data() { |
| | | return { |
| | | form: {}, |
| | | selectionList: [], |
| | | query: {}, |
| | | loading: true, |
| | | parentId: 0, |
| | | page: { |
| | | pageSize: 10, |
| | | currentPage: 1, |
| | | total: 0, |
| | | }, |
| | | option: { |
| | | lazy: true, |
| | | tip: false, |
| | | simplePage: true, |
| | | searchShow: true, |
| | | searchMenuSpan: 6, |
| | | tree: true, |
| | | border: true, |
| | | index: true, |
| | | selection: true, |
| | | viewBtn: true, |
| | | menuWidth: 320, |
| | | dialogClickModal: false, |
| | | column: [ |
| | | { |
| | | label: '机构名称', |
| | | prop: 'deptName', |
| | | search: true, |
| | | labelWidth: 120, |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: '请输入机构名称', |
| | | trigger: 'blur', |
| | | }, |
| | | ], |
| | | }, |
| | | { |
| | | label: '机构全称', |
| | | prop: 'fullName', |
| | | search: true, |
| | | labelWidth: 120, |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: '请输入机构全称', |
| | | trigger: 'blur', |
| | | }, |
| | | ], |
| | | }, |
| | | { |
| | | label: '上级机构', |
| | | prop: 'parentId', |
| | | dicData: [], |
| | | type: 'tree', |
| | | hide: true, |
| | | addDisabled: false, |
| | | props: { |
| | | label: 'name', |
| | | value: 'id', |
| | | }, |
| | | labelWidth: 120, |
| | | rules: [ |
| | | { |
| | | required: false, |
| | | message: '请选择上级机构', |
| | | trigger: 'click', |
| | | }, |
| | | ], |
| | | }, |
| | | { |
| | | label: '机构类型', |
| | | type: 'select', |
| | | dicUrl: '/blade-system/dict/dictionary?code=org_category', |
| | | props: { |
| | | label: 'dictValue', |
| | | value: 'dictKey', |
| | | }, |
| | | dataType: 'number', |
| | | width: 120, |
| | | labelWidth: 120, |
| | | prop: 'deptCategory', |
| | | slot: true, |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: '请输入机构类型', |
| | | trigger: 'blur', |
| | | }, |
| | | ], |
| | | }, |
| | | { |
| | | label: '机构性质', |
| | | type: 'select', |
| | | dicUrl: '/blade-system/dict/dictionary?code=org_nature', |
| | | props: { |
| | | label: 'dictValue', |
| | | value: 'dictKey', |
| | | }, |
| | | dataType: 'number', |
| | | width: 120, |
| | | labelWidth: 120, |
| | | prop: 'deptNature', |
| | | slot: true, |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: '请输入机构性质', |
| | | trigger: 'blur', |
| | | }, |
| | | ], |
| | | }, |
| | | { |
| | | label: '排序', |
| | | prop: 'sort', |
| | | type: 'number', |
| | | align: 'right', |
| | | labelWidth: 120, |
| | | width: 80, |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: '请输入排序', |
| | | trigger: 'blur', |
| | | }, |
| | | ], |
| | | }, |
| | | { |
| | | label: '组织id', |
| | | prop: 'bingId', |
| | | type: 'number', |
| | | align: 'right', |
| | | labelWidth: 120, |
| | | addDisplay: false, |
| | | editDisplay: false, |
| | | width: 80, |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: '请输入组织id', |
| | | trigger: 'blur', |
| | | }, |
| | | ], |
| | | }, |
| | | { |
| | | label: '行政区划', |
| | | prop: 'areaCode', |
| | | checkStrictly: true, |
| | | type: 'cascader', |
| | | labelWidth: 120, |
| | | props: { |
| | | label: 'title', |
| | | value: 'value', |
| | | emitPath: false, // 只返回最后选中的值 |
| | | checkStrictly: true, // 可以选择任意一级 |
| | | multiple: false, // 确保只能单选 |
| | | expandTrigger: 'hover', // 鼠标悬停时展开子菜单 |
| | | }, |
| | | dataType: 'string', // 使用字符串类型 |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: '请选择行政区划', |
| | | trigger: 'change', |
| | | }, |
| | | ], |
| | | change: ({ value }) => { |
| | | if (!value) { |
| | | this.form.areaCode = null; // 未选择时置为空 |
| | | } else { |
| | | // 如果 value 是逗号分隔的字符串,拆分并取最后一个值 |
| | | if (typeof value === 'string' && value.includes(',')) { |
| | | const codes = value.split(','); |
| | | this.form.areaCode = codes[codes.length - 1]; |
| | | } else { |
| | | this.form.areaCode = value; // 直接使用单一值 |
| | | } |
| | | } |
| | | console.log('cascader change value:', value); |
| | | console.log('处理后的区县编码:', this.form.areaCode); |
| | | }, |
| | | lazy: true, |
| | | lazyLoad(node, resolve) { |
| | | let level = node.level; |
| | | let list = []; |
| | | let callback = () => { |
| | | resolve( |
| | | (list || []).map(ele => ({ |
| | | ...ele, |
| | | value: ele.value, // 保持原始值类型(字符串) |
| | | leaf: level >= 2, // 县级为最后一级 |
| | | })) |
| | | ); |
| | | }; |
| | | |
| | | if (level === 0) { |
| | | getLazyTree('000000000000').then(res => { |
| | | list = res.data.data; |
| | | callback(); |
| | | }); |
| | | } else if (level === 1) { |
| | | getLazyTree(node.value).then(res => { |
| | | list = res.data.data; |
| | | callback(); |
| | | }); |
| | | } else if (level === 2) { |
| | | getLazyTree(node.value).then(res => { |
| | | list = res.data.data; |
| | | callback(); |
| | | }); |
| | | } else { |
| | | callback(); |
| | | } |
| | | }, |
| | | }, |
| | | { |
| | | label: '备注', |
| | | prop: 'remark', |
| | | labelWidth: 120, |
| | | rules: [ |
| | | { |
| | | required: false, |
| | | message: '请输入备注', |
| | | trigger: 'blur', |
| | | }, |
| | | ], |
| | | hide: true, |
| | | }, |
| | | ], |
| | | }, |
| | | data: [], |
| | | }; |
| | | }, |
| | | computed: { |
| | | ...mapGetters(['userInfo', 'permission']), |
| | | permissionList() { |
| | | return { |
| | | addBtn: this.validData(this.permission.dept_add, false), |
| | | viewBtn: this.validData(this.permission.dept_view, false), |
| | | delBtn: this.validData(this.permission.dept_delete, false), |
| | | editBtn: this.validData(this.permission.dept_edit, false), |
| | | }; |
| | | }, |
| | | ids() { |
| | | let ids = []; |
| | | this.selectionList.forEach(ele => { |
| | | ids.push(ele.id); |
| | | }); |
| | | return ids.join(','); |
| | | }, |
| | | }, |
| | | methods: { |
| | | initData() { |
| | | getDeptTree().then(res => { |
| | | const column = this.findObject(this.option.column, 'parentId'); |
| | | column.dicData = res.data.data; |
| | | }); |
| | | }, |
| | | handleAdd(row) { |
| | | this.parentId = row.id; |
| | | const column = this.findObject(this.option.column, 'parentId'); |
| | | column.value = row.id; |
| | | column.addDisabled = true; |
| | | this.form.areaCode = null; // 初始化为空 |
| | | this.$refs.crud.rowAdd(); |
| | | }, |
| | | validateSubmitData(row) { |
| | | if (!row.areaCode) { |
| | | this.$message.warning('请选择行政区划'); |
| | | return false; |
| | | } |
| | | return true; |
| | | }, |
| | | rowSave(row, done, loading) { |
| | | if (!this.validateSubmitData(row)) { |
| | | loading(); |
| | | return; |
| | | } |
| | | console.log('--- Start rowSave ---'); |
| | | console.log('Form data before save:', this.form); |
| | | |
| | | // 处理 areaCode,确保只取最后一个值 |
| | | let areaCode = this.form.areaCode; |
| | | if (Array.isArray(areaCode)) { |
| | | areaCode = areaCode[areaCode.length - 1]; // 数组取最后一个 |
| | | } else if (typeof areaCode === 'string' && areaCode.includes(',')) { |
| | | const codes = areaCode.split(','); |
| | | areaCode = codes[codes.length - 1]; // 字符串拆分取最后一个 |
| | | } |
| | | row.areaCode = areaCode || null; // 确保非空 |
| | | |
| | | console.log('Row data before submit:', row); |
| | | |
| | | add(row).then( |
| | | res => { |
| | | console.log('Save response:', res.data); |
| | | const data = res.data.data; |
| | | row.id = data.id; |
| | | row.deptCategoryName = data.deptCategoryName; |
| | | row.tenantId = data.tenantId; |
| | | this.$message({ |
| | | type: 'success', |
| | | message: '操作成功!', |
| | | }); |
| | | this.onLoad(this.page); |
| | | done(row); |
| | | }, |
| | | error => { |
| | | console.log('Save error:', error); |
| | | this.loading = false; |
| | | loading(); |
| | | } |
| | | ); |
| | | }, |
| | | rowUpdate(row, index, done, loading) { |
| | | if (!this.validateSubmitData(row)) { |
| | | loading(); |
| | | return; |
| | | } |
| | | console.log('--- Start rowUpdate ---'); |
| | | |
| | | // 提交时只使用县级代码 |
| | | const submitData = { |
| | | ...row, |
| | | areaCode: row.areaCode.split(',').pop(), // 取最后一个代码(县级) |
| | | }; |
| | | |
| | | console.log('Row data before submit:', row); |
| | | |
| | | update(submitData) |
| | | .then( |
| | | res => { |
| | | console.log('Update response:', res.data); |
| | | this.$message({ |
| | | type: 'success', |
| | | message: '操作成功!', |
| | | }); |
| | | this.onLoad(this.page); |
| | | done(row); |
| | | }, |
| | | error => { |
| | | console.log('Update error:', error); |
| | | this.loading = false; |
| | | loading(); |
| | | } |
| | | ) |
| | | .catch(error => { |
| | | console.log('Update promise rejected:', error); |
| | | this.loading = false; |
| | | }); |
| | | }, |
| | | rowDel(row, index, done) { |
| | | this.$confirm('确定将选择数据删除?', { |
| | | confirmButtonText: '确定', |
| | | cancelButtonText: '取消', |
| | | type: 'warning', |
| | | }) |
| | | .then(() => { |
| | | return remove(row.id); |
| | | }) |
| | | .then(() => { |
| | | this.$message({ |
| | | type: 'success', |
| | | message: '操作成功!', |
| | | }); |
| | | this.onLoad(this.page); |
| | | done(row); |
| | | }); |
| | | }, |
| | | handleDelete() { |
| | | if (this.selectionList.length === 0) { |
| | | this.$message.warning('请选择至少一条数据'); |
| | | return; |
| | | } |
| | | this.$confirm('确定将选择数据删除?', { |
| | | confirmButtonText: '确定', |
| | | cancelButtonText: '取消', |
| | | type: 'warning', |
| | | }) |
| | | .then(() => { |
| | | return remove(this.ids); |
| | | }) |
| | | .then(() => { |
| | | this.data = []; |
| | | this.parentId = 0; |
| | | this.$refs.crud.refreshTable(); |
| | | this.$refs.crud.toggleSelection(); |
| | | this.onLoad(this.page); |
| | | this.$message({ |
| | | type: 'success', |
| | | message: '操作成功!', |
| | | }); |
| | | }); |
| | | }, |
| | | searchReset() { |
| | | this.query = {}; |
| | | this.parentId = 0; |
| | | this.onLoad(this.page); |
| | | }, |
| | | searchChange(params, done) { |
| | | this.query = params; |
| | | this.parentId = ''; |
| | | this.page.currentPage = 1; |
| | | this.onLoad(this.page, params); |
| | | done(); |
| | | }, |
| | | selectionChange(list) { |
| | | this.selectionList = list; |
| | | }, |
| | | selectionClear() { |
| | | this.selectionList = []; |
| | | this.$refs.crud.toggleSelection(); |
| | | }, |
| | | // 修改 beforeOpen 方法 |
| | | beforeOpen(done, type) { |
| | | if (['add', 'edit'].includes(type)) { |
| | | this.initData(); |
| | | } |
| | | if (['edit', 'view'].includes(type)) { |
| | | getDept(this.form.id).then(res => { |
| | | const data = res.data.data; |
| | | const areaCode = data.areaCode; |
| | | const areaName = data.areaName; |
| | | |
| | | // 生成完整的行政区划代码(考虑不同级别) |
| | | const fullAreaCode = this.getFullAreaCode(areaCode); |
| | | |
| | | this.form = Object.assign({}, data, { |
| | | hasChildren: this.form.hasChildren, |
| | | areaCode: fullAreaCode, |
| | | areaName: areaName || '', |
| | | }); |
| | | |
| | | // 调试输出 |
| | | console.log('回显数据:', { |
| | | originalAreaCode: areaCode, |
| | | fullAreaCode: fullAreaCode, |
| | | areaName: areaName, |
| | | }); |
| | | }); |
| | | } else if (type === 'add') { |
| | | this.form.areaCode = ''; |
| | | this.form.areaName = ''; |
| | | } |
| | | done(); |
| | | }, |
| | | beforeClose(done) { |
| | | this.parentId = ''; |
| | | const column = this.findObject(this.option.column, 'parentId'); |
| | | column.value = ''; |
| | | column.addDisabled = false; |
| | | this.form.areaCode = null; |
| | | done(); |
| | | }, |
| | | currentChange(currentPage) { |
| | | this.page.currentPage = currentPage; |
| | | this.onLoad(this.page); |
| | | }, |
| | | sizeChange(pageSize) { |
| | | this.page.pageSize = pageSize; |
| | | this.onLoad(this.page); |
| | | }, |
| | | refreshChange() { |
| | | this.onLoad(this.page, this.query); |
| | | }, |
| | | onLoad(page, params = {}) { |
| | | this.loading = true; |
| | | console.log('onLoad triggered with page:', page, 'params:', params); |
| | | console.log('Current parentId:', this.parentId, 'query:', this.query); |
| | | getLazyList(this.parentId, Object.assign(params, this.query)) |
| | | .then(res => { |
| | | console.log('onLoad response:', res.data); |
| | | // 处理 areaCode,确保是单一字符串 |
| | | const data = (res.data.data || []).map(item => { |
| | | const fullAreaCode = this.getFullAreaCode(item.areaCode); |
| | | return { |
| | | ...item, |
| | | // 保存完整的行政区划代码 |
| | | areaCode: fullAreaCode, |
| | | // 使用原始的县级代码作为实际值 |
| | | originalAreaCode: item.areaCode, |
| | | }; |
| | | }); |
| | | this.data = data; |
| | | this.loading = false; |
| | | this.selectionClear(); |
| | | console.log('Table data after onLoad:', this.data); |
| | | }) |
| | | .catch(error => { |
| | | console.log('onLoad error:', error); |
| | | this.loading = false; |
| | | this.data = this.data; // 保留当前数据 |
| | | console.log('Table data after onLoad error:', this.data); |
| | | }); |
| | | }, |
| | | treeLoad(tree, treeNode, resolve) { |
| | | getChildLazyTree({ parentId: tree.id }).then(res => { |
| | | resolve(res.data.data); |
| | | }); |
| | | }, |
| | | // 修改 getFullAreaCode 方法 |
| | | getFullAreaCode(areaCode) { |
| | | if (!areaCode) return ''; |
| | | |
| | | // 根据编码长度判断层级 |
| | | const code = areaCode.toString(); |
| | | |
| | | // 如果已经是完整的逗号分隔格式,直接返回 |
| | | if (code.includes(',')) return code; |
| | | |
| | | // 处理不同级别的编码 |
| | | if (code.endsWith('0000000000')) { |
| | | // 省级编码 |
| | | return code; |
| | | } else if (code.endsWith('00000000') && !code.endsWith('0000000000')) { |
| | | // 市级编码 |
| | | const provinceCode = code.substring(0, 2) + '0000000000'; |
| | | return `${provinceCode},${code}`; |
| | | } else { |
| | | // 县级编码 |
| | | const provinceCode = code.substring(0, 2) + '0000000000'; |
| | | const cityCode = code.substring(0, 4) + '00000000'; |
| | | return `${provinceCode},${cityCode},${code}`; |
| | | } |
| | | }, |
| | | }, |
| | | }; |
| | | </script> |
| | | |
| | | <style></style> |