spfm-market-front/src/pages/main/gridDivision/approvalExamination.vue

<template>
  <div class="simple-container approvalExamination-container">
    <simple-form
      :form="table_form"
      :handle="table_handle"
      @search="handleSearch"
      @track="handleQueryTrack"
      @batch="handleBatch"
      @turn="handleReturn"
    >
    </simple-form>
    <simple-table
      :list="table_list"
      :config="table_config"
      :loading="table_loading"
      :handle-row="table_handle_row"
      @download="handleDownload"
      @selection="handleSelect"
      @back="handleBack"
    ></simple-table>
    <simple-pagination
      :page="page"
      :total="total"
      @change="handleChange"
    ></simple-pagination>
    <simple-dialog
      title="审批"
      width="40%"
      @cancel="handleVisible('opinion')"
      :visible="opinion_visible"
    >
      <el-form label-width="80px" :model="opinion_form" ref="opinion_ref">
        <el-form-item label="审批意见" prop="opinion">
          <el-input
            :rows="8"
            type="textarea"
            v-model="opinion_form.opinion"
          ></el-input>
        </el-form-item>
      </el-form>
      <template v-slot:footer>
        <div>
          <el-button v-if="!isAgree" @click="handleOpinion('1')" type="default"
            >退回修改</el-button
          >
          <el-button v-else @click="handleOpinion('0')" type="primary"
            >同意</el-button
          >
        </div>
      </template>
    </simple-dialog>
    <simple-dialog
      title="审批轨迹"
      :fullscreen="true"
      @cancel="handleVisible('track')"
      :visible="track_visible"
    >
      <simple-table
        :list="table_list_track"
        :config="table_config_track"
        :loading="table_loading_track"
      ></simple-table>
      <template v-slot:footer>
        <!-- <div>
          <el-button @click="handleVisible('track')" type="default"
            >退回修改</el-button
          >
          <el-button @click="handleConsent" type="primary">同意</el-button>
        </div> -->
        <el-button @click="handleConsent" type="primary">确定</el-button>
      </template>
    </simple-dialog>
  </div>
</template>

