公司详情关联出资人和管理人，派遣管理关联各小区自己的派遣记录

liuyg

2021-07-09 192010c64e8c3ff3418f27c906e499ccdad1bbad

 src/views/securityUnit/index.vue

@@ -1,134 +1,98 @@
<template>
  <div class="dispatch">
    <avue-tabs :option="optionTABS" @change="handleChangeTABS"></avue-tabs>
    <span v-if="typeTABS.prop === 'tab1'">
      <avue-crud
        :option="option"
        :data="data"
        :page.sync="page"
        ref="crudrec"
        @on-load="onLoad"
        :table-loading="loading"
        @row-save="rowSave"
        @search-change="searchChange"
        @search-reset="searchReset"
        @row-update="rowUpdate"
        @row-del="rowDel"
        @selection-change="selectionChange"
        @refresh-change="refreshChange"
      >
        <template slot="menuLeft">
          <el-button
            type="danger"
            size="small"
            plain
            icon="el-icon-delete"
            @click="handleDelete"
            >删 除
          </el-button>
        </template>
      </avue-crud>
    </span>
    <span v-else-if="typeTABS.prop === 'tab2'">
      <avue-crud
        :option="option1"
        :data="data1"
        :page.sync="page1"
        ref="crudrec1"
        @on-load="onLoad1"
        :table-loading="loading1"
        @row-save="rowSave1"
        @search-change="searchChange1"
        @search-reset="searchReset1"
        @row-update="rowUpdate1"
        @row-del="rowDel1"
        @selection-change="selectionChange1"
        @refresh-change="refreshChange1"
      >
        <template slot="menuLeft">
          <el-button
            type="danger"
            size="small"
            plain
            icon="el-icon-delete"
            @click="handleDelete1"
            >删 除
          </el-button>
        </template>
      </avue-crud>
    </span>
    <span v-else-if="typeTABS.prop === 'tab3'">
      <avue-crud
        :option="option2"
        :data="data2"
        :page.sync="page2"
        ref="crudrec2"
        @on-load="onLoad2"
        :table-loading="loading2"
        @row-save="rowSave2"
        @search-change="searchChange2"
        @search-reset="searchReset2"
        @row-update="rowUpdate2"
        @row-del="rowDel2"
        @selection-change="selectionChange2"
        @refresh-change="refreshChange2"
      >
        <template slot="menuLeft">
          <el-button
            type="danger"
            size="small"
            plain
            icon="el-icon-delete"
            @click="handleDelete2"
            >删 除
          </el-button>
        </template>
      </avue-crud>
    </span>
  <div class="securityUnit">
    <avue-crud
      :option="option"
      :data="data"
      :page.sync="page"
      ref="crudrec"
      @on-load="onLoad"
      :table-loading="loading"
      @row-save="rowSave"
      @search-change="searchChange"
      @search-reset="searchReset"
      @row-update="rowUpdate"
      @row-del="rowDel"
      @selection-change="selectionChange"
      @refresh-change="refreshChange"
      @row-click="rowClick"
    >
      <template slot="menuLeft">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="small"
          plain
          @click.stop="rowSave"
          >新增</el-button
        >
      </template>
      <template slot="menuLeft">
        <el-button
          type="danger"
          size="small"
          plain
          icon="el-icon-delete"
          @click="handleDelete"
          >删 除
        </el-button>
      </template>
    </avue-crud>
    <div class="lod" v-show="forms != -1">
      <div class="lod-in">
        <avue-form
          ref="form"
          v-model="obj0"
          :option="option0"
          v-if="forms == 0"
        >
          <template slot="menuForm">
            <el-button type="primary" @click="tip0">下一页</el-button>
            <el-button type="info" @click="tipover">取消</el-button>
          </template>
        </avue-form>
        <avue-form
          ref="form"
          v-model="obj1"
          :option="option1"
          v-else-if="forms == 1"
        >
          <template slot="menuForm">
            <el-button type="primary" @click="tip1up1">上一页</el-button>
            <el-button type="primary" @click="tip1">下一页</el-button>
            <el-button type="info" @click="tipover">取消</el-button>
          </template>
        </avue-form>
        <avue-form
          ref="form"
          v-model="obj2"
          :option="option2"
          v-else-if="forms == 2"
        >
          <template slot="menuForm">
            <el-button type="primary" @click="tip2up2">上一页</el-button>
            <el-button type="primary" @click="tip2">提交</el-button>
            <el-button type="info" @click="tipover">取消</el-button>
          </template>
        </avue-form>
      </div>
    </div>
  </div>
