| | |
| | | :default-expand-all="isExpandAll" |
| | | :tree-props="{children: 'children', hasChildren: 'hasChildren'}" |
| | | > |
| | | <el-table-column prop="deptName" label="组织架构名称" width="260"></el-table-column> |
| | | <el-table-column prop="orderNum" label="排序" width="200"></el-table-column> |
| | | <el-table-column prop="status" label="状态" width="100"> |
| | | <el-table-column prop="deptName" label="组织架构名称"></el-table-column> |
| | | <el-table-column prop="orderNum" label="排序" width="50"></el-table-column> |
| | | <el-table-column prop="status" label="状态" width="70"> |
| | | <template slot-scope="scope"> |
| | | <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="创建时间" align="center" prop="createTime" width="200"> |
| | | <el-table-column label="创建时间" align="center" prop="createTime" width="160"> |
| | | <template slot-scope="scope"> |
| | | <span>{{ parseTime(scope.row.createTime) }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="操作" align="center" class-name="small-padding fixed-width"> |
| | | <el-table-column label="操作" align="center" class-name="small-padding" width="160"> |
| | | <template slot-scope="scope"> |
| | | <el-button |
| | | size="mini" |
| | |
| | | <el-row> |
| | | <el-col :span="24" v-if="form.parentId !== 0"> |
| | | <el-form-item label="上级组织架构" prop="parentId"> |
| | | <treeselect v-model="form.parentId" :options="deptOptions" :normalizer="normalizer" placeholder="选择上级组织架构" /> |
| | | <treeselect v-model="form.parentId" :options="deptOptions" :normalizer="normalizer" placeholder="选择上级组织架构" @input="getDistrict"/> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | |
| | | <el-col :span="12"> |
| | | <el-form-item label="联系电话" prop="phone"> |
| | | <el-input v-model="form.phone" placeholder="请输入联系电话" maxlength="11" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="所辖行政区划" prop="districtCode"> |
| | | <el-select v-model="form.districtCode" placeholder="请选择" style="width: 100%;" :disabled="disableChange"> |
| | | <el-option |
| | | v-for="item in areaList" |
| | | :key="item.id" |
| | | :label="item.name" |
| | | :value="item.code"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | |
| | | import { listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild } from "@/api/system/dept"; |
| | | import Treeselect from "@riophae/vue-treeselect"; |
| | | import "@riophae/vue-treeselect/dist/vue-treeselect.css"; |
| | | import {getAreaList} from "@/api/coalMine/placeManage/train"; |
| | | |
| | | export default { |
| | | name: "Dept", |
| | |
| | | showSearch: true, |
| | | // 表格树数据 |
| | | deptList: [], |
| | | areaList: [], |
| | | // 部门树选项 |
| | | deptOptions: [], |
| | | // 弹出层标题 |
| | |
| | | }, |
| | | // 表单参数 |
| | | form: {}, |
| | | disableChange: false, |
| | | // 表单校验 |
| | | rules: { |
| | | parentId: [ |
| | |
| | | orderNum: [ |
| | | { required: true, message: "显示排序不能为空", trigger: "blur" } |
| | | ], |
| | | districtCode: [{ required: true, message: "所属地区不能为空", trigger: "blur" }], |
| | | email: [ |
| | | { |
| | | type: "email", |
| | |
| | | }, |
| | | created() { |
| | | this.getList(); |
| | | this.getArea() |
| | | }, |
| | | methods: { |
| | | /** 查询部门列表 */ |
| | |
| | | this.loading = false; |
| | | }); |
| | | }, |
| | | |
| | | async getArea() { |
| | | const res = await getAreaList(); |
| | | if(res.code == 200) { |
| | | this.areaList = res.data; |
| | | } |
| | | }, |
| | | |
| | | /** 转换部门数据结构 */ |
| | | normalizer(node) { |
| | | if (node.children && !node.children.length) { |
| | |
| | | leader: undefined, |
| | | phone: undefined, |
| | | email: undefined, |
| | | status: "0" |
| | | status: "0", |
| | | districtCode: undefined |
| | | }; |
| | | this.resetForm("form"); |
| | | }, |
| | |
| | | }, |
| | | /** 新增按钮操作 */ |
| | | handleAdd(row) { |
| | | console.log(row,'新增row') |
| | | this.reset(); |
| | | if(row.deptId || row.districtCode){ |
| | | if(row.districtCode && row.districtCode !== '65'){ |
| | | this.form.districtCode = row.districtCode |
| | | this.disableChange = true |
| | | }else{ |
| | | this.disableChange = false |
| | | } |
| | | }else{ |
| | | this.disableChange = false |
| | | } |
| | | if (row != undefined) { |
| | | this.form.parentId = row.deptId; |
| | | } |
| | |
| | | this.title = "添加组织架构"; |
| | | listDept().then(response => { |
| | | this.deptOptions = this.handleTree(response.data, "deptId"); |
| | | }); |
| | | }) |
| | | }, |
| | | changeDistrict(val){ |
| | | console.log(val,'val') |
| | | }, |
| | | /** 展开/折叠操作 */ |
| | | toggleExpandAll() { |
| | |
| | | this.reset(); |
| | | getDept(row.deptId).then(response => { |
| | | this.form = response.data; |
| | | console.log(this.form,'form') |
| | | this.open = true; |
| | | this.title = "修改组织架构"; |
| | | listDeptExcludeChild(row.deptId).then(response => { |
| | |
| | | this.getList(); |
| | | this.$modal.msgSuccess("删除成功"); |
| | | }).catch(() => {}); |
| | | }, |
| | | getDistrict(val){ |
| | | const t = this |
| | | t.form.districtCode = t.findCodeById(t.deptOptions,val) |
| | | if(t.form.districtCode == '65'){ |
| | | t.disableChange = false |
| | | }else{ |
| | | t.disableChange = true |
| | | } |
| | | }, |
| | | findCodeById(data,id){ |
| | | for(let node of data){ |
| | | if(node.deptId == id){ |
| | | return node.districtCode |
| | | } |
| | | if(node.children){ |
| | | const findNode = this.findCodeById(node.children,id) |
| | | if(findNode){ |
| | | return findNode |
| | | } |
| | | } |
| | | } |
| | | return null |
| | | } |
| | | } |
| | | }; |