| | |
| | | <template> |
| | | <div class="createUser"> |
| | | <div class="createUser" v-if="showFlag"> |
| | | <main> |
| | | <div class="mainContent"> |
| | | <el-form ref="user" label-width="140px" autoComplete="on" :model="store" :rules="createUserRules" |
| | | label-position="right"> |
| | | <!-- 店铺类型 --> |
| | | <el-form-item class="optionItem" label="店铺类型:" prop="storetype"> |
| | | <el-select v-model="store.storetype" placeholder="店铺/门店类型"> |
| | | <el-option v-for="item in shopTypeList" :key="item.name" :label="item.name" :value="item.value"> |
| | | <el-form-item class="optionItem" label="店铺类型:" prop="type"> |
| | | <el-select v-model="store.type" placeholder="请选择店铺类型"> |
| | | <el-option value="1"> |
| | | <el-tree ref="tree" :check-strictly="true" :data="shopTypeList" :props="defaultProps" |
| | | show-checkbox @check-change="handleCheck" :default-checked-keys="[selectOrg.orgsid[0]]" default-expand-all node-key="id"> |
| | | </el-tree> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | |
| | | </div> |
| | | </template> |
| | | <script> |
| | | import { getCodeList } from '@/utils/helper' |
| | | export default { |
| | | data() { |
| | | const validateNickname = (rule, value, callback) => { |
| | |
| | | ], |
| | | }, |
| | | shopTypeList: [ |
| | | { name: '类型1', value: 1 }, { name: '类型2', value: 2 } |
| | | |
| | | ], |
| | | defaultProps: { |
| | | children: 'children', |
| | | label: 'name', |
| | | }, |
| | | selectOrg: { |
| | | orgsid: [] |
| | | }, |
| | | showFlag:false |
| | | } |
| | | }, |
| | | created() { |
| | | const {userInfo} = this; |
| | | console.log(userInfo) |
| | | // console.log(userInfo) |
| | | this.store = userInfo |
| | | this.getShopTypeList(); |
| | | // console.log(this.store) |
| | | }, |
| | | methods: { |
| | | // 获取字典 |
| | | async getShopTypeList() { |
| | | let arr = await getCodeList('16'); |
| | | this.selectOrg.orgsid[0] = this.store.type |
| | | console.log(this.selectOrg.orgsid) |
| | | arr.forEach(item=>{ |
| | | item.id === this.store.type ? this.store.type = item.name : '暂无分类' |
| | | }) |
| | | this.showFlag = true |
| | | this.shopTypeList = this.createShopTypeTree(arr); |
| | | }, |
| | | createShopTypeTree(arr) { |
| | | if (arr.length && arr.length !== 0) { |
| | | // 获取顶级菜单 |
| | | let treeRoot = arr.filter(item => { |
| | | return item.parentId === 0 |
| | | }) |
| | | console.log(treeRoot); |
| | | // 添加child |
| | | treeRoot.forEach(item => { |
| | | item.children = [] |
| | | arr.forEach(child => { |
| | | if (child.parentId === item.id) { |
| | | item.children.push(child) |
| | | } |
| | | }) |
| | | }) |
| | | return treeRoot; |
| | | } |
| | | }, |
| | | handleCheck(data, checked) { |
| | | // console.log(data) |
| | | this.store.type = data.name; |
| | | // 获取当前选择的id在数组中的索引 |
| | | const indexs = this.selectOrg.orgsid.indexOf(data.id) |
| | | // 如果不存在数组中,并且数组中已经有一个id并且checked为true的时候,代表不能再次选择。 |
| | | if (indexs < 0 && this.selectOrg.orgsid.length === 1 && checked) { |
| | | this.$message({ |
| | | message: '只能选择一个部门!', |
| | | type: 'warning', |
| | | showClose: true |
| | | }) |
| | | // 设置已选择的节点为false 很重要 |
| | | this.$refs.tree.setChecked(data, false) |
| | | } else if (this.selectOrg.orgsid.length === 0 && checked) { |
| | | // 发现数组为空 并且是已选择 |
| | | // 防止数组有值,首先清空,再push |
| | | this.selectOrg.orgsid = [] |
| | | this.selectOrg.orgsid.push(data.id) |
| | | } else if ( |
| | | indexs >= 0 && |
| | | this.selectOrg.orgsid.length === 1 && |
| | | !checked |
| | | ) { |
| | | // 再次直接进行赋值为空操作 |
| | | this.selectOrg.orgsid = [] |
| | | this.store.storetype = '' |
| | | } |
| | | }, |
| | | handleUser() { |
| | | const { store } = this; |
| | | this.$refs.user.validate((valid)=>{ |
| | |
| | | id:store.id, |
| | | storePhoto:store.storePhoto, |
| | | storeScore:store.storeScore, |
| | | type:this.selectOrg.orgsid[0] |
| | | } |
| | | }) |
| | | .then(res=>{ |