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="handleaaa"
      @check="handleCheck"
      @edit="handleEdit"
    ></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"
        >
          <el-input
            type="textarea"
            v-model="add_form.desc"
          ></el-input>
        </el-form-item>
      </el-form>
      <template v-slot:footer>
        <div v-if="!isCheck">
          <el-button
            @click="handleSubmit"
            type="primary"
          >保存</el-button>
          <el-button
            @click="handleVisible('add')"
            type="default"
          >取消</el-button>
        </div>
        <div v-else></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 "./components/form.vue";
import simpleTable from "./components/table.vue";
import simpleDialog from "./components/dialog.vue";
import simplePagination from "./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,
      table_search: {},
      // 新建模态框
      add_visible: false,
      summary_visible: false,
      edit_visible: false,
      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: {
          //   status: [1],
          // },
        },
      ],
      //  表头配置
      table_config: [
        {
          label: "序号",
          props: "id",
        },
        {
          label: "公司名称",
          props: "companyName",
        },
        {
          label: "发起人",
          props: "proposer",
        },
        {
          label: "发起时间",
          props: "createTime",
          type: "date",
        },
        {
          label: "状态",
          props: "status",
          type: "dictionary",
          dictionary: { 0: "待办", 1: "已办" },
        },
      ],
      // 模态框内表数据
      table_list_approve: [],
      table_loading_approve: false,
      // 模态框内表头配置
      table_config_approve: [
        {
          label: "编号",
          props: "number",
        },
        {
          label: "流程环节",
          props: "cpmName",
        },
        {
          label: "处理人",
          props: "person",
        },
        {
          label: "处理工号",
          props: "number",
        },
        {
          label: "处理时间",
          props: "createTime",
          type: "date",
        },
        {
          label: "审批意见",
          props: "status",
          type: "dictionary",
          dictionary: { 0: "同意", 1: "不同意" },
        },
      ],
    };
  },
  mounted() {
    this.handleInit({
      ...this.table_search,
      type: "0",
      page: this.page,
      pageSize: this.rows,
    });
  },
  methods: {
    // 表格数据初始化
    handleInit(data) {
      // this.table_loading = true;
      // console.log(data);
      this.$http({
        url: "/mkWangge/queryPage",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: data,
      }).then(({ data: { count, data } }) => {
        this.table_loading = false;
        this.total = count;
        this.table_list = data || [];
        console.log(data);
      });
    },
    // 搜索事件
    handleSearch(data) {
      this.table_search = data;
      this.page = 1;
      this.handleInit({
        ...data,
        type: "0",
        page: this.page,
        pageSize: this.rows,
      });
    },
    handleVisible(props) {
      switch (props) {
        case "add":
          this.add_visible = !this.add_visible;
          this.edit_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;
      }
    },
    handleaaa(val) {
      console.log(val);
    },
    //文件返回值
    uploadBack(v) {
      console.log(v);
      this.attList = v;
    },
    // 查看按钮
    handleCheck(row) {
      let id = row.id;
      this.handleVisible('check')
      this.$http({
        url: "/mkWangge/getMkWanggeById",
        method: "get",
        headers: {
          "Content-Type": "application/json",
        },
        params:{
          id
        }
      }).then(({data})=>{
        console.log(data);
        this.add_form = {
          id: data.id,
          proposer: data.proposer,
          telephone: data.telephone,
          wanggeText: data.wanggeText,
        }
      })
    },
    // 编辑按钮
    handleEdit(row) {
      let id = row.id;
      this.handleVisible('edit')
      this.$http({
        url: "/mkWangge/getMkWanggeById",
        method: "get",
        headers: {
          "Content-Type": "application/json",
        },
        params:{
          id
        }
      }).then(({data})=>{
        console.log(data);
        this.add_form = {
          id: data.id,
          proposer: data.proposer,
          telephone: data.telephone,
          wanggeText: data.wanggeText,
        }
      })
    },
    handleSubmit() {
      console.log(this.add_form);
      // let _this = this;
      this.$refs.add_ref.validate((valid) => {
        if (valid) {
          let reqdata = [{ ...this.add_form, processId: "729294602773110788" }];
          this.$http({
            url: "/mkWangge/saveOrUpdateList",
            method: "post",
            headers: {
              "Content-Type": "application/json",
            },
            data: reqdata,
          }).then((res) => {
            console.log(res);
          });
          this.handleInit({
            ...this.table_search,
            page: this.page,
            pageSize: this.rows,
          });
          this.edit_visible = false;
          this.add_visible = false;
        }
      });
    },
    handleSummary() {},
    handleChange(page) {
      this.page = page;
      this.handleInit({
        ...this.table_search,
        type: "0",
        page: this.page,
        pageSize: this.rows,
      });
    },
  },
};
</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>