| | |
| | | import { ref, reactive, computed, onMounted } from "vue"; |
| | | import { addUser, updateUser } from "@/api/user"; |
| | | import useElement from "@/hooks/useElement.js"; |
| | | import { getAreaTreeApi } from "@/api/area"; |
| | | import { formatAreaTree } from "@/utils/tree"; |
| | | const { $loading, $message, $confirm } = useElement(); |
| | | const props = defineProps({ |
| | | info: { |
| | |
| | | trigger: ["blur", "change"], |
| | | }, |
| | | ], |
| | | urole: [ |
| | | { |
| | | required: true, |
| | | message: "不能为空", |
| | | trigger: ["blur", "change"], |
| | | }, |
| | | ], |
| | | areaId: [ |
| | | { |
| | | required: true, |
| | | message: "不能为空", |
| | | trigger: ["change", "blur"], |
| | | }, |
| | | { |
| | | validator: (rule, value, callback) => { |
| | | if (!value.length) { |
| | | callback(new Error("请选择区域")); |
| | | } else { |
| | | callback(); |
| | | } |
| | | }, |
| | | trigger: ["change", "blur"], |
| | | }, |
| | | ], |
| | | }; |
| | | |
| | | const isEdit = computed(() => !!props.info?.uid); |
| | |
| | | realName: form1.realName.trim(), |
| | | phoneNumber: form1.phoneNumber?.trim(), |
| | | address: form1.address?.trim(), |
| | | idList: form1.areaId.map(v => v[v.length - 1]).concat(otherIdList.value), |
| | | urole: form1.urole, |
| | | }; |
| | | |
| | | // 编辑用户时, 区域中不在管理员管理内的区域要挑出来 最后更新时再追加进去 |
| | |
| | | realName: form1.realName.trim(), |
| | | phoneNumber: form1.phoneNumber?.trim(), |
| | | address: form1.address?.trim(), |
| | | idList: form1.areaId.map(v => v[v.length - 1]), |
| | | urole: form1.urole, |
| | | }; |
| | | console.log("params", params, "============="); |
| | | |
| | |
| | | }); |
| | | } |
| | | |
| | | async function getAreaTree() { |
| | | try { |
| | | const res = await getAreaTreeApi(); |
| | | let _data = []; |
| | | if (res.code === 1 && res.data) { |
| | | _data = res.data2; |
| | | } |
| | | const treeList = []; |
| | | let ids = _data.map((v) => v.id); |
| | | for (let i = 0; i < _data.length; i++) { |
| | | formatAreaTree(_data[i], ids, treeList); |
| | | } |
| | | // console.log(_data, 'data'); |
| | | console.log(treeList, 'treeList'); |
| | | areaList.value = treeList; |
| | | formatAreaSelected(treeList); |
| | | } catch (e) { |
| | | console.log(e); |
| | | } |
| | | } |
| | | |
| | | // 区域树 根节点 |
| | | // const areaRoots = computed(() => { |
| | | // if (!areaList.value) { |
| | | // return []; |
| | | // } else { |
| | | // return areaList.value.map(v => v.id); |
| | | // } |
| | | // }); |
| | | |
| | | function formatAreaSelected(treeList) { |
| | | let roots = treeList.map(v => v.id); |
| | | let otherAreas = form1.areaId.filter(v => !v.some((vv) => roots.includes(vv))); |
| | | let otherIds = otherAreas.map(v => v[v.length - 1]); |
| | | |
| | | otherIdList.value = otherIds; |
| | | |
| | | form1.areaId = form1.areaId.filter(v => v.some((vv) => roots.includes(vv))).map(v => { |
| | | let idx = 0; |
| | | for (let i = 0; i < roots.length; i++) { |
| | | if (v.includes(roots[i])) { |
| | | idx = v.indexOf(roots[i]); |
| | | break; |
| | | } |
| | | } |
| | | |
| | | return v.slice(idx); |
| | | }); |
| | | console.log('form1.areaId', form1.areaId, '============='); |
| | | |
| | | } |
| | | |
| | | function handleChange(value) { |
| | | let oldV = value.slice(0, value.length - 1); |
| | | let newV = value[value.length - 1]; |
| | | console.log('value', value, '=============', oldV, newV); |
| | | |
| | | // 检查新选中的项是否与已选中的项有包含关系 |
| | | const hasInclusion = checkInclusion(newV, oldV); |
| | | if (hasInclusion) { |
| | | // 弹出对话框询问用户是否取消之前的项 |
| | | $message.error('取消之前的项(新选中的项与已选中的项存在包含关系)'); |
| | | form1.areaId = value.slice(0, value.length - 1); |
| | | // $confirm('取消之前的项(新选中的项与已选中的项存在包含关系)', () => { |
| | | // form1.areaId = value; |
| | | // }); |
| | | } |
| | | }; |
| | | |
| | | function checkInclusion(newValue, oldValue) { |
| | | // 遍历新选中的项 |
| | | for (let j = 0; j < oldValue.length; j++) { |
| | | const oldItem = oldValue[j]; |
| | | if (isIncluded(newValue, oldItem) || isIncluded(oldItem, newValue)) { |
| | | return true; |
| | | } |
| | | } |
| | | return false; |
| | | }; |
| | | |
| | | function isIncluded(item1, item2) { |
| | | // 新元素是一个选项 取数组的最后一个元素 |
| | | const id = item1[item1.length - 1]; |
| | | return item2.includes(id); |
| | | }; |
| | | |
| | | onMounted(() => { |
| | | let info = props.info; |
| | |
| | | form1.realName = info.realName; |
| | | form1.phoneNumber = info.phoneNumber; |
| | | form1.address = info.address; |
| | | form1.areaId = info.areaId; |
| | | form1.urole = info.urole; |
| | | } |
| | | getAreaTree(); |
| | | }); |
| | | </script> |
| | | |
| | |
| | | </el-form-item> |
| | | <el-form-item label="手机号" prop="phoneNumber"> |
| | | <el-input v-model="form1.phoneNumber"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="所属区域" prop="areaId"> |
| | | <el-cascader class="select" filterable clearable v-model="form1.areaId" :props="props1" @change="handleChange" |
| | | :options="areaList"><template #default="{ node, data }"> |
| | | <span>{{ data.label }}</span> |
| | | <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span> |
| | | </template></el-cascader> |
| | | </el-form-item> |
| | | <el-form-item label="所属角色" prop="urole"> |
| | | <el-select v-model="form1.urole"> |
| | | <el-option label="普通用户" :value="0" /> |
| | | <el-option label="区域管理员" :value="1" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="通讯地址" prop="address"> |
| | | <el-input v-model="form1.address"></el-input> |