ouchen/src/views/godownEntry/list.vue

<template>
  <div>
    <TopTitle title="入库单">
      <Button type="primary" @click="searchModal = true">查找</Button>
      <Button type="primary" @click="showModalTrue()" style="margin-left: 20px"
        >栏目设置</Button
      >
    </TopTitle>
    <div class="content">
      <Table
        :data="tableData"
        :columns="tableColumns"
        border
        max-height="700"
        v-show="tableData.length != 0"
      >
        <template slot="set" slot-scope="{ row, index }">
          <a @click="delSelectData(row, index)">详情</a>
        </template>
      </Table>
      <div class="content_body_page">
        <Page
          :page-size-opts="[10, 20, 30, 40, 100]"
          @on-page-size-change="changeSize"
          @on-change="changePage"
          :current="pageIndex"
          show-total
          show-elevator
          :total="total"
          show-sizer
          :page-size="pageSize"
        />
      </div>
    </div>
    <Modal
      v-model="searchModal"
      title="查找"
      @on-ok="searchModalOk"
      @on-cancel="showModal = false"
      width="700"
    >
      <Form :model="formItem" :label-width="85">
        <Row
          style="
            display: flex;
            justify-content: center;
            border-bottom: 1px solid #e8eaec;
            padding: 20px;
          "
        >
          <Col span="11">
            <Form-item label="选择器">
              <Select
                clearable
                v-model="formItem.select"
                placeholder="请选择"
                style="width: 200px"
              >
                <Option value="beijing">北京市</Option>
                <Option value="shanghai">上海市</Option>
                <Option value="shenzhen">深圳市</Option>
              </Select>
            </Form-item>
          </Col>
          <Col span="11">
            <Form-item label="日期控件">
              <Date-picker
                clearable
                :value="formItem.date"
                format="yyyy/MM/dd"
                type="daterange"
                placement="bottom-end"
                placeholder="选择日期"
                style="width: 200px"
              ></Date-picker>
            </Form-item>
          </Col>
        </Row>
        <div
          style="
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            padding: 20px;
            border-bottom: 1px solid #e8eaec;
          "
        >
          <Form-item label="订单编号">
            <Input
              clearable
              v-model="formItem.order_no"
              placeholder="请输入订单编号"
              style="width: 200px"
            ></Input>
          </Form-item>
          <Form-item label="项目名称">
            <Input
              clearable
              v-model="formItem.project_name"
              placeholder="请输入项目名称"
              style="width: 200px"
            ></Input>
          </Form-item>
          <Form-item label="对方单号">
            <Input
              clearable
              v-model="formItem.adverse_odd"
              placeholder="请输入对方单号"
              style="width: 200px"
            ></Input>
          </Form-item>
          <Form-item label="业务员">
            <Input
              clearable
              v-model="formItem.salesman"
              placeholder="请输入业务员"
              style="width: 200px"
            ></Input>
          </Form-item>
          <Form-item label="客户名称">
            <Select
              clearable
              v-model="formItem.customer_name"
              placeholder="请选择"
              style="width: 200px"
            >
              <Option value="beijing">北京市</Option>
              <Option value="shanghai">上海市</Option>
              <Option value="shenzhen">深圳市</Option>
            </Select>
          </Form-item>
          <Form-item label="产品名称">
            <Input
              clearable
              v-model="formItem.product_name"
              placeholder="请输入产品名称"
              style="width: 200px"
            ></Input>
          </Form-item>
          <Form-item label="客户地区">
            <Select
              clearable
              v-model="formItem.client_area"
              placeholder="请选择"
              style="width: 200px"
            >
              <Option value="beijing">北京市</Option>
              <Option value="shanghai">上海市</Option>
              <Option value="shenzhen">深圳市</Option>
            </Select>
          </Form-item>
          <Form-item label="楼层编号">
            <Input
              clearable
              v-model="formItem.floor_number"
              placeholder="请输入楼层编号"
              style="width: 200px"
            ></Input>
          </Form-item>
          <Form-item label="审核状态">
            <Select
              clearable
              v-model="formItem.audit_status"
              placeholder="请选择"
              style="width: 200px"
            >
              <Option value="beijing">北京市</Option>
              <Option value="shanghai">上海市</Option>
              <Option value="shenzhen">深圳市</Option>
            </Select>
          </Form-item>
          <Form-item label="通用产品码">
            <Input
              clearable
              v-model="formItem.universal_product_code"
              placeholder="请输入通用产品码 "
              style="width: 200px"
            ></Input>
          </Form-item>
        </div>
        <div>
          <Form-item label="">
            <Checkbox-group
              v-model="formItem.checkbox"
              style="padding-top: 20px"
            >
              <Checkbox style="width: 100px" label="尺寸确认"></Checkbox>
              <Checkbox style="width: 100px" label="发货"></Checkbox>
              <Checkbox style="width: 100px" label="分箱"></Checkbox>
              <Checkbox style="width: 100px" label="套料"></Checkbox>
              <Checkbox style="width: 100px" label="流程卡"></Checkbox>
              <Checkbox style="width: 100px" label="工艺"></Checkbox>
              <Checkbox style="width: 100px" label="收款"></Checkbox>
              <Checkbox style="width: 100px" label="已下达"></Checkbox>
              <Checkbox style="width: 100px" label="价格审核"></Checkbox>
              <Checkbox style="width: 100px" label="入库"></Checkbox>
              <Checkbox style="width: 100px" label="外协"></Checkbox>
            </Checkbox-group>
          </Form-item>
        </div>
      </Form>
    </Modal>
    <ColumnSetup
      ref="child"
      :tableModalTableDataHeader="tableModalTableDataHeader"
      :formModalColumns="formModalColumns"
      :tableModalColumns="tableModalColumns"
      :tableModalTableData="tableModalTableData"
      :showModal="showModal"
      @event1="change($event)"
      @handleModalOk="handleModalOk"
    />
  </div>
