分页修改

quanyawei

2024-01-25 a4831debee63c7071a261c5f6ecfa62fd535b2ab

 src/views/list/Unit.vue

@@ -159,31 +159,24 @@
</template>

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

  private pagination:any={
    total:0,
@@ -210,16 +203,16 @@
    pageSize:10,
    showSizeChanger: true,
    showQuickJumper: true,
    pageSizeOptions: ['10', '30', '60', '100'],
    pageSizeOptions: ["10", "30", "60", "100"],
    showTotal: (total:number) => `共有 ${this.pagination.total} 条数据`,  //分页中显示总的数据
  };

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

    private expandForm: boolean = false;
@@ -233,7 +226,7 @@
    private visibleInvalidityModal: boolean = false;

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

    private dataSource: any[] = [];
    
@@ -257,59 +250,58 @@
      width: 60,
    },
    {
      title: '名称',
      title: "名称",
             align: "center",
            dataIndex: 'unitName',
      dataIndex: "unitName",
        },
        {
          title: '上级区域',
      title: "上级区域",
             align: "center",
            dataIndex: 'parentName',
      dataIndex: "parentName",
        },
        {
          title: '所属区域',
      title: "所属区域",
             align: "center",
            dataIndex: 'areaName',
      dataIndex: "areaName",
        },
        {
            title: '操作时间',
            dataIndex: 'updateTime',
      title: "操作时间",
      dataIndex: "updateTime",
        },
        {
          title: '操作人',
      title: "操作人",
             align: "center",
            dataIndex: 'createName',
      dataIndex: "createName",
        },
        {
            title: '状态',
          dataIndex: 'state',
      title: "状态",
      dataIndex: "state",
             align: "center",
            customRender: this.progressStateRender,
    },
            {
            title: '是否作废',
          dataIndex: 'isInvalid',
      title: "是否作废",
      dataIndex: "isInvalid",
             align: "center",
            customRender: this.progressIsInvalidRender,
        },
        {
          title: '操作',
      title: "操作",
             align: "center",
            customRender: this.opRender,
        },
    ];


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

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

  private handlerTableChange(pagination: any, filter: any, sorter: any): void {
      console.log('pagination',pagination)
      this.pagination.current = pagination.current
      this.pagination.pageSize = pagination.pageSize
      this.pagination.total = pagination.total
      this.handleSearch()
    console.log("pagination", pagination);
    this.pagination.current = pagination.current;
    this.pagination.pageSize = pagination.pageSize;
    this.pagination.total = pagination.total;
    this.handleSearch();
    }

  private handleCreateModalOk() {
    let api ='unit/insert'
    if (this.pageState === 'edit') {
      api='unit/update'
    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]
        const data = this.editForm.parentCode;
        let code = data[data.length - 1];
        console.log(this.editForm);
        // 插入角色
        post(api, {
@@ -353,55 +346,56 @@
            parentCode: code,
            parentCodeList:this.editForm.parentCode,
            areaCode: this.editForm.areaCode,
            state:parseInt(this.editForm.state)
        }).then((res: any) => {
           this.handleSearch()
          this.visibleCreateModal = false
          this.editForm = {
            unitName:'',
            parentCode: [],
            areaCode:'',
            state: '0',
            parentCodeList:[]
          }
        }).catch((err)=>{
            console.log(err);
          state: parseInt(this.editForm.state),
        })
          .then((res: any) => {
            this.handleSearch();
            this.visibleCreateModal = false;
            this.editForm = {
              unitName: "",
              parentCode: [],
              areaCode: "",
              state: "0",
              parentCodeList: [],
            };
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        console.log('error submit!!');
        console.log("error submit!!");
        return false;
      }
    });

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

    private handleCreateModalCancel(): any {
      this.visibleCreateModal = false;
      this.editForm = {
        unitName:'',
      unitName: "",
        parentCode: [],
        areaCode:'',
        state: '0',
        parentCodeList:[]
      }
      areaCode: "",
      state: "0",
      parentCodeList: [],
    };
    }
  private handleInvalidityModalCancel(): any {
      this.editForm = {
        unitName:'',
      unitName: "",
        parentCode: [],
        areaCode:'',
        state: '0',
        parentCodeList:[]
      }
      areaCode: "",
      state: "0",
      parentCodeList: [],
    };
      this.visibleInvalidityModal = false;
    }

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

