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

<template>
  <div class="workersList-container">
    <simple-form
      :form="table_form"
      :handle="table_handle"
      @search="handleSearch"
      @summary="handleVisible('summary')"
      @add="handleVisible('add')"
    >
    </simple-form>
    <simple-table
      :list="table_list"
      :config="table_config"
      :loading="table_loading"
      :multiple="true"
      :handle-row="table_handle_row"
      @selection="handleSelect"
      @check="handleCheck"
      @edit="handleEdit"
      @approve="handleApprove"
    ></simple-table>
    <simple-pagination
      :page="page"
      :total="total"
      @change="handleChange"
    ></simple-pagination>
    <simple-dialog
      :title="title"
      :fullscreen="true"
      @cancel="handleVisible('add')"
      :visible="add_visible"
    >
      <el-form label-width="120px" :model="add_form" ref="add_ref">
        <el-form-item
          label="提出人"
          prop="proposer"
          :rules="{
            required: true,
            message: '提出人不能为空',
            trigger: 'blur',
          }"
        >
          <el-input v-model="add_form.proposer"></el-input>
        </el-form-item>
        <el-form-item
          label="联系电话"
          prop="telephone"
          :rules="{
            required: true,
            message: '联系电话不能为空',
            trigger: 'blur',
          }"
        >
          <el-input v-model="add_form.telephone"></el-input>
        </el-form-item>
        <el-form-item
          label="网格划分需求"
          prop="wanggeText"
          :rules="{
            required: true,
            message: '网格划分需求不能为空',
            trigger: 'blur',
          }"
        >
          <el-input type="textarea" v-model="add_form.wanggeText"></el-input>
        </el-form-item>
        <el-form-item label="附件上传" prop="file">
          <myUpload
            @uploadBack="uploadBack"
            :fileInfo="fileInfo"
            :fileList="fileInfo.fileList"
          ></myUpload>
        </el-form-item>
        <el-form-item label="审批轨迹" prop="" v-if="edit_visible">
          <simple-table
            :list="table_list_approve"
            :config="table_config_approve"
            :loading="table_loading_approve"
          ></simple-table>
        </el-form-item>
        <el-form-item
          label="审批意见"
          prop="desc"
          v-if="edit_visible && approve_visible"
        >
          <el-input type="textarea" v-model="add_form.remark"></el-input>
        </el-form-item>
      </el-form>
      <template v-slot:footer>
        <div v-if="title === '新建'">
          <el-button @click="handleSubmit('save')" type="primary"
            >保存</el-button
          >
          <el-button @click="handleSubmit('add')" type="primary"
            >提交</el-button
          >
          <el-button @click="handleVisible('add')" type="default"
            >取消</el-button
          >
        </div>
        <div v-else-if="title === '查看'">
          <div></div>
        </div>
        <div v-else-if="title === '发起人处理'">
          <el-button @click="handleSubmit('save')" type="primary"
            >保存</el-button
          >
          <el-button @click="handleSubmit('add')" type="primary">重新提交</el-button>
          <el-button @click="handleVisible('add')" type="default"
            >取消</el-button
          >
        </div>
        <div v-else>
          <el-button @click="handleSubmit('adopt')" type="primary"
            >保存</el-button
          >
          <el-button @click="handleSubmit('failed')" type="default"
            >退回修改</el-button
          >
        </div>
      </template>
    </simple-dialog>
    <simple-dialog
      title="工单汇总"
      width="40%"
      @cancel="handleVisible('summary')"
      @confirm="handleSummary"
      :visible="summary_visible"
    >
      <div class="summary">
        <p>是否要对所选工单进行汇总？</p>
        <p class="summary-tip">
          可对未审批的区县网格划分审批工单合并为同一条工单，由相关审批人员进行审批，减少审批工作量
        </p>
      </div>
    </simple-dialog>
  </div>
</template>

