BST_bigScreen/src/views/ProductionOrderList/ProductionPlanlist/list.vue

<template>
  <div>
    <FullPage
      title="生产计划列表"
      :list="set_list"
      @init="init"
      @searchData="searchData"
      @selectTable="selectTable"
      @changePage="changePage"
      @changeSize="changeSize"
      :tableColums="computedTable"
      :tableData="tableData"
      :showPage="false"
      :page_index="page_index"
      :total="total"
    >
      <div slot="titleButton">
        <Button
          v-if="persimissionData['分类派工'] || persimissionData.all"
          type="primary"
          style="margin-right:10px"
          @click="handleDispatchType(selects)"
          ghost
          >分类派工</Button
        >
        <Button
          v-if="persimissionData['批量派工单'] || persimissionData.all"
          type="primary"
          @click="dispatchList(selects)"
          ghost
          >批量派工单</Button
        >
      </div>

      <div slot="navButton">
        <Button
          v-if="persimissionData['表头设置'] || persimissionData.all"
          @click="setupTableHeader"
          type="primary"
          ghost
          icon="ios-cog"
          >表头设置</Button
        >
      </div>
      <template slot="basicTypeSet" slot-scope="{ row }">
        <div>
          <span
            v-for="item in warningList"
            :key="item.id"
            :style="{ color: item.color }"
            v-show="item.id == row.warning_state"
            >{{ item.title }}</span
          >
        </div>
      </template>
      <template slot="set" slot-scope="{ row }">
        <div>
          <a
            v-if="persimissionData['详情'] || persimissionData.all"
            style="margin:0 5px"
            @click="goDetial(row)"
            >详情</a
          >
          <a
            v-if="persimissionData['派工单'] || persimissionData.all"
            style="margin:0 5px"
            @click="dispatchList(row)"
            >派工单</a
          >
        </div>
      </template>

      <div>
        <Modal
          :width="1064"
          class-name="vertical-center-modal"
          v-model="showTableColums"
          title="设置表头"
        >
          <Form>
            <FormItem label="订单信息:">
              <div style="width:100%;display:flex;">
                <CheckboxGroup style="width:100%">
                  <Checkbox label="香蕉"></Checkbox>
                  <Checkbox label="苹果"></Checkbox>
                  <Checkbox label="西瓜"></Checkbox>
                  <Checkbox label="香蕉"></Checkbox>
                </CheckboxGroup>
              </div>
            </FormItem>
          </Form>
        </Modal>
      </div>
      <template slot="pageSlot">
        <div class="pageSlotStyle">
          <Page
            :page-size-opts="[10, 20, 30, 40, 100, 1000]"
            @on-page-size-change="changeSize"
            @on-change="changePage"
            :current="page_index"
            show-total
            :total="total"
            show-sizer
            :page-size="page_size"
          />
        </div>
      </template>
    </FullPage>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      tableColums: [
        {
          type: "selection",
          title: "全选",
          key: "selection",
          fixed: "left",
          width: "90",
          align: "center",
        },
        { title: "订单编号", align: "center", key: "order_no", minWidth: 200 },
        { title: "计划单号", align: "center", key: "plan_no", minWidth: 200 },
        {
          title: "订单类型",
          align: "center",
          key: "order_type",
          minWidth: 150,
          render(h, params) {
            return h("span", {}, params.row.order_type == 1 ? "工装" : "家装");
          },
        },
        {
          title: "订单状态",
          align: "center",
          key: "state",
          minWidth: 150,
          render: (h, params) =>
            h(
              "span",
              {},
              params.row.state == 0
                ? "未派工"
                : params.row.state == 1
                ? "已派工"
                : params.row.state == 2
                ? "完成"
                : ""
            ),
        },
        { title: "业务员", align: "center", key: "nickname", minWidth: 150 },
        {
          title: "紧急程度",
          align: "center",
          key: "warning_state",
          minWidth: 150,
          slot: "basicTypeSet",
        },
        {
          title: "项目名称",
          align: "center",
          key: "residential_name",
          minWidth: 200,
        },
        {
          title: "计划开始时间",
          align: "center",
          minWidth: 200,
          key: "plan_start_time",
          render: (h, params) =>
            h("span", {}, this.func.replaceDate(params.row.plan_start_time, 1)),
        },
        {
          title: "计划结束时间",
          align: "center",
          minWidth: 200,
          key: "plan_end_time",
          render: (h, params) =>
            h("span", {}, this.func.replaceDate(params.row.plan_end_time, 1)),
        },
        {
          title: "生产进度",
          align: "center",
          key: "complete_rate",
          minWidth: 100,
          render: (h, params) =>
            h("span", {}, parseInt(params.row.complete_rate * 100) + "%"),
        },
        {
          title: "预估交付日期",
          align: "center",
          key: "predict_time",
          minWidth: 200,
          render: (h, params) =>
            h("span", {}, this.func.replaceDate(params.row.predict_time, 1)),
        },
        {
          title: "操作",
          align: "center",
          key: "set",
          slot: "set",
          fixed: "right",
          width: "150",
        },
      ],
      tableData: [],
      page_index: 1,
      page_size: 10,
      total: 0,
      proxyObj: {},
      showTableColums: false,
      selects: [],
      tableheaders: [],
      userList: [],
      //详情页返回保留搜索数据
      corssPageData: localStorage.getItem("corssPageData")
        ? JSON.parse(localStorage.getItem("corssPageData"))
        : {},
      warningList: [],
    };
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      if (from.path != "/cms/productionorderlist/productionplanlist/details") {
        localStorage.removeItem("corssPageData");
      } else {
        vm.firstEnter = 1;
      }
    });
  },
  beforeRouteLeave(to, from, next) {
    if (to.path == "/cms/productionorderlist/productionplanlist/details") {
      (this.corssPageData.page_index = this.page_index),
        (this.corssPageData.page_size = this.page_size),
        localStorage.setItem(
          "corssPageData",
          JSON.stringify(this.corssPageData)
        );
    } else {
      localStorage.removeItem("corssPageData");
    }
    next((vm) => {});
  },
  created() {
    // 获取紧急程度
    this.axios.get("/api/warning_list").then((res) => {
      this.warningList = res.data.data;
    });
    this.axios
      .get("/api/employee_list")
      .then((res) => (this.userList = res.data));
    //this.axios.get('/api/employee_list').then(res => { this.employeeList = res.data })
  },
  computed: {
    ...mapState(["persimissionData"]),
    computedTable() {
      // if (this.tableheaders.length < 1) {
      return this.tableColums;
      // }
      // return this.func.computedHeader(this.tableheaders, this.tableColums)
    },
    set_list() {
      return [
        {
          title: "订单编号",
          name: "Input",
          serverName: "order_no",
          placeholder: "请输入订单编号",
          value: "",
        },
        {
          title: "项目名称",
          name: "Input",
          serverName: "residential_name",
          placeholder: "请选择项目名称",
          value: "",
        },
        {
          title: "订单类型",
          name: "Select",
          placeholder: "请选择",
          serverName: "order_type",
          value: "",
          option: [
            { label: "工装", value: 1 },
            { label: "家装", value: 0 },
          ],
        },
        {
          title: "计划单号",
          name: "Input",
          serverName: "plan_no",
          placeholder: "请填写计划单号",
          value: "",
        },
        {
          title: "业务员",
          name: "Select",
          serverName: "nickname",
          placeholder: "请选择",
          value: "",
          optionName: "nickname",
          optionValue: "id",
          option: this.userList,
        },
        {
          title: "计划开始时间",
          name: "Input",
          start_server: "start_time",
          end_server: "end_time",
          start_value: "",
          end_value: "",
          isDate: true,
          serverName: "id2",
          start_placeholder: "开始日期",
          end_placeholder: "结束日期",
        },
        {
          title: "紧急程度",
          name: "Select",
          serverName: "warning_state",
          placeholder: "请选择",
          value: "",
          optionName: "title",
          optionValue: "id",
          option: this.warningList,
        },
        {
          title: "订单状态",
          name: "Select",
          placeholder: "请选择",
          serverName: "state",
          value: "",
          option: [
            { label: "未派工", value: 0 },
            { label: "已派工", value: 1 },
            { label: "完成", value: 2 },
          ],
        },
      ];
    },
  },
  methods: {
    init(row) {
      const { order_no } = this.$route.query;
      if (order_no) {
        row.order_no = order_no;
        this.set_list[0].value = order_no;
      }
      row.sub_state = 5;
      if (this.firstEnter == 1) {
        this.corssPageData = JSON.parse(localStorage.getItem("corssPageData"));
        row = this.corssPageData;
        this.proxyObj = row;
        this.searchData(row);
      } else {
        this.page_index = 1;
        row.page_index = this.page_index;
        row.page_size = this.page_size;
        this.proxyObj = row;
        this.getData(row);
      }
    },
    searchData(row) {
      if (this.firstEnter == 1) {
        this.page_index = this.corssPageData.page_index;
        this.page_size = this.corssPageData.page_size;
        this.set_list[0].value = this.corssPageData.order_no;
        this.set_list[1].value = this.corssPageData.residential_name;
        this.set_list[3].value = this.corssPageData.warning_state;
        this.set_list[4].value = this.corssPageData.state;
        this.set_list[2].start_value = this.corssPageData.start_time
          ? this.corssPageData.start_time
          : "";
        this.set_list[2].end_value = this.corssPageData.end_time
          ? this.corssPageData.end_time
          : "";
        this.corssPageData.type = this.$route.query.type;
        this.getData(this.corssPageData);
      } else {
        this.page_index = 1;
        row.page_index = this.page_index;
        row.page_size = this.page_size;
        this.corssPageData.order_no = this.set_list[0].value;
        this.corssPageData.residential_name = this.set_list[1].value;
        this.corssPageData.warning_state = this.set_list[3].value;
        this.corssPageData.state = this.set_list[4].value;
        this.corssPageData.start_time = this.func.setDate(
          this.set_list[2].start_value
        );
        this.corssPageData.end_time = this.func.setDate(
          this.set_list[2].end_value
        );
        this.proxyObj = row;
        this.getData(row);
      }
    },
    changePage(e) {
      this.page_index = e;
      this.proxyObj.page_index = this.page_index;
      this.proxyObj.page_size = this.page_size;
      this.getData(this.proxyObj);
    },
    changeSize(e) {
      this.page_size = e;
      this.proxyObj.page_size = this.page_size;
      this.getData(this.proxyObj);
    },
    getData(row) {
      this.axios("/api/orders_produce_plan_list", { params: row }).then(
        (res) => {
          this.firstEnter++;
          this.tableData = res.data.data;
          this.total = res.data.total;
          // this.tableheaders = res.data.tableSet || []
        }
      );
    },
    setTableColums() {
      //设置表头
      this.showTableColums = true;
    },
    goDetial(row) {
      this.$router.push({
        path: "/cms/productionorderlist/productionplanlist/details",
        query: {
          order_no: row.order_no,
          plan_no: row.plan_no,
        },
      });
    },
    handleDispatchType(row) {
      console.log("row :>> ", row);
      this.$router.push({
        path: "/cms/Dispatching/Dispatching",
        query: {
          order_no: row.order_no,
          plan_no: row.plan_no,
        },
      });
    },
    dispatchList(row) {
      this.dispatchOrder({
        params: {
          order_no: Array.isArray(row) ? this.selects.join(",") : row.order_no,
        },
        then: () => this.getData(this.proxyObj),
      });
    },
    selectTable(e) {
      let result = [];
      e.map((v) => result.push(v.order_no));
      this.selects = result;
    },
    setupTableHeader() {
      this.tableheaders.length < 1
        ? (this.tableheaders = this.tableColums.reduce(
            (pre, cur) => pre.concat(cur.key),
            []
          ))
        : "";
      this.$setTableheader({
        list: this.tableColums,
        selects: this.tableheaders,
        then: (result) => {
          this.tableheaders = result;
          this.axios
            .post("/api/update/table", { id: this.$route.query.id, result })
            .then((res) => {
              if (res.code == 200) {
                this.$Message.success(res.msg);
              }
            });
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.pageSlotStyle {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
</style>