jf-frock/src/views/ProductionOrderList/ProductionPlanlist/BST_two.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>
     <Modal
      v-model="showModal"
      title="设置"
      @on-ok="handleModalOk"
      @on-cancel="showModal = false"
    >
      <div class="modal_content">
        <Tabs
          value="name1"
          style="max-height: 700px; overflow: hidden; overflow-y: auto"
        >
          <TabPane label="表单设置" name="name1">
            <Table
              :columns="formModalColumns"
              border
              draggable
              @on-drag-drop="(a, b) => onDragDrop(a, b, formModalTableData, 1)"
              :data="formModalTableData"
            ></Table>
          </TabPane>
          <TabPane label="表头设置" name="name2">
            <Table
              :columns="tableModalColumns"
              border
              draggable
              @on-drag-drop="(a, b) => onDragDrop(a, b, tableModalTableData, 2)"
              :data="tableModalTableData"
            ></Table>
          </TabPane>
        </Tabs>
      </div>
    </Modal>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
        tableModalColumns: [
        {
          title: "是否展示",
          align: "center",
          key: "is_show",
          minWidth: 60,
          render: (h, params) => {
            const { index } = params;
            const currentRow = JSON.parse(
              JSON.stringify(this.tableModalTableData[index])
            );
            return h("Checkbox", {
              props: {
                value: currentRow.is_show,
              },
              on: {
                "on-change": (e) => {
                  currentRow.is_show = e;
                  this.tableModalTableData.splice(index, 1, currentRow);
                },
              },
            });
          },
        },
        {
          title: "字段名",
          align: "center",
          key: "value",
          minWidth: 100,
        },
        {
          title: "展示名称",
          align: "center",
          key: "title",
          minWidth: 100,
          render: (h, params) => {
            const { index } = params;
            const currentRow = JSON.parse(
              JSON.stringify(this.tableModalTableData[index])
            );
            return h("Input", {
              props: {
                value: currentRow.title,
                type: "text",
                disabled: currentRow.title == "全选" ? true : false,
              },
              on: {
                "on-change": (e) => {
                  currentRow.title = e.target.value;
                  this.tableModalTableData.splice(index, 1, currentRow);
                },
              },
            });
          },
        },
      ],
        tableModalTableData: [
        { is_show: true, key: "selection", value: "全选", title: "全选" },
        {
          is_show: true,
          key: "order_no",
          value: "订单编号",
          title: "订单编号",
        },
        {
          is_show: true,
          key: "residential_name",
          value: "项目名称",
          title: "项目名称",
        },
        { is_show: true, key: "nickname", value: "业务员", title: "业务员" },
        {
          is_show: true,
          key: "client_name",
          value: "客户姓名",
          title: "客户姓名",
        },
        { is_show: true, key: "address", value: "客户地址", title: "客户地址" },
        {
          is_show: true,
          key: "leading_name",
          value: "负责人",
          title: "负责人",
        },
        {
          is_show: true,
          key: "warning_state",
          value: "紧急程度",
          title: "紧急程度",
        },
        {
          is_show: true,
          key: "predict_price",
          value: "产品总价",
          title: "产品总价",
        },
        {
          is_show: true,
          key: "fax_price",
          value: "折扣金额",
          title: "折扣金额",
        },
        { is_show: true, key: "price", value: "订单金额", title: "订单金额" },
        { is_show: true, key: "get_money", value: "已收款", title: "已收款" },
        { is_show: true, key: "unget_money", value: "未收款", title: "未收款" },
        { is_show: true, key: "remark", value: "备注", title: "备注" },
        {
          is_show: true,
          key: "start_time",
          value: "订单开始日期",
          title: "订单开始日期",
        },
        {
          is_show: true,
          key: "end_time",
          value: "订单交付日期",
          title: "订单交付日期",
        },
        {
          is_show: true,
          key: "complete_rate",
          value: "生产进度",
          title: "生产进度",
        },
        { is_show: true, key: "state", value: "订单状态", title: "订单状态" },
        { is_show: true, key: "crt_name", value: "制单人", title: "制单人" },
        {
          is_show: true,
          key: "crt_time",
          value: "订单创建时间",
          title: "订单创建时间",
        },
        { is_show: true, key: "set", value: "操作", title: "操作" },
      ],
       formModalColumns: [
        {
          title: "是否展示",
          align: "center",
          key: "is_show",
          minWidth: 60,
          render: (h, params) => {
            const { index } = params;
            const currentRow = JSON.parse(
              JSON.stringify(this.formModalTableData[index])
            );
            return h("Checkbox", {
              props: {
                value: currentRow.is_show,
              },
              on: {
                "on-change": (e) => {
                  currentRow.is_show = e;
                  this.formModalTableData.splice(index, 1, currentRow);
                },
              },
            });
          },
        },
        {
          title: "字段名",
          align: "center",
          key: "value",
          minWidth: 100,
        },
        {
          title: "展示名称",
          align: "center",
          key: "title",
          minWidth: 100,
          render: (h, params) => {
            const { index } = params;
            const currentRow = JSON.parse(
              JSON.stringify(this.formModalTableData[index])
            );
            return h("Input", {
              props: {
                value: currentRow.title,
                type: "text",
              },
              on: {
                "on-change": (e) => {
                  currentRow.title = e.target.value;
                  this.formModalTableData.splice(index, 1, currentRow);
                },
              },
            });
          },
        },
      ],
      formModalTableData: [
        {
          is_show: true,
          key: "order_no",
          value: "订单编号",
          title: "订单编号",
        },
        {
          is_show: true,
          key: "residential_name",
          value: "项目名称",
          title: "项目名称",
        },
        {
          is_show: true,
          key: "client_name",
          value: "客户姓名",
          title: "客户姓名",
        },
        { is_show: true, key: "address", value: "客户地址", title: "客户地址" },
        { is_show: true, key: "salesman", value: "业务员", title: "业务员" },
        { is_show: true, key: "state", value: "订单状态", title: "订单状态" },
        { is_show: true, key: "crt_id", value: "制单人", title: "制单人" },
        {
          is_show: true,
          key: "leading_name",
          value: "负责人",
          title: "负责人",
        },
        {
          is_show: true,
          key: "warning_state",
          value: "紧急程度",
          title: "紧急程度",
        },
        {
          is_show: true,
          key: "",
          value: "订单创建时间",
          title: "订单创建时间",
        },
      ],
      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: [],
      showModal:false,
      page_index: 1,
      currencyPageId:null,
      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 })
    this.currencyPageId = this.$store.state.navgationData[0].sub[0].sub[0].id;
  },
  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: {
    handleModalOk(){
        this.formModalTableData.forEach((element, index) => {
        element.sort = index;
      });
      this.tableModalTableData.forEach((element, index) => {
        element.sort = index;
      });
      this.axios({
        method: "post",
        url: "/api/update/table",
        data: {
          id: this.currencyPageId,
          result: {
            formSet: this.formModalTableData,
            tableSet: this.tableModalTableData,
          },
        },
      }).then((res) => {
        this.$Message.success(res.msg);
        this.init(this.proxyObj);
      });
    },
    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,
        },
      });
    },
     onDragDrop(a, b, table, type) {
      if (type == 2 && (a == 0 || b == 0)) {
        return this.$Message.warning("全选位置不可变");
      }
      table.splice(b, 0, ...table.splice(a, 1));
    },
    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.showModal = true;
      return;
      // 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);
                // let data =[];
                // for(let i = 0 ; i++ ; i<this.tableColums){
                //   if(this.tableColums[i].title.indexOf(result)>=0){
                //              data.push(this.tableColums[i])
                //   }
                // }
                // this.computedTable = data
       //       }
      //      });
     //   },
    //  });
    },
  },
};
</script>

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