<script>
import simpleForm from "../performance/components/form.vue";
import simpleTable from "../performance/components/table.vue";
import simpleDialog from "../performance/components/dialog.vue";
import simplePagination from "../performance/components/pagination.vue";
export default {
  components: {
    simpleForm,
    simpleDialog,
    simpleTable,
    simplePagination,
  },
  data() {
    return {
      // 审批意见
      opinion_visible: false,
      track_visible: false,
      opinion_form: {},
      status: "",
      isAgree: false,
      // 单条审批id
      ids: "",
      parentId: "",
      adoptIds: [],
      page: 1,
      rows: 10,
      total: 0,
      table_form: [
        {
          label: "公司名称",
          props: "companyName",
          type: "input",
        },
        {
          label: "状态",
          props: "sts",
          type: "select",
          // 0.待办  1.已办
          dictionary: [
            {
              label: "待办",
              value: "0",
            },
            {
              label: "已办",
              value: "1",
            },
          ],
        },
      ],
      table_loading: false,
      table_handle: [
        {
          label: "返回",
          props: "turn",
        },
        {
          label: "审批轨迹",
          props: "track",
        },
        {
          label: "批量审批",
          props: "batch",
        },
      ],
      // 列表数据
      table_list: [],
      // 表头配置
      table_config: [
        {
          label: "序号",
          props: "No",
        },
        {
          label: "公司名称",
          props: "companyName",
        },
        {
          label: "提出人",
          props: "proposer",
        },
        {
          label: "联系电话",
          props: "telephone",
        },
        {
          label: "网格划分需求",
          props: "wanggeText",
        },
        {
          label: "附件",
          props: "fileNames",
          type: "file",
        },
        {
          label: "状态",
          props: "sts",
          type: "dictionary",
          dictionary: { 0: "待办", 1: "已办" },
        },
      ],
      //   表格里的操作按钮
      table_handle_row: [
        {
          label: "不通过",
          props: "back",
          visible: { sts: [0] },
        },
        {},
        {},
      ],
      table_loading_track: false,
      // 审批轨迹内表数据
      table_list_track: [],
      // 审批轨迹内表头配置
      table_config_track: [
        {
          label: "编号",
          props: "No",
        },
        {
          label: "流程环节",
          props: "taskName",
        },
        {
          label: "处理人",
          props: "opName",
        },
        {
          label: "处理工号",
          props: "opNo",
        },
        {
          label: "处理时间",
          props: "opTime",
        },
        {
          label: "审批意见",
          props: "remark",
          // type: "dictionary",
          // dictionary: { 0: "同意", 1: "不同意" },
        },
      ],
    };
  },
  watch: {
    parentId() {
      this.status = this.$route.query.status;
      this.handleInit();
    },
  },
  created() {
    this.parentId = this.$route.query.parentId;
  },
  methods: {
    // 表格数据初始化
    handleInit() {
      this.table_loading = true;
      let reqdata = {
        ...this.table_search,
        type: "2",
        page: this.page,
        parentId: this.parentId,
        pageSize: this.rows,
      };
      this.$http({
        url: "/market/mkWangge/queryPage",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: reqdata,
      }).then(({ data: { count, data } }) => {
        this.table_loading = false;
        this.total = count;
        this.table_list = data
          ? data.map((element, index) => ({
              ...element,
              No: index + 1,
              sts: Number(this.status),
            }))
          : [];
        this.table_list && this.table_list[0].sts === 0
          ? (this.table_handle = [
              {
                label: "返回",
                props: "turn",
              },
              {
                label: "审批轨迹",
                props: "track",
              },
              {
                label: "批量审批",
                props: "batch",
              },
            ])
          : (this.table_handle = [
              {
                label: "返回",
                props: "turn",
              },
              {
                label: "审批轨迹",
                props: "track",
              },
            ]);
        data.forEach((item) => {
          this.adoptIds.push(item.id.toString());
        });
        // console.log(this.table_list,'table_list');
        // console.log(this.adoptIds);
      });
    },
    // 搜索事件
    handleSearch(data) {
      this.table_search = data;
      this.page = 1;
      this.handleInit();
    },
    // 翻页
    handleChange(page) {
      this.page = page;
      this.handleInit();
    },
    handleDownload(data) {
      console.log(data, "data");
    },
    handleVisible(props) {
      switch (props) {
        case "opinion":
          this.opinion_visible = !this.opinion_visible;
          this.isAgree = false;
          this.opinion_form = {};
          break;
        case "track":
          this.track_visible = !this.track_visible;
          break;
        case "batch":
          this.opinion_visible = !this.opinion_visible;
          this.isAgree = true;
          break;
      }
    },
    // 查询审批轨迹
    handleQueryTrack() {
      // let type = this.parentId === null ? "1" : "0";
      this.$http({
        url: "/market/mkWangge/getMkWanggeById",
        method: "get",
        headers: {
          "Content-Type": "application/json",
        },
        params: {
          id: this.parentId,
          type: 0,
        },
      }).then(({ data }) => {
        let body = data.body;
        console.log(body, "body");
        // this.ids = [body.id.toString()];
        this.table_list_track = body.bpmTaskList.map((item, index) => ({
          ...item,
          No: index + 1,
        }));
      });
      this.handleVisible("track");
    },
    // 批量审批
    handleBatch() {
      this.handleVisible("batch");
    },
    handleSelect(val) {
      console.log(val);
    },
    // 审批不通过
    handleBack(row) {
      // console.log(row);
      this.ids = row.id.toString();
      this.handleVisible("opinion");
      this.isAgree = false;
    },
    // 审批意见提交
    handleOpinion(type) {
      let reqdata = {};
      if (type === "1") {
        // 批量退回
        reqdata = {
          parentId: this.parentId,
          mkWanggeList: [
            {
              id: this.ids,
              remark: this.opinion_form.opinion,
            },
          ],
        };
        console.log(reqdata);
        this.$http({
          url: "/market/mkWangge/backList",
          method: "post",
          headers: {
            "Content-Type": "application/json",
          },
          data: {
            ...reqdata,
          },
        }).then((res) => {
          console.log(res);
          this.handleInit();
        });
      } else {
        // 批量审批(多条)
        reqdata = {
          adoptIds: this.adoptIds,
          remark: this.opinion_form.opinion,
          parentId: this.parentId,
          type: type,
        };
        console.log(reqdata);
        this.$http({
          url: "/market/mkWangge/reviewMore",
          method: "post",
          headers: {
            "Content-Type": "application/json",
          },
          data: {
            ...reqdata,
          },
        }).then((res) => {
          console.log(res);
          this.status = 1;
          this.handleInit();
        });
      }

      this.handleVisible("opinion");
    },
    handleReturn() {
      this.$router.go(-1);
    },
    // 审批轨迹--确定关闭模态框
    handleConsent() {
      this.handleVisible("track");
    },
  },
};
</script>

<style lang="scss" scoped>
.approvalExamination-container {
  background: #ffffff;
  padding: 0 20px;
  padding-top: 20px;
  margin: 15px;
  overflow: auto;
  width: calc(100% - 30px);
  max-width: calc(100% - 30px);
  height: 100%;
  overflow-x: hidden;
}
::v-deep .el-row {
  padding-bottom: 12px;
}
</style>