@@ -409,58 +403,57 @@

          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))
        const treeLists = JSON.parse(lists);
        this.parentListOptions = JSON.parse(JSON.stringify(treeLists));
        this.newParentListOptions = JSON.parse(JSON.stringify(treeLists));
        })
        .catch(err=>{
      .catch((err) => {
            console.log(err);
        })
      });
    }

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

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

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

    private handleAssert(record: any){
       get("unit/state",{
         unitId: record.unitId,
          
       }).then(res => {
           this.handleSearch()
           this.$message.success('操作成功')
        })
        .catch(err=>{
      .then((res) => {
        this.handleSearch();
        this.$message.success("操作成功");
      })
      .catch((err) => {
            console.log(err);
        })
      });
    }
    private recordTableData: any = null;
    private handleInvalidity(record: any) {
      this.visibleInvalidityModal = true
       this.recordTableData=record
    this.visibleInvalidityModal = true;
    this.recordTableData = record;
    }
  
  private handleInvalidityModalOk(record: any) {
@@ -470,89 +463,95 @@
            }
            get("unit/invalid",{
              unitId: this.recordTableData.unitId,
              invalidReason:this.createForm.getFieldValue('code')
            }).then(res => { 
              this.$message.success('操作成功')
              this.visibleInvalidityModal = false
              this.handleSearch()
        invalidReason: this.createForm.getFieldValue("code"),
            })
            .catch(err=>{
        .then((res) => {
          this.$message.success("操作成功");
          this.visibleInvalidityModal = false;
          this.handleSearch();
        })
        .catch((err) => {
                console.log(err);
            })
        });
        });
  }
    
  private progressIsInvalidRender(text: Number) {
        if (text === 0) {
            return <a-badge status = 'success' text = '未作废' />;
      return <a-badge status="success" text="未作废" />;
        }
        return <a-badge status = 'error' text = '已作废' />;
    return <a-badge status="error" text="已作废" />;
  }
  
  private progressStateRender(text: string) {
        if (text === '0') {
            return <a-badge status = 'success' text = '生效' />;
    if (text === "0") {
      return <a-badge status="success" text="生效" />;
        }
        return <a-badge status = 'processing' text = '未生效' />;
    return <a-badge status="processing" text="未生效" />;
  }
    private async handleUpdateModalVisible(visible: boolean, record: any): void {
      this.visibleCreateModal = true;
      await 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)
    await 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 async handleDetailModalVisible(visible: boolean, record: any): void {
      this.visibleCreateModal = true;
      await this.positionLevel(record.parentCodeList)
      this.title = '责任单位详情'
       let params = _.cloneDeep(record)
      console.log(params)
      params.parentCode=record.parentCodeList
      this.editForm = params 
      this.pageState='view'
    await this.positionLevel(record.parentCodeList);
    this.title = "责任单位详情";
    let params = _.cloneDeep(record);
    console.log(params);
    params.parentCode = record.parentCodeList;
    this.editForm = params;
    this.pageState = "view";
    }
  private opRender(text: string, record: any, index: number) {
    // 生效console
    console.log('record',record)
    if (record.state === '0') {
    console.log("record", record);
    if (record.state === "0") {
      if (Number(record.isInvalid) === 0) {
        return <div>
              <a onClick = {
                () => this.handleDetailModalVisible(true, record)
            } > 详情 </a>
            <a-divider type = 'vertical' />
            <a  onClick = {
                () => this.handleInvalidity(record)
            } >作废</a>
        return (
          <div>
            <a onClick={() => this.handleDetailModalVisible(true, record)}>
              {" "}
              详情{" "}
            </a>
            <a-divider type="vertical" />
            <a onClick={() => this.handleInvalidity(record)}>作废</a>
            </div>
        );
      } else {
         return <div>
              <a onClick = {
                () => this.handleDetailModalVisible(true, record)
            } > 详情 </a>
        return (
          <div>
            <a onClick={() => this.handleDetailModalVisible(true, record)}>
              {" "}
              详情{" "}
            </a>
            </div>
        );
      }
        } else {
           return   <div>
              <a onClick = {
                () => this.handleDetailModalVisible(true, record)
            } > 详情 </a>
            <a-divider type='vertical' />
             <a onClick = {
                () => this.handleUpdateModalVisible(true, record)
            } > 编辑 </a>
      return (
        <div>
          <a onClick={() => this.handleDetailModalVisible(true, record)}>
            {" "}
            详情{" "}
          </a>
          <a-divider type="vertical" />
          <a onClick={() => this.handleUpdateModalVisible(true, record)}>
            {" "}
            编辑{" "}
          </a>
            </div>
      );
        }
      this.handleSearch();
    }

}
</script>

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