cnbg_web/src/views/admin/user/recordReview.vue

<template>
  <basic-container>
    <avue-crud
      ref="crud"
      :option="option"
      :page.sync="page"
      :search="searchForm"
      v-model="form"
      :data="list"
      :table-loading="tableLoading"
      @search-change="searchChange"
      @size-change="sizeChange"
      @current-change="currentChange"
      @search-reset="searchReset"
      @refresh-change="refreshChange"
    >
      <!-- 操作栏 -->
      <template slot="menu" slot-scope="scope">
        <el-button
          type="text"
          size="small"
          icon="el-icon-edit"
          @click="recordReviewFn(scope.row, scope.index)"
          >审核
        </el-button></template
      >
      <!-- 派工方搜索 -->
      <template slot="deptIdSearch">
        <el-select v-model="searchForm.deptId" clearable>
          <el-option
            v-for="item in deptLists"
            :key="item.deptId"
            :label="item.name"
            :value="item.deptId"
          >
          </el-option>
        </el-select>
      </template>
      <!-- 区域搜索 -->
      <template slot="areaCodesSearch">
        <el-cascader
          @change="searchFormAreaCodesChange"
          v-model="searchFormAreaCodes"
          :options="treeList"
          :key="cascaderKey"
          collapse-tags
          :props="searchCascaderProps"
          clearable
        ></el-cascader>
      </template>
      <!-- 角色 -->
      <template slot="role" slot-scope="scope">
        <span v-for="(role, index) in scope.row.roleList" :key="index">
          <el-tag>{{ role.roleName }} </el-tag>&nbsp;&nbsp;
        </span>
      </template>
    </avue-crud>
    <!-- 新增沟通专员 -->
    <communicationOfficerDialog
      @addSuccess="refreshChange"
      ref="communicationOfficerRef"
    />
  </basic-container>
</template>

<script>
import communicationOfficerDialog from "./components/communicationOfficerDialog.vue";
import { recordReviewTableOption } from "@/const/crud/admin/user";
import { fetchList } from "@/api/admin/user";
import { getAreaTreeApi } from "@/api/areaTree";

import { getListByDeptApi } from "@/api/admin/role";

export default {
  components: { communicationOfficerDialog },
  data() {
    return {
      form: {},
      searchFormAreaCodes: [],
      searchForm: {
        certType: "",
        areaCodes: []
      },
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20, // 每页显示多少条,
        isAsc: false // 是否倒序
      },
      option: recordReviewTableOption,
      tableLoading: false,
      list: [],
      deptLists: [],
      treeList: [],
      cascaderKey: 0,
      searchCascaderProps: {
        multiple: true,
        label: "name",
        value: "id"
      }
    };
  },
  created() {
    this.getList(this.page);
    this.getListByDept();
    this.getAreaTree();
  },
  methods: {
    async getAreaTree() {
      const res = await getAreaTreeApi();
      console.log("res", res);
      this.treeList = res.data.data;
    },
    async getListByDept() {
      const res = await getListByDeptApi();
      console.log("res getListByDeptApi", res);
      this.deptLists = res.data.data;
    },
    searchFormAreaCodesChange(e) {
      console.log("e", e);
    },
    // 获取列表
    async getList(page, params) {
      this.tableLoading = true;
      const obj = Object.assign(
        {
          current: page.currentPage,
          size: page.pageSize
        },
        params,
        this.searchForm
      );

      obj.role = obj.role ? [obj.role] : [5];

      const res = await fetchList(obj);
      res.data.data.records.forEach(item => {
        if (item.roleList.length) {
          item.role = item.roleList.map(iten => iten.roleId);
        }
      });
      const records = res.data.data.records;
      this.list = records;
      this.page.total = res.data.data.total;
      this.tableLoading = false;
    },
    recordReviewFn(row) {
      this.$refs.communicationOfficerRef.reviewFn(row);
      console.log("row", row);
    },
    extractLastElements(array) {
      // 创建一个新的空数组来存储结果
      let result = [];
      // 遍历输入的二维数组
      for (let i = 0; i < array.length; i++) {
        // 检查内部数组是否非空
        if (array[i].length > 0) {
          // 将内部数组的最后一个元素添加到结果数组中
          result.push(array[i][array[i].length - 1]);
        }
      }
      // 返回结果数组
      return result;
    },
    // 搜索
    searchChange(param, done) {
      this.searchForm = param;
      if (this.searchFormAreaCodes.length) {
        const codes = this.extractLastElements(this.searchFormAreaCodes);
        this.searchForm.areaCodes = codes;
      }
      this.page.currentPage = 1;
      this.getList(this.page, param);
      done();
    },
    // page修改
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
      this.getList(this.page);
    },
    currentChange(current) {
      this.page.currentPage = current;
      this.getList(this.page);
    },
    refreshChange() {
      this.getList(this.page);
    },
    searchReset() {
      // this.searchForm = {};
      ++this.cascaderKey;
      this.searchFormAreaCodes = [];
    }
  }
};
</script>

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