图表颜色

liuyg

2021-09-27 8c6cf205affbbc8ada74f00a7ca25ebca867e9ed

 src/views/securityUnitChild/index.vue

@@ -1,104 +1,175 @@
<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>-->
      <!-- 表单组件 -->
      <avue-form ref="form" v-model="obj0" :option="option0">
        <!-- <template slot-scope="scope" slot="menuForm">
          <el-button @click="tip">自定义按钮</el-button>
        </template> -->
      </avue-form>
    <span v-if="typeTABS.prop === 'tab1'" class="tab">
      <basic-container>
        <avue-form
          ref="form"
          v-model="obj0"
          :option="option0"
          @submit="submit0"
        >
        </avue-form>
      </basic-container>
    </span>
    <span v-else-if="typeTABS.prop === 'tab2'">
    <span v-if="typeTABS.prop === 'tab11'" class="tab">
      <basic-container>
        <avue-form
          ref="form"
          v-model="obj0"
          :option="option01"
          @submit="submit0"
        >
        </avue-form>
      </basic-container>
    </span>
    <span v-else-if="typeTABS.prop === 'tab2'" class="tab">
      <!-- <span v-if="typeTABS.prop === 'tab2'"> -->
      <avue-crud
        :option="option1"
        :data="data1"
        :page.sync="page1"
        ref="crudrec1"
        :table-loading="loading1"
        @row-save="rowSave1"
        @search-change="searchChange1"
        @search-reset="searchReset1"
        @row-update="rowUpdate1"
        @row-del="rowDel1"
        @selection-change="selectionChange1"
        @refresh-change="refreshChange1"
      <basic-container>
        <avue-crud
          :option="option1"
          :data="data1"
          :page.sync="page1"
          ref="crudrec1"
          :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>
            <el-button
              type="success"
              size="small"
              plain
              icon="el-icon-upload2"
              @click="handleImport"
              >批量导入
            </el-button>
          </template>
        </avue-crud>
      </basic-container>
    </span>
    <span v-else-if="typeTABS.prop === 'tab3'" class="tab">
      <basic-container>
        <avue-crud
          :option="option2"
          :data="data2"
          :page.sync="page2"
          ref="crudrec2"
          :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>
            <el-button
              type="success"
              size="small"
              plain
              icon="el-icon-upload2"
              @click="handleImport1"
              >批量导入
            </el-button>
          </template>
        </avue-crud>
      </basic-container>
    </span>
    <span v-else-if="typeTABS.prop === 'tab4'" class="tab">
      <!-- 装备管理 -->
      <equipments :fromDeptId="departmentid"></equipments>
    </span>
    <span v-else-if="typeTABS.prop === 'tab5'" class="tab">
      <!-- 车辆管理 -->
      <car :fromDeptId="departmentid"></car>
    </span>
    <!-- <span v-else-if="typeTABS.prop === 'tab6'" class="tab">
      枪支管理
      <gun :fromDeptId="departmentid"></gun>
    </span> -->
    <span v-else-if="typeTABS.prop === 'tab9'" class="tab">
      <!-- 社保记录  -->
      <social :deptid="obj0.departmentid"></social>
    </span>
    <span v-else-if="typeTABS.prop === 'tab7'" class="tab">
      <!-- 营业执照 -->
      <businessLicense :row="obj0"></businessLicense>
    </span>
    <span v-else-if="typeTABS.prop === 'tab8'" class="tab">
      <!-- 许可证  -->
      <licence :row="obj0"></licence>
    </span>

    <el-dialog
      title="出资人导入"
      append-to-body
      :visible.sync="excelBox"
      width="555px"
    >
      <avue-form
        :option="excelOption"
        v-model="excelForm"
        :upload-after="uploadAfter"
      >
        <template slot="menuLeft">
          <el-button
            type="danger"
            size="small"
            plain
            icon="el-icon-delete"
            @click="handleDelete1"
            >删 除
        <template slot="excelTemplate">
          <el-button type="primary" @click="handleTemplate">
            点击下载<i class="el-icon-download el-icon--right"></i>
          </el-button>
        </template>
      </avue-crud>
    </span>
    <span v-else-if="typeTABS.prop === 'tab3'">
      <avue-crud
        :option="option2"
        :data="data2"
        :page.sync="page2"
        ref="crudrec2"
        :table-loading="loading2"
        @row-save="rowSave2"
        @search-change="searchChange2"
        @search-reset="searchReset2"
        @row-update="rowUpdate2"
        @row-del="rowDel2"
        @selection-change="selectionChange2"
        @refresh-change="refreshChange2"
      </avue-form>
    </el-dialog>

    <el-dialog
      title="管理人导入"
      append-to-body
      :visible.sync="excelBox1"
      width="555px"
    >
      <avue-form
        :option="excelOption1"
        v-model="excelForm1"
        :upload-after="uploadAfter1"
      >
        <template slot="menuLeft">
          <el-button
            type="danger"
            size="small"
            plain
            icon="el-icon-delete"
            @click="handleDelete2"
            >删 除
        <template slot="excelTemplate">
          <el-button type="primary" @click="handleTemplate1">
            点击下载<i class="el-icon-download el-icon--right"></i>
          </el-button>
        </template>
      </avue-crud>
    </span>
      </avue-form>
    </el-dialog>
  </div>
