|
|
@@ -0,0 +1,307 @@
|
|
|
+<template>
|
|
|
+ <a-spin :spinning="confirmLoading">
|
|
|
+ <j-form-container :disabled="formDisabled">
|
|
|
+ <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="24">
|
|
|
+ <a-form-model-item label="用户名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="username">
|
|
|
+ <a-input v-model="model.username" placeholder="请输入用户名称" ></a-input>
|
|
|
+ </a-form-model-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="24">
|
|
|
+ <a-form-model-item label="描述" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark">
|
|
|
+ <a-input v-model="model.remark" placeholder="请输入描述" ></a-input>
|
|
|
+ </a-form-model-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="24">
|
|
|
+ <a-form-model-item label="是否为系统管理员" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="role">
|
|
|
+ <a-switch v-model="model.isSystem" checked-children="是" un-checked-children="否" @change="roleChange"/>
|
|
|
+ </a-form-model-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="24">
|
|
|
+ <a-form-model-item label="所拥有的权限" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="role">
|
|
|
+ <a-table
|
|
|
+ v-if="tpmTreeData && tpmTreeData.length"
|
|
|
+ ref="table"
|
|
|
+ size="middle"
|
|
|
+ :scroll="{x:true}"
|
|
|
+ bordered
|
|
|
+ rowKey="interlockSystemId"
|
|
|
+ :columns="columns"
|
|
|
+ :dataSource="tpmTreeData"
|
|
|
+ :loading="loading"
|
|
|
+ :pagination="false"
|
|
|
+ defaultExpandAllRows
|
|
|
+ class="interlock-user-limit"
|
|
|
+ >
|
|
|
+ <!-- class="j-table-force-nowrap" -->
|
|
|
+ <!-- @change="handleTableChange" -->
|
|
|
+ <span slot="manage" slot-scope="text, record">
|
|
|
+ <span v-if="record.interlockType === '0'">-</span>
|
|
|
+ <a-checkbox v-if="record.interlockType === '1'" v-model="record.manage" :disabled="model.isSystem"/>
|
|
|
+ </span>
|
|
|
+ <span slot="view" slot-scope="text, record">
|
|
|
+ <span v-if="record.interlockType === '0'">-</span>
|
|
|
+ <a-checkbox v-if="record.interlockType === '1'" v-model="record.view" :disabled="model.isSystem"/>
|
|
|
+ </span>
|
|
|
+ </a-table>
|
|
|
+ </a-form-model-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-form-model>
|
|
|
+ </j-form-container>
|
|
|
+ </a-spin>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+
|
|
|
+ import { httpAction, getAction } from '@/api/manage'
|
|
|
+ import { validateDuplicateValue } from '@/utils/util'
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: 'InterlockUserForm',
|
|
|
+ components: {
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ //表单禁用
|
|
|
+ disabled: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ required: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ model:{
|
|
|
+ },
|
|
|
+ labelCol: {
|
|
|
+ xs: { span: 24 },
|
|
|
+ sm: { span: 5 },
|
|
|
+ },
|
|
|
+ wrapperCol: {
|
|
|
+ xs: { span: 24 },
|
|
|
+ sm: { span: 16 },
|
|
|
+ },
|
|
|
+ confirmLoading: false,
|
|
|
+ validatorRules: {
|
|
|
+ username: [{
|
|
|
+ required: true, message: '请输入用户名称!',
|
|
|
+ }],
|
|
|
+ },
|
|
|
+ url: {
|
|
|
+ add: "/interlockUser/interlockUser/addUser",
|
|
|
+ edit: "/interlockUser/interlockUser/editUser",
|
|
|
+ queryById: "/interlockUser/interlockUser/queryUserById"
|
|
|
+ },
|
|
|
+ // 权限树-装置系统
|
|
|
+ loading: false,
|
|
|
+ tpmTreeData: [],
|
|
|
+ expandedRowKeys: [],
|
|
|
+ columns: [
|
|
|
+ {
|
|
|
+ title:'',
|
|
|
+ dataIndex: 'interlockName'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title:'管理',
|
|
|
+ align:"center",
|
|
|
+ dataIndex: 'manage',
|
|
|
+ width:147,
|
|
|
+ scopedSlots: { customRender: 'manage' },
|
|
|
+ customCell: (record, index)=>{ return this.customCell(record, index, 'manage')}
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title:'查看',
|
|
|
+ align:"center",
|
|
|
+ dataIndex: 'view',
|
|
|
+ width:147,
|
|
|
+ scopedSlots: { customRender: 'view' },
|
|
|
+ customCell: (record, index)=>{ return this.customCell(record, index, 'view')}
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ formDisabled(){
|
|
|
+ return this.disabled
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ //备份model原始值
|
|
|
+ this.modelDefault = JSON.parse(JSON.stringify(this.model));
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async add () {
|
|
|
+ this.confirmLoading = true
|
|
|
+ // var interlockOrgData = []
|
|
|
+ await getAction(`/base/interlockBase/list`).then(res=>{
|
|
|
+ // interlockOrgData = res
|
|
|
+ // if(res.success){
|
|
|
+ // }
|
|
|
+ var arr = res.map(item => {
|
|
|
+ var reValue = {}
|
|
|
+ reValue.interlockName = item.interlockName
|
|
|
+ reValue.interlockApparatusId = item.pid
|
|
|
+ reValue.interlockSystemId = item.id
|
|
|
+ reValue.interlockType = item.interlockType
|
|
|
+ reValue.limitType = ''
|
|
|
+ reValue.manage = false
|
|
|
+ reValue.view = false
|
|
|
+ return reValue
|
|
|
+ })
|
|
|
+ this.tpmTreeData = this.handleTree(arr, "interlockSystemId", "interlockApparatusId")
|
|
|
+ this.confirmLoading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ async edit (record) {
|
|
|
+ this.confirmLoading = true
|
|
|
+ var interlockOrgData = []
|
|
|
+ await getAction(`/base/interlockBase/list`).then(res=>{
|
|
|
+ interlockOrgData = res
|
|
|
+ // if(res.success){
|
|
|
+ // }
|
|
|
+ })
|
|
|
+ getAction(this.url.queryById, {id: record.id}).then(response => {
|
|
|
+ this.model = Object.assign({}, response.result);
|
|
|
+ this.model.isSystem = this.model.role === '0' ? true : false
|
|
|
+ console.log('model', this.model)
|
|
|
+ var systemLimitList = response.result.systemLimitList
|
|
|
+ // data.forEach(element => {
|
|
|
+ // var index = interlockOrgData.findIndex(item => element.interlockSystemId === item.id)
|
|
|
+ // if(index !== -1){
|
|
|
+ // // interlockOrgData[index].limitType = element.limitType
|
|
|
+ // interlockOrgData[index].manage = element.limitType==='0'?true:false
|
|
|
+ // interlockOrgData[index].view = element.limitType==='1'?true:false
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ var arr = interlockOrgData.map(ele => {
|
|
|
+ var value = systemLimitList.find(item => item.interlockSystemId === ele.id)
|
|
|
+ var reValue = {}
|
|
|
+ reValue.interlockName = ele.interlockName
|
|
|
+ reValue.interlockApparatusId = ele.pid
|
|
|
+ reValue.interlockSystemId = ele.id
|
|
|
+ reValue.interlockType = ele.interlockType
|
|
|
+ reValue.limitType = ''
|
|
|
+ reValue.manage = false
|
|
|
+ reValue.view = false
|
|
|
+ console.log(value)
|
|
|
+ if(this.model.role === '0'){
|
|
|
+ reValue.manage = true
|
|
|
+ }
|
|
|
+ if(this.model.role !== '0' && value){
|
|
|
+ reValue.id = value.id
|
|
|
+ reValue.limitType = value.limitType
|
|
|
+ reValue.manage = value.limitType === '0' ? true : false
|
|
|
+ reValue.view = value.limitType === '1' ? true : false
|
|
|
+ }
|
|
|
+ return reValue
|
|
|
+ })
|
|
|
+ // console.log(arr)
|
|
|
+ this.tpmTreeData = this.handleTree(arr, "interlockSystemId", "interlockApparatusId")
|
|
|
+ // console.log(this.tpmTreeData)
|
|
|
+ this.visible = true;
|
|
|
+ this.confirmLoading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 角色切换时
|
|
|
+ roleChange(e){
|
|
|
+ // this.$set(this.model, 'isSystem', e)
|
|
|
+ this.model = {...this.model}
|
|
|
+ if(e){
|
|
|
+ // 当前为管理员
|
|
|
+ for (let i = 0; i < this.tpmTreeData.length; i++) {
|
|
|
+ const element = this.tpmTreeData[i];
|
|
|
+ if(element.children && element.children.length > 0){
|
|
|
+ element.children.forEach(item => {
|
|
|
+ item.manage = true
|
|
|
+ item.view = false
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 当前为管理员
|
|
|
+ for (let i = 0; i < this.tpmTreeData.length; i++) {
|
|
|
+ const element = this.tpmTreeData[i];
|
|
|
+ if(element.children && element.children.length > 0){
|
|
|
+ element.children.forEach(item => {
|
|
|
+ item.manage = false
|
|
|
+ item.view = false
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ customCell(record, rowIndex, value){
|
|
|
+ return {
|
|
|
+ props: {
|
|
|
+ },
|
|
|
+ on: { // 事件
|
|
|
+ click: (event) => {
|
|
|
+ // console.log(record, rowIndex, value)
|
|
|
+ if(value === 'manage' && event.target.type === 'checkbox' && !record.manage){
|
|
|
+ record.view = false
|
|
|
+ }
|
|
|
+ if(value === 'view' && event.target.type === 'checkbox' && !record.view){
|
|
|
+ record.manage = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ submitForm () {
|
|
|
+ const that = this;
|
|
|
+ // 触发表单验证
|
|
|
+ this.$refs.form.validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ // console.log(this.tpmTreeData)
|
|
|
+ // 二维转一维
|
|
|
+ var arr = []
|
|
|
+ this.tpmTreeData.forEach(item => {
|
|
|
+ if(item.children){
|
|
|
+ arr.push(...item.children)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // console.log(arr)
|
|
|
+ this.model.systemLimitList = arr.map(item => {
|
|
|
+ if(item.manage){item.limitType = '0'}
|
|
|
+ if(item.view){item.limitType = '1'}
|
|
|
+ return item
|
|
|
+ })
|
|
|
+ this.model.role = this.model.isSystem ? '0' : '1'
|
|
|
+ // console.log(su)
|
|
|
+ that.confirmLoading = true;
|
|
|
+ let httpurl = '';
|
|
|
+ let method = '';
|
|
|
+ if(!this.model.id){
|
|
|
+ httpurl+=this.url.add;
|
|
|
+ method = 'post';
|
|
|
+ }else{
|
|
|
+ httpurl+=this.url.edit;
|
|
|
+ method = 'put';
|
|
|
+ }
|
|
|
+ httpAction(httpurl,this.model,method).then((res)=>{
|
|
|
+ if(res.success){
|
|
|
+ that.$message.success(res.message);
|
|
|
+ that.$emit('ok');
|
|
|
+ }else{
|
|
|
+ that.$message.warning(res.message);
|
|
|
+ }
|
|
|
+ }).finally(() => {
|
|
|
+ that.confirmLoading = false;
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style lang="less">
|
|
|
+ .interlock-user-limit{
|
|
|
+ tr{
|
|
|
+ td{
|
|
|
+ padding: 5px 8px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
yuhan