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

<template>
  <div class="simple-container 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"
      :selectable="handleSelectFilter"
      @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"
        :rules="rules"
        :model="add_form"
        ref="add_ref"
      >
        <el-form-item label="提出人" prop="proposer">
          <el-input
            :disabled="title === '审批' || title === '查看'"
            v-model="add_form.proposer"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="telephone">
          <el-input
            :disabled="title === '审批' || title === '查看'"
            v-model="add_form.telephone"
          ></el-input>
        </el-form-item>
        <el-form-item label="网格划分需求" prop="wanggeText">
          <el-input
            type="textarea"
            :disabled="title === '审批' || title === '查看'"
            v-model="add_form.wanggeText"
          ></el-input>
        </el-form-item>
        <el-form-item label="附件上传" prop="file">
          <myUpload
            v-if="title === '新建' || title === '发起人处理'"
            @uploadBack="uploadBack"
            :fileInfo="fileInfo"
            :fileList="fileInfo.fileList"
          ></myUpload>
          <div v-else>
            <div v-if="fileInfo.fileList.length === 0">暂无附件</div>
            <div
              v-for="(item, index) in fileInfo.fileList"
              :key="index"
              class="simple-table-click cursor-pointer margin-left-10"
              @click="handleDownload(item)"
            >
              {{ item.fileName }}
            </div>
          </div>
        </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>
            <el-button @click="handleVisible('add')" type="primary"
              >确定</el-button
            >
          </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() {
    const chcekPhone = (rule, value, callback) => {
      const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/;
      if (!value) {
        return callback(new Error("联系人为空"));
      }

      setTimeout(() => {
        if (!Number.isInteger(+value)) {
          callback(new Error("请输入数字值"));
        } else {
          if (phoneReg.test(value)) {
            callback();
          } else {
            callback(new Error("联系人格式不正确"));
          }
        }
      }, 100);
    };
    return {
      rules: {
        proposer: [
          {
            required: true,
            message: "提出人不能为空",
            trigger: "blur",
          },
        ],
        telephone: [
          {
            required: true,
            // message: "联系电话不能为空",
            trigger: "blur",
            validator: chcekPhone,
          },
        ],
        wanggeText: [
          {
            required: true,
            message: "网格划分需求不能为空",
            trigger: "blur",
          },
        ],
      },
      // 当前用户标识
      loginNoStr: "",
      fileInfo: {
        limit: 3,
        url: "/market/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: "sts",
          type: "select",
          // 0.待办  1.已办
          dictionary: [
            {
              label: "待办",
              value: "0",
            },
            {
              label: "已办",
              value: "1",
            },
          ],
        },
      ],
      // 列表数据
      table_list: [],
      table_loading: false,
      //   表格里的操作按钮
      table_handle_row: [
        {
          label: "查看",
          props: "check",
        },
        {
          label: "编辑",
          props: "edit",
          visible: {
            isEdit: ["1"],
          },
        },
        {
          label: "处理",
          props: "approve",
          visible: {
            deal: ["1"],
          },
        },
      ],
      //  表头配置
      table_config: [
        {
          label: "序号",
          props: "No",
        },
        {
          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: "No",
        },
        {
          label: "流程环节",
          props: "taskName",
        },
        {
          label: "处理人",
          props: "opName",
        },
        {
          label: "处理工号",
          props: "opNo",
        },
        {
          label: "处理时间",
          props: "opTime",
        },
        {
          label: "审批意见",
          props: "remark",
          // type: "dictionary",
          // dictionary: { 0: "同意", 1: "不同意" },
        },
      ],
    };
  },
  mounted() {
    this.handleInit();
    this.loginNoStr = JSON.parse(sessionStorage.getItem("userInfo")).loginNoStr;
  },
  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: "/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,
              deal: element.draft === "1" && element.sts === "0" ? "1" : "0",
              isEdit:
                element.draft === "0" && element.createId === this.loginNoStr
                  ? "1"
                  : "0",
              No: index + 1,
            }))
          : [];
        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 = {};
          this.fileInfo.fileList = [];
          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) {
      const fileName = [];
      const fileIds = [];
      v.forEach((element) => {
        fileName.push(element.fileName);
        fileIds.push(element.fileCode);
      });
      console.log(v);
      this.add_form.fileNames = fileName.join(",");
      this.add_form.fileIds = fileIds.join(",");
      // console.log(this.add_form,'this.add_form')
    },
    // 获取模态框信息
    getDialogData(row) {
      let id = row.id;
      let type = row.parentId === null ? "1" : "0";
      this.$http({
        url: "/market/mkWangge/getMkWanggeById",
        method: "get",
        headers: {
          "Content-Type": "application/json",
        },
        params: {
          id,
          type,
        },
      }).then(({ 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,
          fileNames: body.fileNames,
          fileIds: body.fileIds,
        };
        this.table_list_approve = body.bpmTaskList
          ? body.bpmTaskList.map((item, index) => ({
              ...item,
              No: index + 1,
            }))
          : [];
        this.fileInfo.fileList = body.fileNames
          ? body.fileNames.split(",").map((el, index) => ({
              fileName: el,
              name: el,
              fileCode: body.fileIds.split(",")[index],
            }))
          : [];
      });
    },
    // 查看按钮
    handleCheck(row) {
      if (row.parentLevel === "1") {
        this.$router.push({
          path: "/approvalExamination",
          query: {
            parentId: row.id.toString(),
          },
        });
      } 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: "/market/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: "/market/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;
          this.fileInfo.fileList = [];
        }
      });
    },
    handleSummary() {
      if (this.summaryIds.length === 0) {
        this.$message({
          message: "还未选择要合并的项目",
          type: "error",
        });
        this.handleVisible("summary");
        return;
      } else {
        this.$http({
          url: "/market/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) {
      // 过滤可被选中的数组
      if (row.parentLevel === "1") {
        return false;
      } else {
        return true;
      }
    },
    // 附件下载
    handleDownload(item) {
      console.log(item);
    },
  },
};
</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>