</template> 

<script>
import { data, column, column1, column2 } from "./data";
import { column, column0, column1, column2 } from "./data";
import {
  getdata,
  adddata,
  update,
  remove,
  getdata1,
  adddata1,
  update1,
  remove1,
  getdata2,
  adddata2,
  update2,
  remove2,
} from "@/api/securityUnit/securityUnit";

export default {
  data() {
    return {
      typeTABS: {}, //标签页
      optionTABS: {
        column: [
          {
            icon: "el-icon-info",
            label: "保安单位基本信息",
            prop: "tab1",
          },
          {
            icon: "el-icon-info",
            label: "保安单位出资人员登记",
            prop: "tab2",
          },
          {
            icon: "el-icon-info",
            label: "主要管理人员信息采集",
            prop: "tab3",
          },
        ],
      },

      loading: true, //保安单位基本信息
      selectionList: [],
      page: {
@@ -136,9 +100,44 @@
        currentPage: 1,
        total: 0,
      },

      obj0: {
        title: "保安单位基本信息",
      },
      option0: {
        emptyBtn: false,
        submitBtn: false,
        gutter: 30,
        column: column0,
      },
      obj1: {
        title: "保安单位出资人员",
      },
      option1: {
        emptyBtn: false,
        submitBtn: false,
        gutter: 30,
        column: column1,
      },
      obj2: {
        title: "主要管理人员信息",
      },
      option2: {
        emptyBtn: false,
        submitBtn: false,
        gutter: 30,
        column: column2,
      },

      forms: -1,
      data0: {},
      data1: {},
      data2: {},

      query: {},
      data: [],
      option: {
        addBtn: false,
        card: true,
        searchSize: "mini",
        searchMenuSpan: 6,
@@ -147,46 +146,6 @@
        align: "center",
        selection: true,
        column: column,
      },

      loading1: true, //派遣记录
      selectionList1: [],
      page1: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      query1: {},
      data1: [],
      option1: {
        card: true,
        searchSize: "mini",
        searchMenuSpan: 6,
        height: 547,
        menuWidth: 160,
        align: "center",
        selection: true,
        column: column1,
      },

      loading2: true, //派遣记录
      selectionList2: [],
      page2: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      query2: {},
      data2: [],
      option2: {
        card: true,
        searchSize: "mini",
        searchMenuSpan: 6,
        height: 547,
        menuWidth: 160,
        align: "center",
        selection: true,
        column: column2,
      },
    };
  },
@@ -212,25 +171,28 @@
      });
      return ids2.join(",");
    },
    haveID() {
      return this.obj0.creditcode;
    },
  },
  methods: {
    handleChangeTABS(column) {
      this.typeTABS = column;
      // this.$message.success(JSON.stringify(column));
      if (column.prop == "tab1") {
        this.loading1 = false;
        this.loading2 = false;
        this.onLoad(this.page);
      } else if (column.prop == "tab2") {
        this.loading = false;
        this.loading2 = false;
        this.onLoad1(this.page1); //第二个表格不会自动执行
      } else if (column.prop == "tab3") {
        this.loading1 = false;
        this.loading = false;
        this.onLoad2(this.page2); //第二个表格不会自动执行
      }
    },
    // handleChangeTABS(column) {
    //   this.typeTABS = column;
    //   // this.$message.success(JSON.stringify(column));
    //   if (column.prop == "tab1") {
    //     this.loading1 = false;
    //     this.loading2 = false;
    //     this.onLoad(this.page);
    //   } else if (column.prop == "tab2") {
    //     this.loading = false;
    //     this.loading2 = false;
    //     this.onLoad1(this.page1); //第二个表格不会自动执行
    //   } else if (column.prop == "tab3") {
    //     this.loading1 = false;
    //     this.loading = false;
    //     this.onLoad2(this.page2); //第二个表格不会自动执行
    //   }
    // },
    //保安单位基本信息
    sizeChange(val) {
      this.page1.currentPage = 1;
@@ -246,25 +208,8 @@
      //   this.$message.success("页码" + val);
    },
    rowSave(form, done, loading) {
      var that = this;
      //   var form = this.data[0];
      //   delete form.id;
      //   for (var k = 0; k < 13; k++) {
      adddata(form).then(
        (res) => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
        },
        (error) => {
          window.console.log(error);
          loading();
        }
      );
      //   }
      console.log("save1");
      this.forms = 0;
    },
    searchChange(params, done) {
      this.query = params;
@@ -278,6 +223,7 @@
    },
    rowUpdate(row, index, done, loading) {
      delete row.tenantid;
      delete row.regstsat;
      console.log(row, 0);
      update(row).then(
        () => {
@@ -301,7 +247,8 @@
        type: "warning",
      })
        .then(() => {
          return remove(row.id);
          console.log(row);
          return remove(row.creditcode);
        })
        .then(() => {
          this.onLoad(this.page);
@@ -339,6 +286,16 @@
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    rowClick(row) {
      console.log(row);
      row.identificationnumber; //统一社会信用代码
      this.$router.push({
        path: "/securityUnitChild",
        // redirect: { name: "foo" },
        query: { row: row },
        // params: { row: row.identificationnumber },
      });
    },
    onLoad(page, params = {}) {
      this.loading = true;
      getdata(
@@ -354,275 +311,80 @@
        this.loading = false;
      });
    },
    //保安单位基本信息

    //派遣记录
    sizeChange1(val) {
      this.page1.currentPage = 1;
      this.page1.pageSize = val;
      // this.getData();
      this.onLoad1(this.page1, this.query1);
      //   this.$message.success("行数" + val);
    },
    currentChange1(val) {
      this.page1.currentPage = val;
      // this.getData();
      this.onLoad1(this.page1, this.query1);
      //   this.$message.success("页码" + val);
    },
    rowSave1(form, done, loading) {
      var that = this;
      //   var form = this.data[0];
      //   delete form.id;
      //   for (var k = 0; k < 13; k++) {
      adddata1(form).then(
        (res) => {
          this.onLoad1(this.page1);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
        },
        (error) => {
          window.console.log(error);
          loading();
    tip0() {
      var b = {};
      for (var k in this.obj0) {
        if (k != "title") {
          b[k] = this.obj0[k];
        }
      );
      //   }
    },
    searchChange1(params, done) {
      this.query1 = params;
      this.page1.currentPage = 1;
      this.onLoad1(this.page1, params);
      done();
    },
    searchReset1() {
      this.query = {};
      this.onLoad1(this.page1);
    },
    rowUpdate1(row, index, done, loading) {
      delete row.shareholdingratio;
      delete row.tenantId;
      console.log(row);
      update1(row).then(
        () => {
          this.onLoad1(this.page1);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
        },
        (error) => {
          window.console.log(error);
          loading();
        }
      );
    },
    rowDel1(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return remove1(row.id);
        })
        .then(() => {
          this.onLoad1(this.page1);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
        });
    },
    selectionChange1(list) {
      this.selectionList1 = list;
    },
    handleDelete1() {
      if (this.selectionList1.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return remove1(this.ids1);
        })
        .then(() => {
          this.onLoad1(this.page1);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          this.$refs.crudrec1.toggleSelection();
        });
      this.data0 = b;
      this.forms = 1;
    },
    refreshChange1() {
      this.onLoad1(this.page1, this.query1);
    },

    //
    onLoad1(page, params = {}) {
      this.loading1 = true;
      // console.log(page);
      getdata1(
        page.currentPage,
        page.pageSize,
        Object.assign(params, this.query)
      ).then((res) => {
        // console.log(res);
        const data = res.data.data;
        this.page1.total = data.total;
        this.data1 = data.records;
        console.log(this.data1);
        this.loading1 = false;
      });
    },
    //派遣记录

    //派遣记录
    sizeChange2(val) {
      this.page2.currentPage = 1;
      this.page2.pageSize = val;
      // this.getData();
      this.onLoad2(this.page2, this.query2);
      //   this.$message.success("行数" + val);
    },
    currentChange2(val) {
      this.page2.currentPage = val;
      // this.getData();
      this.onLoad2(this.page2, this.query2);
      //   this.$message.success("页码" + val);
    },
    rowSave2(form, done, loading) {
      var that = this;
      //   var form = this.data[0];
      //   delete form.id;
      //   for (var k = 0; k < 13; k++) {
      adddata2(form).then(
        (res) => {
          this.onLoad2(this.page1);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
        },
        (error) => {
          window.console.log(error);
          loading();
    tip1() {
      var b = {};
      for (var k in this.obj1) {
        if (k != "title") {
          b[k] = this.obj1[k];
        }
      );
      //   }
    },
    searchChange2(params, done) {
      this.query2 = params;
      this.page2.currentPage = 1;
      this.onLoad2(this.page2, params);
      done();
    },
    searchReset2() {
      this.query = {};
      this.onLoad2(this.page2);
    },
    rowUpdate2(row, index, done, loading) {
      console.log(row);
      update2(row).then(
        () => {
          this.onLoad2(this.page2);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
        },
        (error) => {
          window.console.log(error);
          loading();
        }
      );
    },
    rowDel2(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return remove2(row.id);
        })
        .then(() => {
          this.onLoad2(this.page1);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
        });
    },
    selectionChange2(list) {
      this.selectionList2 = list;
    },
    handleDelete2() {
      if (this.selectionList2.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return remove2(this.ids2);
        })
        .then(() => {
          this.onLoad2(this.page2);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          this.$refs.crudrec2.toggleSelection();
        });
      this.data1 = b;
      this.forms = 2;
    },
    refreshChange2() {
      this.onLoad2(this.page2, this.query2);
    },

    //
    onLoad2(page, params = {}) {
      this.loading2 = true;
      console.log(page);
      getdata2(
        page.currentPage,
        page.pageSize,
        Object.assign(params, this.query)
      ).then((res) => {
        // console.log(res);
        const data = res.data.data;
        this.page2.total = data.total;
        this.data2 = data.records;
        console.log(this.data2);
        this.loading2 = false;
    tip2() {
      var b = {};
      for (var k in this.obj2) {
        if (k != "title") {
          b[k] = this.obj2[k];
        }
      }
      this.data2 = b;
      adddata(this.data0).then((res) => {
        console.log(res, 0);
      });
      adddata1(this.data1).then((res) => {
        console.log(res, 1);
      });
      adddata2(this.data2).then((res) => {
        console.log(res, 2);
      });
      this.onLoad(this.page, this.query);
      console.log(this.data0, this.data1, this.data2);
      this.tipover();
    },
    //派遣记录
    tip1up1() {
      this.forms = 0;
    },
    tip1up2() {
      this.forms = 1;
    },
    tipover() {
      this.forms = -1;
      this.obj0 = {
        title: "保安单位基本信息",
      };
      this.obj0 = {
        title: "保安单位出资人员",
      };
      this.obj2 = {
        title: "主要管理人员信息",
      };
      this.data0 = {};
      this.data1 = {};
      this.data2 = {};
    },
  },
  mounted() {
    // this.Ourdata = data;
    // this.onLoad1(this.page1); //第二个表格不会自动执行
    // this.onLoad2(this.page2); //第三个表格不会自动执行
    this.typeTABS = this.optionTABS.column[0];
  watch: {
    haveID() {
      // console.log(this.haveID);
    },
  },
  mounted() {},
};
</script>

<style lang="scss">
.dispatch {
.securityUnit {
  width: 100%;
  height: 100%;
  //   border: 1px solid #000;
@@ -636,4 +398,23 @@
.el-tag--light {
  padding: 0 !important;
}

.lod {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba($color: #000000, $alpha: 0.5);
  padding: 100px 0 0 0;
  z-index: 10000 !important;
  display: flex;
  // align-items: center;
  justify-content: center;
  .lod-in {
    width: 80%;
    height: auto;
    // padding: 10px 0 0 0;
  }
}
</style>