保安单位 中的基本信息和出资人登记

liuyg

2021-07-07 b2922843fc3fafab8f1097a257f51f4a7f6b5665

 src/views/securityUnit/index.vue

@@ -1,118 +1,639 @@
<template>
  <div class="recruitmentManagement">
    <avue-crud
      :option="option"
      :data="data"
      :page.sync="page1"
      @size-change="sizeChange"
      @current-change="currentChange"
      @row-save="rowSave"
      @row-update="rowUpdate"
      @row-del="rowDel"
      @refresh-change="refresh"
    ></avue-crud>
  <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>
</template>
</template> 

<script>
import { data, column } from "./data";
import { data, column, 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 {
      Ourdata: "",
      page1: {
        currentPage: 1,
        total: 20,
        layout: "total,pager,prev, next",
        background: false,
        pageSize: 10,
      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: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      query: {},
      data: [],
      option: {
        card: true,
        searchSize: "mini",
        searchMenuSpan: 6,
        height: 545,
        height: 547,
        menuWidth: 160,
        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,
      },
    };
  },
  computed: {
    ids() {
      let ids = [];
      this.selectionList.forEach((ele) => {
        ids.push(ele.id);
      });
      return ids.join(",");
    },
    ids1() {
      let ids1 = [];
      this.selectionList1.forEach((ele) => {
        ids1.push(ele.id);
      });
      return ids1.join(",");
    },
    ids2() {
      let ids2 = [];
      this.selectionList2.forEach((ele) => {
        ids2.push(ele.id);
      });
      return ids2.join(",");
    },
  },
  methods: {
    getData() {
      this.page1.total = this.Ourdata.length;
      var maxi = +this.Ourdata.length / +this.page1.pageSize;
      var y = String(maxi).indexOf(".") + 1; //判断小数
      if (y != 0) {
        maxi++;
      }
      for (var i = 1; i <= maxi; i++) {
        if (this.page1.currentPage === i) {
          this.data = this.Ourdata.slice(
            (i - 1) * this.page1.pageSize,
            i * this.page1.pageSize
          );
        }
    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;
      this.page1.pageSize = val;
      this.getData();
      // this.getData();
      this.onLoad(this.page, this.query);
      //   this.$message.success("行数" + val);
    },
    currentChange(val) {
      this.page1.currentPage = val;
      this.getData();
      // this.getData();
      this.onLoad(this.page, this.query);
      //   this.$message.success("页码" + val);
    },
    rowSave(form, done, loading) {
      var that = this;
      this.$message.success("模拟网络请求");
      setTimeout(() => {
        this.$message.success("关闭按钮等待");
        loading();
      }, 1000);
      setTimeout(() => {
        this.$message.success("新增数据" + JSON.stringify(form));
        done();
        that.Ourdata.push(form);
        this.getData()
      }, 2000);
      //   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();
        }
      );
      //   }
    },
    refresh(val) {
      this.$message.success("刷新回调,当前分页对象" + JSON.stringify(val));
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    rowDel(form, index) {
      this.$message.success("删除数据" + JSON.stringify(form));
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    rowUpdate(form, index, done, loading) {
      this.$message.success("模拟网络请求");
      setTimeout(() => {
        this.$message.success("关闭按钮等待");
        loading();
      }, 1000);
      setTimeout(() => {
        this.$message.success(
          "编辑数据" + JSON.stringify(form) + "数据序号" + index
        );
        done(form);
      }, 2000);
    rowUpdate(row, index, done, loading) {
      delete row.tenantid;
      console.log(row, 0);
      update(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
        },
        (error) => {
          window.console.log(error);
          loading();
        }
      );
    },
    rowDel(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return remove(row.id);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
        });
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return remove(this.ids);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          this.$refs.crudrec.toggleSelection();
        });
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    onLoad(page, params = {}) {
      this.loading = true;
      getdata(
        page.currentPage,
        page.pageSize,
        Object.assign(params, this.query)
      ).then((res) => {
        // console.log(res);
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        console.log(this.data);
        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();
        }
      );
      //   }
    },
    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();
        });
    },
    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();
        }
      );
      //   }
    },
    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();
        });
    },
    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;
      });
    },
    //派遣记录
  },
  mounted() {
    this.Ourdata = data;
    this.getData();
    // this.Ourdata = data;
    // this.onLoad1(this.page1); //第二个表格不会自动执行
    // this.onLoad2(this.page2); //第三个表格不会自动执行
    this.typeTABS = this.optionTABS.column[0];
  },
};
</script>

<style lang="scss">
.recruitmentManagement {
.dispatch {
  width: 100%;
  height: 100%;
  //   border: 1px solid #000;
  box-sizing: border-box;
}
.el-card__body {
  padding-bottom: 5px !important;
}
.avue-crud__tip,
.el-tag,
.el-tag--light {
  padding: 0 !important;
}
</style>