cmanager/src/views/manage/group/Dialog/cmpList.vue

<template>
  <el-drawer
    title="集团管理"
    size="60%"
    :visible.sync="visible"
    append-to-body
    @close="drawerClose"
  >
    <avue-crud
      :option="option"
      :data="data"
      :page="page"
      v-model="form"
      @row-update="rowUpdate"
      @row-save="rowSave"
      @row-del="rowDel"
      @current-change="currentChange"
      @size-change="sizeChange"
      @selection-change="selectionChange"
      @search-change="searchChange"
      @search-reset="searchReset"
      @refresh-change="refreshChange"
    >
      <template slot="areaForm" slot-scope="{ disabled }">
        <jl-city-cascader
          :disabled="disabled"
          v-model="form.area"
        ></jl-city-cascader>
      </template>
      <template slot="mainId" slot-scope="{ row }">
        <span v-if="row.platformNo == mainId">主ID</span>
        <!--当mainId==集团id时，为主id-->
        <span v-else>副ID</span>
      </template>
      <template slot="menuLeft">
        <el-button @click="handleAddCmp" type="primary" size="small">
          添加企业
        </el-button>
      </template>
      <template slot="menu" slot-scope="{ row }">
        <el-button
          v-if="row.platformNo != mainId"
          @click="setMainID(row.platformNo)"
          type="text"
          size="small"
        >
          设为主ID
        </el-button>
        <el-button
          @click="removeCompany(row.platformNo)"
          type="text"
          size="small"
        >
          移除
        </el-button>
      </template>
      <template slot="cityId" slot-scope="{ row }">
        <span
          >{{ cityId(row.cityId)[0] }}/{{ cityId(row.cityId)[1] }}/{{
            cityId(row.cityId)[2]
          }}</span
        >
      </template>
    </avue-crud>
    <div class="demo-drawer__footer">
      <el-button type="primary" @click="submit" size="small" :loading="loading"
        >提交</el-button
      >
      <el-button @click="reset" size="small">重置</el-button>
    </div>
    <add-company
      ref="addCmp"
      @success="success"
      :parentData="data"
    ></add-company>
  </el-drawer>
</template>
<script>
import {
  getCompanysList,
  setGroupMainId,
  removeRelations,
} from "@/api/manage/group";
import addCompany from "./addCompany";
export default {
  components: {
    addCompany,
  },
  data() {
    return {
      visible: false,
      data: [],
      selectionList: [],
      query: {},
      form: {},
      groupId: null, //集团id
      plateformId: null, //集团的plateformId
      groupName: "", //集团名称
      mainId: null, //集团主ID
      option: {
        border: true,
        index: true,
        indexLabel: "序号",
        labelWidth: 100,
        selection: false,
        align: "center",
        editBtn: false,
        delBtn: false,
        addBtn: false,
        column: [
          {
            label: "公司ID",
            prop: "platformNo",
            display: false,
          },
          {
            label: "企业名称",
            prop: "name",
            searchSpan: 12,
            rules: [
              {
                required: true,
                message: "请输入企业名称",
                trigger: "blur",
              },
            ],
          },
          {
            label: "地区",
            prop: "cityId",
            display: false,
            slot: true,
          },
          {
            label: "主副ID",
            prop: "mainId",
            slot: true,
          },
        ],
      },
      page: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  methods: {
    currentChange(current) {
      this.page.currentPage = current;
      this.onLoad(this.page);
    },
    sizeChange(size) {
      this.page.pageSize = size;
      this.onLoad(this.page);
    },
    
    refreshChange() {
      this.onLoad(this.page);
      
    },
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    searchReset1() {
      this.query = {};
      this.onLoad(this.page);
    },
    searchChange1() {
      this.page.currentPage = 1;
      this.onLoad(this.page, this.query);
    },

    show(groupId, plateformId, name, mainId) {
      this.visible = true;
      this.groupId = groupId;
      this.plateformId = plateformId;
      this.groupName = name;
      this.mainId = mainId;
      this.onLoad(this.page);
    },
    cityId(cid) {
      const result = ["", "", ""];
      if (cid) {
        const city = this.$store.getters.getAreaParents(cid);
        for (let i = 0; i < city.length; i++) {
          const element = city[i];
          result[i] = element.label;
        }
      }
      return result;
    },
    submit() {
      this.visible = false;
      this.$emit("success");
    },
    drawerClose() {
      this.visible = false;
      this.$emit("success");
    },
    /*添加企业*/
    handleAddCmp() {
      this.$refs.addCmp.show(this.plateformId, this.groupName);
    },
    /*移除企业*/
    removeCompany(companyId) {
      if (companyId == this.mainId) {
        this.$message.closeAll();
        this.$message.error("主ID企业不能移除");
      } else {
        removeRelations(companyId, this.plateformId).then(() => {
          this.$message.closeAll();
          this.$message.success("移除成功");
          this.onLoad(this.page);
        });
      }
    },
    /*重置--批量移除企业*/
    reset() {
      //当列表中有主id企业时，要滤出来
      let cmpIds = [];
      if (this.data.length != 0) {
        this.data.forEach((element) => {
          if (element.platformNo != this.mainId) {
            cmpIds.push(element.platformNo);
          }
        });
        if (cmpIds.length == 0) {
          this.$message.closeAll();
          this.$message.error("主ID企业不能重置");
        } else {
          removeRelations(cmpIds.join(","), this.plateformId).then(() => {
            this.$message.success("重置成功");
            this.onLoad(this.page);
            this.page.total = 0;
          });
        }
      } else {
        this.$message.error("未添加企业，不能重置");
      }
    },
    setMainID(companyID) {
      setGroupMainId(this.groupId, companyID).then(() => {
        this.$message.success("设置成功");
        this.mainId = companyID; //主id修改成功后，把集团的主id修改为所选企业的platformNo
        this.onLoad(this.page);
      });
    },
    onLoad(page, params = {}) {
      getCompanysList(
        page.currentPage,
        page.pageSize,
        Object.assign(this.query, params),
        this.plateformId
      ).then((res) => {
        const data = res.data.data;
        this.data = data.records;
        this.page.total = data.total;
      });
    },
    success(){
      this.onLoad(this.page);
      if(this.data.length!=0 &&!this.mainId ){
        this.mainId=this.data[0]['platformNo'];
        return;
      }
    }
  },
};
</script>