jf-frock/src/views/ProductionOrderList/InboundForm/index.vue

<template>
  <div>
    <FullPage
      title="包装单"
      :list="set_list"
      @init="init"
      :loading="loading"
      @searchData="init"
      @changePage="changePage"
      @changeSize="changeSize"
      :tableColums="computedTable"
      :tableData="tableData"
      :pageIndex="pageIndex"
      :total="total"
    >
      <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 }">
        <a
          v-if="persimissionData['查看详情'] || persimissionData.all"
          @click="goPage(row)"
          >查看详情</a
        >
      </template>
    </FullPage>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      tableColums: [
        {
          title: "序号",
          align: "center",
          key: "index",
          width: "100",
          fixed: "left",
          render: (h, params) => h("span", {}, params.index + 1),
        },
        { title: "订单编号", align: "center", key: "order_no", minWidth: 200 },
        {
          title: "订单类型",
          align: "center",
          key: "type",
          minWidth: 100,
          render: (h, params) =>
            h("span", {}, params.row.type == 1 ? "工装" : "家装"),
        },
        {
          title: "项目名称",
          align: "center",
          key: "residential_name",
          minWidth: 200,
        },
        { title: "手机号", align: "center", key: "mobile", minWidth: 200 },
        {
          title: "紧急程度",
          align: "center",
          key: "warning_state",
          minWidth: 100,
          slot: "basicTypeSet",
        },
        {
          title: "生产进度",
          align: "center",
          key: "complete_rate",
          minWidth: 180,
          render(h, params) {
            return h(
              "span",
              {},
              parseInt(params.row.complete_rate * 100) + "%"
            );
          },
        },
        {
          title: "订单开始日期",
          align: "center",
          key: "start_time",
          minWidth: 180,
          render: (h, params) =>
            h("span", {}, this.func.replaceDate(params.row.start_time * 1, 1)),
        },
        {
          title: "订单结束时间",
          align: "center",
          key: "end_time",
          minWidth: 200,
          render: (h, params) =>
            h("span", {}, this.func.replaceDate(params.row.end_time * 1, 1)),
        },
        { title: "包装员", align: "center", key: "nickname", minWidth: 150 },
        {
          title: "包装状态",
          align: "center",
          key: "state",
          minWidth: 150,
          render: (h, params) =>
            h(
              "span",
              {},
              // params.row.sub_state == 0
              // ? "未指派"
              params.row.sub_state == 1
                ? "未包装"
                : params.row.sub_state == 2
                ? "包装中"
                : "包装完成"
            ),
        },
        {
          title: "操作",
          align: "center",
          key: "set",
          slot: "set",
          fixed: "right",
          width: "100",
        },
      ],
      tableData: [{ order_no: "123" }],
      pageIndex: 1,
      total: 0,
      pageSize: 10,
      loading: false,
      proxyObj: {},
      tableheaders: [],
      warningList: [],
      userList: [],
    };
  },
  created() {
    // 获取紧急程度
    this.axios.get("/api/warning_list").then((res) => {
      this.warningList = res.data.data;
    });
    // 获取用户列表
    this.axios({ method: "get", url: "/api/employee_list" }).then((res) => {
      this.userList = 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",
          placeholder: "请输入订单编号",
          value: "",
          serverName: "order_no",
        },
        {
          title: "项目名称",
          name: "Input",
          placeholder: "请输入项目名称",
          value: "",
          serverName: "residential_name",
        },
        {
          title: "包装状态",
          name: "Select",
          placeholder: "请选择",
          serverName: "sub_state",
          value: "",
          option: [
            // { label: "未指派", value: 0 },
            { label: "未包装", value: 1 },
            { label: "包装中", value: 2 },
            { label: "包装完成", value: 3 },
          ],
        },
        {
          title: "订单类型",
          name: "Select",
          placeholder: "请选择",
          serverName: "type",
          value: "",
          option: [
            { label: "工装", value: 1 },
            { label: "家装", value: 0 },
          ],
        },
        {
          title: "日期范围",
          name: "Input",
          start_server: "start_time",
          end_server: "end_time",
          start_value: "",
          end_value: "",
          isDate: true,
          start_placeholder: "开始日期",
          end_placeholder: "结束日期",
        },
        {
          title: "客户",
          name: "Input",
          placeholder: "请输入客户昵称",
          value: "",
          serverName: "client_name",
        },
        {
          title: "手机号",
          name: "Input",
          placeholder: "请输入手机号",
          value: "",
          serverName: "mobile",
        },
        {
          title: "包装员",
          name: "Select",
          placeholder: "请选择包装员",
          value: "",
          optionValue: "id",
          filterable: true,
          optionName: "nickname",
          serverName: "salesman",
          option: this.userList,
        },
        {
          title: "紧急程度",
          name: "Select",
          placeholder: "请选择",
          serverName: "warning_state",
          optionValue: "id",
          optionName: "title",
          value: "",
          option: this.warningList,
        },
      ];
    },
  },

  methods: {
    init(row) {
      this.pageIndex = 1;
      row.page_index = this.pageIndex;
      row.page_size = this.pageSize;
      this.proxyObj = row;
      this.getData(row);
    },
    getData(row) {
      this.loading = true;
      this.axios("/api/orders_in_list", { params: row }).then((res) => {
        this.loading = false;
        this.tableData = res.data.data;
        this.total = res.data.total;
        this.tableheaders = res.data.tableSet || [];
      });
    },
    changePage(e) {
      this.pageIndex = e;
      this.proxyObj.page_index = this.pageIndex;
      this.getData(this.proxyObj);
    },
    changeSize(e) {
      this.pageSize = e;
      this.proxyObj.page_size = this.pageSize;
      this.getData(this.proxyObj);
    },
    goPage(row) {
      this.$router.push({
        path: "/cms/productionorderlist/inboundform/details",
        query: {
          order_no: row.order_no,
          type: 4,
        },
      });
    },
    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></style>