</template>
<script>
import TopTitle from "../../components/TopTitle/index";
import ColumnSetup from "../../components/columnSetup/index.vue";
export default {
  components: {
    TopTitle,
    ColumnSetup,
  },
  data() {
    return {
      ifCheckAll: false,
      ifCheckAllHeader: false,
      formItem: {},
      searchModal: false,
      showModal: false,
      selectData: [],
      searchData: {
        start_time: "",
        end_time: "",
      },
      pageSize: 10,
      pageIndex: 1,
      total: 0,
      tableData: [],
      tableModalTableData: [
        {
          is_show: true,
          key: "order_no",
          value: "订单编号",
          title: "订单编号",
        },
        {
          is_show: true,
          key: "order_type",
          value: "订单类型",
          title: "项目名称",
        },
        {
          is_show: true,
          key: "order_status",
          value: "订单状态",
          title: "订单状态",
        },
        {
          is_show: true,
          key: "salesman",
          value: "业务员",
          title: "业务员  ",
        },
        {
          is_show: true,
          key: "warning_state",
          value: "紧急程度",
          title: "紧急程度",
        },
        {
          is_show: true,
          key: "crt_time",
          value: "订单创建时间",
          title: "订单创建时间",
        },
        {
          is_show: true,
          key: "project_name",
          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: "delivery_date",
          value: "预估交付日期",
          title: "预估交付日期",
        },
      ],
      tableModalTableDataHeader: [
        {
          is_show: false,
          sortord: "1",
          key: "order_no",
          value: "订单编号",
          title: "订单编号",
        },
        {
          is_show: true,
          sortord: "2",
          key: "order_type",
          value: "订单类型",
          title: "项目名称",
        },
        {
          is_show: true,
          sortord: "1",
          key: "order_status",
          value: "订单状态",
          title: "订单状态",
        },
        {
          is_show: true,
          key: "salesman",
          sortord: "1",
          value: "业务员",
          title: "业务员  ",
        },
        {
          is_show: true,
          key: "warning_state",
          sortord: "1",
          value: "紧急程度",
          title: "紧急程度",
        },
        {
          is_show: true,
          key: "crt_time",
          value: "订单创建时间",
          sortord: "1",
          title: "订单创建时间",
        },
        {
          is_show: true,
          key: "project_name",
          value: "项目名称",
          sortord: "1",
          title: "项目名称",
        },
        {
          is_show: true,
          key: "start_time",
          value: "订单开始日期",
          sortord: "1",
          title: "订单开始日期",
        },
        {
          is_show: true,
          key: "end_time",
          value: "订单交付日期",
          sortord: "1",
          title: "订单交付日期",
        },
        {
          is_show: true,
          key: "complete_rate",
          sortord: "1",
          value: "生产进度",
          title: "生产进度",
        },

        {
          is_show: true,
          key: "delivery_date",
          sortord: "1",
          value: "预估交付日期",
          title: "预估交付日期",
        },
        {
          is_show: true,
          key: "delivery_date",
          sortord: "1",
          value: "操作",
          title: "操作",
        },
      ],
      tableColumns: [
        {
          title: "自序",
          align: "center",
          minWidth: 100,
          type: "index",
          key: "index",
        },
        {
          title: "ID",
          align: "center",
          width: 120,
          key: "id",
        },
        {
          title: "辅助信息确认",
          align: "center",
          width: 130,
          key: "auxiliary_information",
          render: (h, params) => {
            return h("div", [
              h("Checkbox", {
                props: {
                  value: params.row.auxiliary_information == 0 ? true : false,
                  disabled: true,
                },
              }),
            ]);
          },
        },
        {
          title: "本分厂",
          align: "center",
          width: 120,
          key: "factory",
        },
        {
          title: "下分厂",
          align: "center",
          width: 120,
          key: "theFactory",
        },
        {
          title: "单据编号",
          align: "center",
          width: 120,
          key: "receiptNumber",
        },
        {
          title: "当前工序",
          align: "center",
          width: 100,
          key: "current_process",
        },
        {
          title: "处理方式",
          align: "center",
          width: 100,
          key: "process_mode",
        },
        {
          title: "单据状态",
          align: "center",
          width: 100,
          key: "documents_state",
        },
        {
          title: "订单编号",
          align: "center",
          width: 100,
          key: "order_no",
        },
        {
          title: "客户名称",
          align: "center",
          width: 100,
          key: "customer_name",
        },
        {
          title: "项目名称",
          align: "center",
          width: 100,
          key: "project_name",
        },
        {
          title: "报表日期",
          align: "center",
          width: 120,
          key: "reportDate",
          render: (h, params) => {
            const { row } = params;
            return h("span", {}, this.func.replaceDateNoHMS(row.reportDate));
          },
        },
        {
          title: "班次",
          align: "center",
          width: 100,
          key: "classes",
        },
        {
          title: "流程卡号",
          align: "center",
          width: 100,
          key: "card_number",
        },
        {
          title: "制单员",
          align: "center",
          width: 100,
          key: "making_part",
        },
        {
          title: "制单日期",
          align: "center",
          width: 80,
          key: "documentationDate",
          render: (h, params) => {
            const { row } = params;
            return h(
              "span",
              {},
              this.func.replaceDateNoHMS(row.documentationDate)
            );
          },
        },
        {
          title: "审核人",
          align: "center",
          width: 100,
          key: "auditor",
        },
        {
          title: "审核日期",
          align: "center",
          width: 120,
          key: "approvalDate",
          render: (h, params) => {
            const { row } = params;
            return h("span", {}, this.func.replaceDateNoHMS(row.approvalDate));
          },
        },
        {
          title: "班组",
          align: "center",
          width: 100,
          key: "team_group",
        },
        {
          title: "设备",
          align: "center",
          width: 90,

          key: "equipment",
        },
        {
          title: "总数量",
          align: "center",
          width: 100,
          key: "total",
        },
        {
          title: "打印次数",
          align: "center",
          width: 100,
          key: "printTime",
        },
        {
          title: "备注",
          align: "center",
          minWidth: 100,
          key: "remark",
        },
        {
          title: "审核后备注",
          align: "center",
          width: 120,
          key: "remarks_after_audit",
        },
        {
          title: "送货地址",
          align: "center",
          minWidth: 100,
          key: "deliveryAddress",
        },
        {
          title: "库存备注",
          align: "center",
          minWidth: 100,
          key: "inventory_note",
        },
        {
          title: "操作",
          align: "center",
          minWidth: 100,
          slot: "set",
        },
      ],
      tableModalColumns: [
        {
          type: "selection",
          width: 55,
          align: "center",
        },
        {
          title: "字段名",
          align: "center",
          key: "value",
          minWidth: 100,
        },
        {
          title: "展示名称",
          align: "center",
          key: "title",
          minWidth: 100,
          slot:"screenTitle",
        },
      ],
      pointList: [
        {
          value: "1",
          label: "升序",
        },
        {
          value: "2",
          label: "降序",
        },
      ],
      newTableColumns: [],
      formModalColumns: [
        {
          type: "selection",
          width: 55,
          align: "center",
        },
        {
          title: "全部字段",
          align: "center",
          key: "value",
          minWidth: 100,
        },
        {
          title: "展示名称",
          align: "center",
          key: "title",
          minWidth: 100,
          slot:"title",
        },
        {
          title: "排序方式",
          align: "center",
          key: "sortord",
          minWidth: 100,
          slot:"sortord",
        },
        {
          title: "排序优先级",
          align: "center",
          key: "priority",
          minWidth: 100,
          render: (h, params) => {
            return h(
              "Select",
              {
                props: {
                  value: params.row.priority,
                },
                on: {
                  "on-change": (event) => {
                    this.formModalColumns[params.index][params.column.key] =
                      event; //获取编辑行的inde和编辑字段名，对表格数据进行重新赋值
                  },
                },
              },
              this.pointList.map(function (type) {
                return h(
                  "Option",
                  {
                    props: {
                      value: type.value,
                      key: type.label,
                    },
                  },
                  type.label
                );
              })
            );
          },
        },
      ],
      checkedList: [], //筛选项选择的
      checkedListHeader: [], //表头选择的
    };
  },
  mounted() {
    this.tableData = [
      {
        id: 1,
        size: 0,
        auxiliary_information: 0, //工艺
        factory: "本分厂", // 分箱
        theFactory: "下分厂", //已下达
        receiptNumber: "单据编号", //流程卡
        current_process: "当前工序", //入库
        process_mode: "处理方式", //发货
        documents_state: "单据状态", //收款
        order_no: "订单编号", // 套料
        customer_name: "客户名称", //价格审核
        project_name: "项目名称", // 外协
        reportDate: "1653527527",
        classes: "班次",
        making_part: "制单员", // 0 未审核 1 已审核
        documentationDate: "制单日期",
        auditor: "审核人",
        approvalDate: "1653527527",
        team_group: "班组",
        equipment: "设备",
        total: "总数量",
        printTime: "打印次数",
        remark: "备注",
        remarks_after_audit: "审核后备注",
        deliveryAddress: "库存备注", //0 普通订单
      },
    ];
    this.data();
  },
  methods: {
    selectAll(row){
      console.log(row,"这是row");
    },
    data() {
      this.newTableColumns = [
        {
          title: "自序",
          align: "center",
          minWidth: 100,
          ifShow: true,
          sort: 0,
          type: "index",
          key: "index",
        },
        {
          title: "id",
          align: "center",
          minWidth: 100,
          key: "id",
          ifShow: true,
          sort: 0,
        },
        {
          title: "辅助信息确认",
          align: "center",
          width: 130,
          sort: 1,
          ifShow: true,
          key: "auxiliary_information",
        },
        {
          title: "本分厂",
          align: "center",
          width: 80,
          ifShow: true,
          sort: 2,
          key: "factory",
        },
        {
          title: "下分厂",
          align: "center",
          width: 80,
          sort: 2,
          ifShow: true,
          key: "theFactory",
        },
        {
          title: "单据编号",
          align: "center",
          width: 90,
          ifShow: true,
          sort: 2,
          key: "receiptNumber",
        },
        {
          title: "当前工序",
          align: "center",
          sort: 2,
          ifShow: true,
          width: 90,
          key: "current_process",
        },
        {
          title: "处理方式",
          align: "center",
          width: 80,
          sort: 2,
          ifShow: true,
          key: "process_mode",
        },
        {
          title: "单据状态",
          align: "center",
          width: 80,
          sort: 2,
          ifShow: true,
          key: "documents_state",
        },
        {
          title: "订单编号",
          align: "center",
          width: 90,
          sort: 2,
          key: "order_no",
          ifShow: true,
        },
        {
          title: "客户名称",
          align: "center",
          width: 90,
          sort: 2,
          key: "customer_name",
          ifShow: true,
        },
        {
          title: "项目名称",
          align: "center",
          width: 100,
          sort: 2,
          key: "project_name",
          ifShow: true,
        },
        {
          title: "报表日期",
          align: "center",
          width: 120,
          sort: 2,
          key: "reportDate",
          ifShow: true,
        },
        {
          title: "班次",
          align: "center",
          minWidth: 100,
          key: "classes",
          sort: 2,
          ifShow: true,
        },
        {
          title: "流程卡号",
          align: "center",
          minWidth: 100,
          key: "card_number",
          sort: 6,
          ifShow: true,
        },
        {
          title: "制单员",
          align: "center",
          sort: 2,
          ifShow: true,
          minWidth: 100,
          key: "making_part",
        },
        {
          title: "审核人",
          sort: 2,
          align: "center",
          minWidth: 100,
          ifShow: true,
          key: "auditor",
        },
        {
          title: "审核日期",
          sort: 2,
          align: "center",
          minWidth: 120,
          ifShow: true,
          key: "approvalDate",
        },
        {
          title: "班组",
          align: "center",
          minWidth: 100,
          key: "team_group",
          ifShow: true,
          sort: 2,
        },
        {
          title: "设备",
          align: "center",
          minWidth: 100,
          key: "equipment",
          ifShow: true,
          sort: 2,
        },
        {
          title: "总数量",
          align: "center",
          minWidth: 100,
          key: "total",
          ifShow: true,
          sort: 2,
        },
        {
          title: "打印次数",
          align: "center",
          minWidth: 100,
          key: "printTime",
          ifShow: true,
          sort: 2,
        },
        {
          title: "备注",
          align: "center",
          minWidth: 100,
          key: "remark",
          ifShow: true,
          sort: 2,
        },
        {
          title: "审核后备注",
          align: "center",
          minWidth: 120,
          key: "remarks_after_audit",
          ifShow: true,
          sort: 2,
        },
        {
          title: "送货地址",
          align: "center",
          minWidth: 100,
          ifShow: true,
          sort: 2,
          key: "deliveryAddress",
        },
        {
          title: "库存备注",
          align: "center",
          minWidth: 100,
          key: "inventory_note",
          ifShow: true,
          sort: 2,
        },
        {
          title: "操作",
          align: "center",
          ifShow: true,
          sort: 9,
          minWidth: 100,
          slot: "set",
        },
      ];
      let arr = [];
      this.tableColumns.forEach((e) => {
        this.newTableColumns.forEach((a) => {
          if (e.key == a.key) {
            if (a.ifShow == true) {
              arr.push(e);
            }
          }
        });
      });
      this.tableColumns = arr;
      this.tableColumns.sort((a, b) => {
        return a.sort - b.sort;
      });
    },
    change(data) {
      this.showModal = data;
    },
    //点击栏目设置按钮
    showModalTrue() {
      this.showModal = true;
      this.$refs.child.showModalTrue()
    },
    changeSize() {},
    changePage() {},
    handleModalOk(row1, row2) {
      console.log(row1,"这个是checkedListHeader");
      console.log(row2,"这是checkedList");
    },
    searchModalOk() {
      console.log(this.formItem, "这是form");
      console.log("查找");
    },
    select(e) {
      this.selectData = e;
    },
    delSelectData(type) {
      this.$router.push({
        path: "/cms/godownEntry/particulars",
        query: { type },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.form_item {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
}
.content_body_page {
  text-align: center;
}
.content {
  height: 90%;
  overflow: auto;
}
.content_body_page {
  text-align: center;
  margin-top: 20px;
}
</style>