</template> 

<script>
import { column, column1, column2 } from "./data";
import { column11, column, column1, column2 } from "./data";
import {
  getOncedata,
  // getdata,
  // adddata,
  // update,
  update,
  // remove,
  getdataOnce1,
  getdata1,
@@ -111,8 +182,24 @@
  update2,
  remove2,
} from "@/api/securityUnit/securityUnit";
import equipments from "../securityEquipment/equipments.vue";
import car from "../securityEquipment/car.vue";
import gun from "../securityEquipment/gun.vue";
import licence from "./licence.vue";
import businessLicense from "./businessLicense.vue";
import social from "./social.vue";
import { mapState } from "vuex";
import { getRoleDetail } from "@/api/system/role";

export default {
  components: {
    equipments: equipments,
    car: car,
    gun: gun,
    licence: licence,
    businessLicense: businessLicense,
    social: social,
  },
  data() {
    var DIC = {
      VAILD: [
@@ -137,6 +224,64 @@
      ],
    };
    return {
      departmentid: "",

      excelBox: false, //出资人
      excelForm: {},
      excelOption: {
        submitBtn: false,
        emptyBtn: false,
        column: [
          {
            label: "文件上传",
            prop: "excelFile",
            type: "upload",
            drag: true,
            loadText: "文件上传中，请稍等",
            span: 24,
            propsHttp: {
              res: "data",
            },
            tip: "请上传 .xls,.xlsx 标准格式文件",
            action: "/api/shareholder/import-share",
          },
          {
            label: "模板下载",
            prop: "excelTemplate",
            formslot: true,
            span: 24,
          },
        ],
      },

      excelBox1: false, //管理人
      excelForm1: {},
      excelOption1: {
        submitBtn: false,
        emptyBtn: false,
        column: [
          {
            label: "文件上传",
            prop: "excelFile",
            type: "upload",
            drag: true,
            loadText: "文件上传中，请稍等",
            span: 24,
            propsHttp: {
              res: "data",
            },
            tip: "请上传 .xls,.xlsx 标准格式文件",
            action: "/api/member/import-member",
          },
          {
            label: "模板下载",
            prop: "excelTemplate",
            formslot: true,
            span: 24,
          },
        ],
      },

      typeTABS: {}, //标签页
      optionTABS: {
        column: [
@@ -144,6 +289,11 @@
            // icon: "el-icon-info",
            label: "保安单位基本信息",
            prop: "tab1",
          },
          {
            // icon: "el-icon-info",
            label: "工商信息",
            prop: "tab11",
          },
          {
            // icon: "el-icon-info",
@@ -155,28 +305,38 @@
            label: "主要管理人员信息",
            prop: "tab3",
          },
          {
            // icon: "el-icon-info",
            label: "装备管理 ",
            prop: "tab4",
          },
          {
            // icon: "el-icon-info",
            label: "车辆管理 ",
            prop: "tab5",
          },
          // {
          //   // icon: "el-icon-info",
          //   label: "枪支管理 ",
          //   prop: "tab6",
          // },
          {
            // icon: "el-icon-info",
            label: "社保记录 ",
            prop: "tab9",
          },
          {
            // icon: "el-icon-info",
            label: "营业执照 ",
            prop: "tab7",
          },
          {
            // icon: "el-icon-info",
            label: "许可证 ",
            prop: "tab8",
          },
        ],
      },

      // loading: true, //保安单位基本信息
      // selectionList: [],
      // page: {
      //   pageSize: 10,
      //   currentPage: 1,
      //   total: 0,
      // },
      // query: {},
      // data: [],
      // option: {
      //   card: true,
      //   searchSize: "mini",
      //   searchMenuSpan: 6,
      //   height: 547,
      //   menuWidth: 160,
      //   align: "center",
      //   selection: true,
      //   column: column,
      // },

      //全局单位统一社会信用代码
      creditcode: "",
@@ -187,8 +347,17 @@
      option0: {
        emptyBtn: false,
        submitBtn: false,
        submitText: "保存",
        gutter: 30,
        column: column,
      },

      option01: {
        emptyBtn: false,
        submitBtn: false,
        submitText: "保存",
        gutter: 30,
        column: column11,
      },

      loading1: true, //派遣记录
@@ -236,6 +405,9 @@
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
    chuzitime() {
      return this.data1.capitaltime;
    },
@@ -262,6 +434,58 @@
    },
  },
  methods: {
    submit0(row, done, loading) {
      if (this.userInfo.role_name == "保安公司管理员") {
        row["departmentid"] = this.userInfo.dept_id;
      }
      console.log(row);
      update(row).then(
        () => {
          // this.onLoad(this.page);
          // this.onloads();
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          this.onloads();
          done();
        },
        (error) => {
          window.console.log(error);
          loading();
        }
      );

      done();
    },
    handleImport() {
      //出资人
      this.excelBox = true;
    },
    uploadAfter(res, done, loading, column) {
      window.console.log(column);
      this.excelBox = false;
      this.refreshChange1();
      done();
    },
    handleTemplate() {
      window.open(`/api/shareholder/export-template`);
    },

    handleImport1() {
      //管理人
      this.excelBox1 = true;
    },
    uploadAfter1(res, done, loading, column) {
      window.console.log(column);
      this.excelBox1 = false;
      this.refreshChange2();
      done();
    },
    handleTemplate1() {
      window.open(`/api/member/export-template`);
    },

    handleChangeTABS(column) {
      this.typeTABS = column;
      // this.$message.success(JSON.stringify(column));
@@ -279,130 +503,6 @@
        this.onLoad2(this.page2); //第二个表格不会自动执行
      }
    },
    // //保安单位基本信息  改成表单
    // sizeChange(val) {
    //   this.page1.currentPage = 1;
    //   this.page1.pageSize = val;
    //   // this.getData();
    //   this.onLoad(this.page, this.query);
    //   //   this.$message.success("行数" + val);
    // },
    // currentChange(val) {
    //   this.page1.currentPage = val;
    //   // this.getData();
    //   this.onLoad(this.page, this.query);
    //   //   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(
    //     () => {
    //       this.onLoad(this.page);
    //       this.$message({
    //         type: "success",
    //         message: "操作成功!",
    //       });
    //       done();
    //     },
    //     (error) => {
    //       window.console.log(error);
    //       loading();
    //     }
    //   );
    //   //   }
    // },
    // searchChange(params, done) {
    //   this.query = params;
    //   this.page.currentPage = 1;
    //   this.onLoad(this.page, params);
    //   done();
    // },
    // searchReset() {
    //   this.query = {};
    //   this.onLoad(this.page);
    // },
    // 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) {
