fix:新增系统管理

quanyawei

2023-09-25 06614321a4cd48bc26d1d1a7dad13da093e37ee4

fix:新增系统管理

 src/locales/zh_CN.ts

@@ -91,6 +91,7 @@
    'menu.list.searchtable': '查询表格',

    'menu.list.role': '角色配置',

    'menu.list.menu': '菜单配置',

    'menu.list.unit': '系统管理',

    'menu.list.devicesBasic': '设备配置',

    'menu.list.devicesVersion': '型号配置',

    'menu.list.devicesMonitorPoint': '监测站点管理',


 src/route/authority.router.ts

@@ -30,7 +30,18 @@
        routerGuard: true,

        i18n:`menu.list.menu`

      },

    }],

  };

    },

    {

      path: 'unit',

      name: '/authority/unit',

      component: () => import('@/views/list/Unit.vue'),

      meta: {

        title: '系统管理',

        routerGuard: true,

        i18n:`menu.list.unit`

      },

    }

  ],

};



export default router;


 src/views/list/Unit.vue

New file
@@ -0,0 +1,538 @@
<template>
  <div class="mainContent">
    <a-card :bordered="false" style="margin-top: 24px">
      <a-form layout="inline">
        <a-form-item label="名称:">
          <a-input v-model="serch.name" style="width: 200px" />
        </a-form-item>
        <a-form-item label="上级区域:">
          <a-cascader
            placeholder="请选择"
            labelInValue
            v-model="serch.parentCode"
            style="width: 200px"
            :options="parentListOptions"
            @change="positionLevel"
          />
        </a-form-item>
        <a-form-item label="所属区域:">
          <a-select
            ref="select"
            v-model="serch.areaCode"
            style="width: 200px"
            placeholder="请选择"
          >
            <a-select-option
              v-for="(item, index) in areaCodeList"
              :key="index"
              :value="item.areaCode"
            >
              {{ item.areaName }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" html-type="submit" @click="handleSearch">
            查询
          </a-button>
          <a-button type="primary" @click="() => this.handleModalVisible(true)">
            新建
          </a-button>
        </a-form-item>
      </a-form>
      <div style="margin-top: 24px">
        <av-standard-table
          :dataSource="dataSource"
          :selectedRows="selectedRows"
          :columns="columns"
          :loading="tableLoading"
          :paginationProps="pagination"
          @tableChange="handlerTableChange"
        ></av-standard-table>
      </div>
    </a-card>
    <a-modal
      :title="title"
      destroyOnClose
      :visible.sync="visibleCreateModal"
      @cancel="handleCreateModalCancel"
    >
      <!---->
      <a-form-model
        style="margin-top: 8px"
        :model="editForm"
        :rules="rules"
        ref="ruleForm"
      >
        <a-form-model-item v-bind="formLayout" prop="unitName" label="名称">
          <a-input
            placeholder="请输入"
            type="string"
            v-model="editForm.unitName"
            :disabled="pageState === 'view'"
          />
        </a-form-model-item>
        <a-form-model-item
          v-bind="formLayout"
          label="上级编码"
          prop="parentCode"
        >
          <a-cascader
            v-model="editForm.parentCode"
            placeholder="请选择"
            :options="newParentListOptions"
            @change="positionLevel"
            :disabled="pageState === 'view'"
          />
        </a-form-model-item>
        <a-form-model-item v-bind="formLayout" prop="areaCode" label="行政区划">
          <a-select
            ref="select"
            placeholder="请选择"
            v-model="editForm.areaCode"
            :disabled="pageState === 'view'"
          >
            <a-select-option
              :value="item.areaCode"
              v-for="item in newAreaCodeList"
            >
              {{ item.areaName }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item v-bind="formLayout" label="是否生效" prop="state">
          <a-radio-group
            name="radioGroup"
            v-model="editForm.state"
            :disabled="pageState === 'view'"
          >
            <a-radio value="0">是</a-radio>
            <a-radio value="1">否</a-radio>
          </a-radio-group>
        </a-form-model-item>
      </a-form-model>
      <template slot="footer">
        <a-button key="cancel" @click="handleCreateModalCancel">
          取消
        </a-button>
        <a-button
          key="forward"
          type="primary"
          v-if="pageState === 'add' || pageState === 'edit'"
          @click="handleCreateModalOk"
        >
          提交
        </a-button>
      </template>
    </a-modal>
    <a-modal
      title="作废"
      destroyOnClose
      :visible="visibleInvalidityModal"
      @ok="handleInvalidityModalOk"
      @cancel="handleInvalidityModalCancel"
    >
      <!---->
      <a-form
        style="margin-top: 8px"
        :autoFormCreate="
          (form) => {
            this.createForm = form;
          }
        "
      >
        <a-form-item
          :labelCol="{ span: 5 }"
          :wrapperCol="{ span: 15 }"
          label="理由"
          fieldDecoratorId="code"
          :fieldDecoratorOptions="{
            rules: [{ required: true, message: '请输入理由！' }],
          }"
        >
          <a-input placeholder="请输入" type="string" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="tsx">
import {
    Component,
    Prop,
    Vue,
    Model,
    Watch,
} from 'vue-property-decorator';
import moment from 'moment';
import { get, post } from "@/util/request";
import * as _ from 'lodash';
@Component({
  components: {
  },
})
export default class QueryList extends Vue {
 //规则定义
  private rules: any = {
    unitName:[
      { required: true, message: '名称不能为空', trigger: 'blur' },
      { message: '名称字数不能超过20个！', max: 19 },
    ],
    parentCode:[{ required: true, message: '请选择！' }],
    areaCode:[{ required: true, message: '请选择！' }],
    state:[{ required: true, message: '请选择！' }]
  }
    private formLayout = {
      labelCol: {
        span: 5,
      },
      wrapperCol: {
        span: 15,
      },
    };
    private serch:any = {
        name:'',
        parentCode: [],
        areaCode:''
    }
    private editForm: any = {
        unitName:'',
        parentCode: [],
        areaCode:'',
        state:Number,
    }

  private pagination:any={
    total:0,
    current:1,
    pageSize:5,
    showSizeChanger: false,
    showQuickJumper: false,
  };

    @Watch('serch.name')
    private watchsearchInform(newVal:string,oldval:string){
      if (newVal !== '' && oldval === '') {
        this.pagination.current = 1
      }
        this.handleSearch()
    }

    private expandForm: boolean = false;

    private selectedRows: any[] = [];
    
    private parentListOptions: any[] = [];
    private newParentListOptions: any[] = [];

    private tableLoading: boolean = false;
    private visibleInvalidityModal: boolean = false;

    private moment: any = moment;
    private pageState: String = 'add';

    private dataSource: any[] = [];
    
    private areaCodeList: any[] = [];
    
    private newAreaCodeList: any[] = [];

    private visibleCreateModal: boolean = false;

  private createForm: any = null;
    
    private title: any = null;

    private columns: any[] = [{
            title: '名称',
            dataIndex: 'unitName',
        },
        {
            title: '上级区域',
            dataIndex: 'parentName',
        },
        {
            title: '所属区域',
            dataIndex: 'areaName',
        },
        {
            title: '操作时间',
            dataIndex: 'updateTime',
        },
        {
            title: '操作人',
            dataIndex: 'createName',
        },
        {
            title: '状态',
            dataIndex: 'state',
            customRender: this.progressStateRender,
        },
        {
            title: '操作',
            customRender: this.opRender,
        },
    ];


    private handleModalVisible(isVisible: boolean): void {
      this.visibleCreateModal = isVisible;
      this.pageState='add'
      this.title='新建责任单位'
    }

  private handleSearch(): void {
    console.log(this.serch)
       const data = this.serch.parentCode
        let code =data[data.length-1]
        get("unit/selectUint",{
            name:this.serch.name,
            parentCode:code,
            parentCodeList:this.serch.parentCode,
            areaCode:this.serch.areaCode,
            current: this.pagination.current,
            page:1,
            size: 20
        }).then(res=>{
          this.dataSource =res.data.data.item
        })
        .catch(err=>{
            console.log(err);
        })
    }

    private handlerTableChange(pagination: any, filter: any, sorter: any): void {
      this.pagination.current = pagination.current
      this.pagination.total = pagination.total
      this.handleSearch()
    }

  private handleCreateModalOk() {
    let api ='unit/insert'
    if (this.pageState === 'edit') {
      api='unit/update'
    }
    this.$refs.ruleForm.validate((valid: any) => {
      console.log(valid);
      if (valid) {
        const data = this.editForm.parentCode
        let code =data[data.length-1]
        console.log(this.editForm);
        // 插入角色
        post(api, {
            unitId: this.editForm.unitId,
            unitName:this.editForm.unitName,
            parentCode: code,
            parentCodeList:this.editForm.parentCode,
            areaCode: this.editForm.areaCode,
            state:this.editForm.state
        }).then((res: any) => {
           this.handleSearch()
          this.visibleCreateModal = false
          this.editForm = {
            unitName:'',
            parentCode: [],
            areaCode:'',
            state: Number,
            parentCodeList:[]
          }
        }).catch((err)=>{
            console.log(err);
        })
      } else {
        console.log('error submit!!');
        return false;
      }
    });

      console.log('editForm',this.editForm)
    }

    private handleCreateModalCancel(): any {
        this.visibleCreateModal = false;
    }
    private handleInvalidityModalCancel(): any {
        this.visibleInvalidityModal = false;
    }

    private cityData() {
        get("system/area/queryCity",{
          
        }).then(res => {
          console.log('00000000000000', res);
          let org = res.data.data;
          let lists = JSON.stringify(org);

          lists = lists.replace(/"areaCode"/g, '"value"');

          lists = lists.replace(/"areaName"/g, '"label"');

          const treeLists = JSON.parse(lists)
          this.parentListOptions = JSON.parse(JSON.stringify(treeLists))
          this.newParentListOptions = JSON.parse(JSON.stringify(treeLists))
        })
        .catch(err=>{
            console.log(err);
        })
    }

  private positionLevel(val: any) {
    this.serch.areaCode = ''
    this.editForm.areaCode = ''
     let code =val[val.length-1]
        get("system/area/code",{
          code:code
        }).then(res => {
          console.log('00000000000000', res);
          this.areaCodeList= res.data.data;
          this.newAreaCodeList= res.data.data;
        })
        .catch(err=>{
            console.log(err);
        })
    }

    private mounted() {
        this.handleSearch();
        this.cityData()
    }

    private updatedAtRender(text: string) {
        return <span> {
            moment(text).format('YYYY-MM-DD HH:mm:ss')
        } </span>;
    }

    private handleAssert(record: any){
       get("unit/state",{
         id: record.unitId,
          
        }).then(res => {
          <a-alert message="生效成功" type="success" />
        })
        .catch(err=>{
            console.log(err);
        })
    }
    private recordTableData: any = null;
    private handleInvalidity(record: any) {
      this.visibleInvalidityModal = true
       this.recordTableData=record
    }
  
  private handleInvalidityModalOk(record: any) {
       this.createForm.validateFields((err: any, fieldsValue: any) => {
            if (err) {
                return;
            }
            get("unit/invalid",{
              unitId: this.recordTableData.unitId,
              invalidReason:this.createForm.getFieldValue('code')
            }).then(res => { 
              <a-alert message="已作废" type="success" />
              this.visibleInvalidityModal=false
            })
            .catch(err=>{
                console.log(err);
            })
        });
  }
    
    private progressStateRender(text: string) {
        if (text === 0) {
            return <a-badge status = 'success' text = '生效' />;
        }
        return <a-badge status = 'processing' text = '未生效' />;
  }
    
    private handleUpdateModalVisible(visible: boolean, record: any): void {
      this.visibleCreateModal = true;
      this.positionLevel(record.parentCodeList)
      this.title = '编辑责任单位'
      let params = _.cloneDeep(record)
      console.log(params)
      params.parentCode=record.parentCodeList
      this.editForm = params 
      this.pageState='edit'
      console.log('editForm',record)
    }
    private handleDetailModalVisible(visible: boolean, record: any): void {
      this.visibleCreateModal = true;
      this.title = '责任单位详情'
      this.editForm = record 
      this.pageState='view'
    }
  private opRender(text: string, record: any, index: number) {
    // 生效console
    console.log('1111',text)
    console.log('2222',record)
    console.log('333', index)
      if (record.state==='1') { 
        if (record.isInvalid ===0) {
       return   <div>
            <a onClick = {
                () => this.handleUpdateModalVisible(true, record)
            } > 编辑 </a>
          <a-divider type='vertical' />
              <a onClick = {
                () => this.handleDetailModalVisible(true, record)
            } > 详情 </a>
            <a-divider type = 'vertical'  / >
            <a v-show="record.state !=='1'" onClick={ () => this.handleAssert(record)
              } >生效</a>
            <a-divider type = 'vertical' />
            <a v-show="record.isInvalid !=='0'" onClick = {
                () => this.handleInvalidity(record)
            } >作废</a>
            </div>
        } else {
           return   <div>
            <a onClick = {
                () => this.handleUpdateModalVisible(true, record)
            } > 编辑 </a>
          <a-divider type='vertical' />
              <a onClick = {
                () => this.handleDetailModalVisible(true, record)
            } > 详情 </a>
            <a-divider type = 'vertical'  / >
            <a v-show="record.state !=='1'" onClick={ () => this.handleAssert(record)
              } >生效</a>
           
            </div>
        }
      } else {
          if (record.isInvalid ===0) {
       return   <div>
            <a onClick = {
                () => this.handleUpdateModalVisible(true, record)
            } > 编辑 </a>
          <a-divider type='vertical' />
              <a onClick = {
                () => this.handleDetailModalVisible(true, record)
            } > 详情 </a>
            <a-divider type = 'vertical' />
            <a v-show="record.isInvalid !=='0'" onClick = {
                () => this.handleInvalidity(record)
            } >作废</a>
            </div>
        } else {
           return   <div>
            <a onClick = {
                () => this.handleUpdateModalVisible(true, record)
            } > 编辑 </a>
          <a-divider type='vertical' />
              <a onClick = {
                () => this.handleDetailModalVisible(true, record)
            } > 详情 </a>
            <a-divider type = 'vertical'  / >
            </div>
        }
      }
    }

}
</script>

<style lang="less" scoped>
</style>

 src/views/passport/login/successLoginRoutee.ts

@@ -63,6 +63,15 @@
        routerGuard: true,

    },

}

const unit = {

    path: 'unit',

    name: '/authority/unit',

    component: () => import(/* webpackChunkName: "list" */ '@/views/list/Unit.vue'),

    meta: {

        title: '系统管理',

        routerGuard: true

    },

}



const webMenu = {

    path: 'wMenu',

@@ -167,6 +176,7 @@
    log: logmanage,

    dictionary: dictionaryManage,

    role: role,

    unit: unit,

    menuq: menu,

    wMenu: webMenu,

    sensor: sensor,