<script>
import myUpload from "../../../components/upload";
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,
    myUpload,
    simpleTable,
    simplePagination,
  },
  data() {
    return {
      fileInfo: {
        limit: 3,
        url: "mkWangge/upload",
        fileList: [],
      },
      attList: [],
      page: 1,
      rows: 10,
      total: 0,
      // 模态框标题
      title: "",
      // 是否为查看状态
      isCheck: false,
      // 汇总id列表
      summaryIds: [],
      table_search: {},
      // 新建模态框
      add_visible: false,
      summary_visible: false,
      edit_visible: false,
      approve_visible: false,
      ids: [],
      add_form: {},
      table_handle: [
        {
          label: "工单汇总",
          props: "summary",
        },
        {
          label: "新建",
          props: "add",
        },
      ],
      table_form: [
        {
          label: "公司名称",
          props: "companyName",
          type: "input",
        },
        {
          label: "状态",
          props: "approve",
          type: "select",
          // 0.待办  1.已办
          dictionary: [
            {
              label: "待办",
              value: "0",
            },
            {
              label: "已办",
              value: "1",
            },
          ],
        },
      ],
      // 列表数据
      table_list: [
        // {
        //   id: 1,
        //   companyName: "xq",
        //   proposer: "mll",
        //   createTime: 1654563154824,
        //   status: 0,
        // },
        // {
        //   id: 2,
        //   companyName: "xq",
        //   proposer: "mll",
        //   createTime: 1654963568455,
        //   status: 1,
        // },
      ],
      table_loading: false,
      //   表格里的操作按钮
      table_handle_row: [
        {
          label: "查看",
          props: "check",
        },
        {
          label: "编辑",
          props: "edit",
          visible: {
            draft: ["0"],
          },
        },
        {
          label: "处理",
          props: "approve",
          visible: {
            deal: ["1"],
          },
        },
      ],
      //  表头配置
      table_config: [
        {
          label: "序号",
          props: "id",
        },
        {
          label: "公司名称",
          props: "companyName",
        },
        {
          label: "发起人",
          props: "proposer",
        },
        {
          label: "发起时间",
          props: "createTime",
        },
        {
          label: "状态",
          props: "sts",
          type: "dictionary",
          dictionary: { 0: "待办", 1: "已办" },
        },
      ],
      // 模态框内表数据
      table_list_approve: [],
      table_loading_approve: false,
      // 模态框内表头配置
      table_config_approve: [
        {
          label: "编号",
          props: "number",
        },
        {
          label: "流程环节",
          props: "procName",
        },
        {
          label: "处理人",
          props: "opName",
        },
        {
          label: "处理工号",
          props: "opNo",
        },
        {
          label: "处理时间",
          props: "opTime",
          type: "date",
        },
        {
          label: "审批意见",
          props: "remark",
          // type: "dictionary",
          // dictionary: { 0: "同意", 1: "不同意" },
        },
      ],
    };
  },
  mounted() {
    this.handleInit();
  },
  methods: {
    // 表格数据初始化
    handleInit() {
      // this.table_loading = true;
      // console.log(data);
      let reqdata = {
        ...this.table_search,
        type: "1",
        page: this.page,
        pageSize: this.rows,
      };
      this.$http({
        url: "/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.map((element) => ({
          ...element,
          deal: element.draft === "1" && element.sts === "0" ? "1" : "0",
        }));
        console.log(this.table_list);
      });
    },
    // 搜索事件
    handleSearch(data) {
      this.table_search = data;
      this.page = 1;
      this.handleInit();
    },
    handleVisible(props) {
      this.approve_visible = false;
      switch (props) {
        case "add":
          this.add_visible = !this.add_visible;
          this.edit_visible = false;
          this.approve_visible = false;
          this.title = "新建";
          this.isCheck = false;
          this.add_form = {};
          break;
        case "summary":
          this.summary_visible = !this.summary_visible;
          break;

        case "edit":
          this.edit_visible = !this.edit_visible;
          this.add_visible = !this.add_visible;
          this.title = "发起人处理";
          this.isCheck = false;
          break;
        case "check":
          this.edit_visible = !this.edit_visible;
          this.add_visible = !this.add_visible;
          this.title = "查看";
          this.isCheck = true;
          break;
        case "approve":
          this.edit_visible = !this.edit_visible;
          this.add_visible = !this.add_visible;
          this.title = "审批";
          this.isCheck = false;
          this.approve_visible = !this.approve_visible;
          break;
      }
    },
    handleSelect(val) {
      this.summaryIds = val.map((item) => {
        return item.id.toString();
      });
      // console.log(this.summaryIds);
    },
    //文件返回值
    uploadBack(v) {
      console.log(v);
      this.attList = v;
    },
    // 获取模态框信息
    getDialogData(row) {
      let id = row.id;
      let type = row.parentId === null ? "1" : "0";
      this.$http({
        url: "/mkWangge/getMkWanggeById",
        method: "get",
        headers: {
          "Content-Type": "application/json",
        },
        params: {
          id,
          type,
        },
      }).then(({ data }) => {
        let body = data.body;
        console.log(body, "body");
        this.ids = [body.id.toString()];
        this.add_form = {
          id: body.id,
          proposer: body.proposer,
          telephone: body.telephone,
          wanggeText: body.wanggeText,
        };
        this.table_list_approve = body.bpmTaskList;
      });
    },
    // 查看按钮
    handleCheck(row) {
      if (row.parentLevel === "1") {
        this.$router.push({
          path: "/approvalExamination",
          query: row,
        });
      } else {
        this.getDialogData(row)
        this.handleVisible("check");
      }
    },
    // 编辑按钮
    handleEdit(row) {
      this.getDialogData(row)
      this.handleVisible("edit");
    },
    // 处理按钮
    handleApprove(row) {
      if (row.parentLevel === "1") {
        this.$router.push({
          path: "/approvalExamination",
          query: {
            parentId:row.id.toString(),
          },
        });
      } else {
        this.getDialogData(row)
        this.handleVisible("approve");
      }
    },
    handleSubmit(type) {
      // console.log(this.add_form);
      // let _this = this;
      let draft = "";
      if (type === "add") {
        draft = "1";
      } else if (type === "save") {
        draft = "0";
      }
      let isAdopt = "";
      if (type === "adopt") {
        isAdopt = "0";
      } else if (type === "failed") {
        isAdopt = "1";
      }
      this.$refs.add_ref.validate((valid) => {
        if (valid) {
          let reqdata = [
            {
              ...this.add_form,
              procId: "729294602773110788",
              draft: draft,
              num: "1",
            },
          ];
          if (!this.approve_visible) {
            // 编辑/新增
            this.$http({
              url: "/mkWangge/saveOrUpdateList",
              method: "post",
              headers: {
                "Content-Type": "application/json",
              },
              data: reqdata,
            }).then((res) => {
              console.log(res);
              this.handleInit();
            });
          } else {
            // 审批
            let reqdata = {
              ids: this.ids,
              remark: this.add_form.remark,
              type: isAdopt,
            };
            console.log(reqdata, "reqdata");
            this.$http({
              url: "/mkWangge/review",
              method: "post",
              headers: {
                "Content-Type": "application/json",
              },
              data: {
                ...reqdata,
              },
            }).then((res) => {
              console.log(res);
              this.handleInit();
            });
          }
          this.edit_visible = false;
          this.add_visible = false;
        }
      });
    },
    handleSummary() {
      if (this.summaryIds.length === 0) {
        this.$message({
          message: "还未选择要合并的项目",
          type: "error",
        });
        this.handleVisible("summary");
        return;
      } else {
        this.$http({
          url: "/mkWangge/huizongWangge",
          method: "post",
          headers: {
            "Content-Type": "application/json",
          },
          data: this.summaryIds,
        }).then((res) => {
          console.log(res);
          if (res.data.result === 1) {
            this.$message({
              message: res.data.desc,
              type: "error",
            });
          } else {
            this.$message({
              message: res.data.desc,
              type: "success",
            });
          }
          this.handleInit();
        });
        this.handleVisible("summary");
      }
    },
    handleChange(page) {
      this.page = page;
      this.handleInit();
    },
    handleSelectFilter(row, index) {
      // 过滤可被选中的数组
            console.log(row, index);
            return row;
        },
  },
};
</script>

<style lang="scss" scoped>
.workersList-container {
  background: #ffffff;
  padding: 0 20px;
  margin: 15px;
  overflow: auto;
  width: calc(100% - 30px);
  max-width: calc(100% - 30px);
  height: 100%;
  overflow-x: hidden;
}
.simple-container .el-form-item {
  padding-bottom: 22px;
}
.summary {
  padding: 20px 50px 100px;
  font-size: 16px;
  .summary-tip {
    color: #7f7f7f;
    padding-top: 30px;
  }
}
::v-deep .el-row {
  padding-top: 12px;
  padding-bottom: 12px;
}
</style>