@@ -686,50 +786,134 @@
    readLock(name) {
      return window.localStorage.getItem(name);
    },
    onloads() {
      var that = this;
      var doit = (a) => {
        that.typeTABS = that.optionTABS.column[0];
        var row = {};
        if (that.readLock("danweidata") != null) {
          row = JSON.parse(that.readLock("danweidata"));
          // that.obj0.title = row.enterprisename;
          console.log(row, "rowneibu");
          that.departmentid = row.departmentid;
          for (var k in row) {
            that.obj0[k] = row[k];
          }
          if (row.creditcode == "") {
            that.creditcode = 111;
          } else {
            that.creditcode = row.creditcode;
          }
          if (that.readLock("danweidataS") != null && a == 1) {
            var b = JSON.parse(that.readLock("danweidataS"));
            var i = 0;
            for (var k in b) {
              if (b[k].enterprisename == row.enterprisename) {
                i = 1;
              }
            }
            if (i == 1) {
              // console.log("存在");
            } else {
              // console.log("已删除");

              that.obj0 = {};
              that.obj0.enterprisename = row.enterprisename + "该公司已删除";
              window.localStorage.removeItem("danweidata");
              that.creditcode = "";
            }
          }
        } else {
          // console.log("no");
          that.obj0.enterprisename = "未选择查询单位";
        }
      };
      var flag = false,
        i = 0,
        ind = null;
      this.$store.state.tags.tagList.forEach((item, index) => {
        if (item.label == "保安单位详情") {
          if (flag == false) {
            ind = index;
            flag = true;
          }
          i++;
        }
      });
      if (i > 1) {
        this.$store.state.tags.tagList.splice(ind, 1);
      }

      var getdatas = (roleAlias) => {
        var fromSecunityGuardId = that.$route.query.fromSecunityGuardId;
        // var fromSecunityGuardId = that.$route.query;
        if (fromSecunityGuardId != undefined || roleAlias == "保安公司管理员") {
          var value = {
            departmentid: fromSecunityGuardId || that.userInfo.dept_id,
          };
          getOncedata(value).then((res) => {
            // console.log(res.data.data, "get");
            window.localStorage.setItem(
              "danweidata",
              JSON.stringify(res.data.data)
            );
            doit();
          });
          // return;
        } else {
          doit(1);
        }
      };

      // console.log(this.userInfo, "userInfo");
      //获取当前登录人员的角色信息
      var roleIds = this.userInfo.role_id.split(",");
      roleIds.forEach((roleId) => {
        getRoleDetail(roleId).then((res) => {
          var roleAlias = res.data.data.roleAlias;
          var d = that.option0.column;
          var e = that.option01.column;
          // console.log(roleAlias);
          if (roleAlias == "保安公司管理员") {
            that.option0.submitBtn = true;
            that.option01.submitBtn = true;
            for (var k in d) {
              // if (d[k].label != "企业类型") {
              d[k].disabled = false;
              // }
            }
            for (var n in e) {
              // if (d[k].label != "企业类型") {
              e[n].disabled = false;
              // }
            }
          } else {
            that.option0.submitBtn = false;
            that.option01.submitBtn = false;
            for (var k in d) {
              d[k].disabled = true;
            }
            for (var n in e) {
              e[n].disabled = true;
            }
          }
          getdatas(roleAlias);
        });
      });
    },
  },
  mounted() {
    this.typeTABS = this.optionTABS.column[0];
    var row = {};
    if (this.readLock("danweidata") != null) {
      row = JSON.parse(this.readLock("danweidata"));
      // this.obj0.title = row.enterprisename;
      for (var k in row) {
        this.obj0[k] = row[k];
      }
      this.creditcode = row.creditcode;
      if (this.readLock("danweidataS") != null) {
        var b = JSON.parse(this.readLock("danweidataS"));
        var i = 0;
        for (var k in b) {
          if (b[k].enterprisename == row.enterprisename) {
            i = 1;
          }
        }
        if (i == 1) {
          // console.log("存在");
        } else {
          // console.log("已删除");

          this.obj0 = {};
          this.obj0.enterprisename = row.enterprisename + "该公司已删除";
          window.localStorage.removeItem("danweidata");
          this.creditcode = "";
        }
      }
    } else {
      // console.log("no");
      this.obj0.enterprisename = "未选择查询单位";
    }
    this.onloads();
  },
  watch: {
    chuzitime() {
      // console.log(this.chuzitime, "chuzitime");
    },
    // chuzitime() {
    // console.log(this.chuzitime, "chuzitime");
    // },
  },
};
</script>

<style lang="scss">
<style lang="scss" scoped>
.dispatch {
  width: 100%;
  height: 100%;
@@ -748,4 +932,15 @@
.el-collapse-item {
  padding-top: 15px !important;
}

.tab {
  position: relative;
  // border: 1px solid red;
  background-color: #fff;
  height: 92%;
  display: inline-block;
  width: 100%;
  overflow: hidden;
  top: -10px;
}
</style>