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

<template>
  <div>
    <FullPage
      :title="$route.query.type == 2 ? '发货详情' : '包装详情'"
      :list="setList"
      @init="init"
      :logList="logList"
      :loading="loading"
      @searchData="init"
      @changePage="changePage"
      @changeSize="changeSize"
      @selectTable="selectTable"
      :tableColums="tableColums"
      :tableData="tableData"
      :pageIndex="pageIndex"
      :total="total"
    >
      <div slot="titleButton">
        <Button
          v-if="$route.query.type == 2"
          @click="handleOrderReturn(selects)"
          type="primary"
          style="margin-right:10px;"
          >批量退回</Button
        >
        <Button @click="back" type="primary" ghost style="margin-right:10px;"
          >返回</Button
        >
        <Button
          v-if="$route.query.type == 2"
          @click="exportData"
          type="warning"
          ghost
          style="margin-right:10px;"
          >待出库清单打印</Button
        >
        <Button
          v-if="$route.query.type == 4"
          @click="confirmSuccess(selects)"
          type="success"
          ghost
          style="margin-right:10px;"
          >批量包装完成</Button
        >
        <Button
          v-if="$route.query.type == 4"
          type="warning"
          ghost
          @click="outStock(selects_out)"
          >批量发货指令</Button
        >
        <Button
          v-if="$route.query.type == 2"
          @click="outShip(selects, 1)"
          type="success"
          ghost
          style="margin-right:10px;"
          >批量确认出库</Button
        >
        <Button
          v-if="$route.query.type == 2"
          @click="outShip(selects, 2)"
          type="success"
          ghost
          style="margin-right:10px;"
          >批量运输</Button
        >
      </div>
      <template slot-scope="{ row }" slot="set">
        <!-- <a
          v-if="$route.query.type == 4"
          class="map-margin"
          :disabled="row.order_in_no"
          @click="confirmSuccess(row)"
          >确认入库</a
        >
        <a
          v-if="$route.query.type == 4"
          class="map-margin"
          :disabled="row.in_out_value == 1"
          @click="outStock(row)"
          >出库</a
        >
        <a
          v-if="$route.query.type == 2 && !row.in_out_value"
          class="map-margin"
          @click="outShip(row, 1)"
          >确认出库</a
        >
        <a
          v-if="$route.query.type == 2 && row.transport_no"
          class="map-margin"
          @click="row.sub_state != 3 ? outShip(row, 2) : ''"
          >{{ row.sub_state != 3 ? "运输" : "" }}</a
        > -->
         <a 
          class="map-margin"
          v-if="row.in_out_value !== 1"
          @click="outShip(row,3)"
          >包装完成</a
        >
         <a
          class="map-margin"
          @click="row.sub_state != 3 ? outShip(row, 2) : ''"
          >{{ row.sub_state != 3 ? "发货指令" : "" }}</a
        >
      </template>
      <Modal
        class-name="vertical-center-modal"
        width="400"
        title="确认出库"
        v-model="showStock"
        @on-ok="confirmOutStock"
      >
        <Form :label-width="100">
          <FormItem label="选择人员">
            <Select clearable v-model="info.user_id">
              <Option
                v-for="item of users"
                :key="item.id"
                :value="item.id"
                :label="item.nickname"
              ></Option>
            </Select>
          </FormItem>

          <FormItem label="出库日期">
            <DatePicker
              :options="options"
              v-model="time"
              clearable
              type="date"
              placeholder="请选择日期"
            ></DatePicker>
          </FormItem>
          <FormItem label="点工单形式">
            <RadioGroup v-model="info.work_type">
              <Radio :label="1">是</Radio>
              <Radio :label="2">否</Radio>
            </RadioGroup>
          </FormItem>
          <FormItem label="日薪" v-if="info.work_type == 1">
            <Input v-model="info.user_salary">
              <span slot="append">元</span>
            </Input>
          </FormItem>
        </Form>
      </Modal>
    </FullPage>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  data() {
    return {
      list: [
        {
          title: "楼幢",
          name: "Select",
          multiple: true,
          filterable: true,
          serverName: "house",
          placeholder: "请选择楼幢",
          value: "",
          option: [{ label: 1, value: 1 }],
        },
        {
          title: "单元",
          name: "Select",
          multiple: true,
          filterable: true,
          serverName: "unit",
          placeholder: "请选择单元",
          value: "",
          option: [{ label: 1, value: 1 }],
        },
        {
          title: "楼层",
          name: "Select",
          multiple: true,
          filterable: true,
          serverName: "layer",
          placeholder: "请选择楼层",
          value: "",
          option: [{ label: 1, value: 1 }],
        },
        {
          title: "房间",
          name: "Select",
          multiple: true,
          filterable: true,
          serverName: "number_detail",
          placeholder: "请选择房间",
          value: "",
          option: [{ label: 1, value: 1 }],
        },
        {
          title: "产品",
          name: "Select",
          serverName: "product",
          placeholder: "请选择产品",
          value: "",
          option: [],
        },
         {
          title: "图号",
          name: "Select",
          serverName: "url_number",
          placeholder: "请选择产品",
          value: "",
          option: [],
        },
        {
          title: "部件",
          name: "Select",
          serverName: "part",
          placeholder: "请选择部件",
          value: "",
          option: [],
        },
        {
          title: "入库状态",
          name: "Select",
          serverName: "sub_state",
          placeholder: "入库状态",
          value: "",
          option: [
            { label: "未入库", value: 2 },
            { label: "已入库", value: 3 },
          ],
        },
        {
          title: "出库状态",
          name: "Select",
          serverName: "in_out_value",
          placeholder: "出库状态",
          value: "",
          option: [
            { label: "已出库", value: 1 },
            { label: "未出库", value: 0 },
          ],
        },
      ],
      logList: [],
      tableColums: [
        { type: "selection", align: "center", width: "100", fixed: "left" },
        {
          title: "房号",
          align: "center",
          minWidth: 100,
          key: "number_detail",
          render: (h, params) => {
            const { row } = params;
            return h(
              "span",
              `${row.house}-${row.unit}-${row.layer}-${row.number_detail}`
            );
          },
        },
        {
          title: "产品名称",
          align: "center",
          minWidth: 200,
          key: "product_title",
        },
        { title: "图号", align: "center", minWidth: 200, key: "url_number" },
        { title: "部件", align: "center", minWidth: 200, key: "part_title" },
        {
          title: "零部件",
          align: "center",
          minWidth: 200,
          key: "part_detail_title",
        },
        this.$route.query.type == 4
          ? {
              title: "包装码",
              align: "center",
              minWidth: 200,
              key: "order_in_no",
            }
          : {
              title: "运输单号",
              align: "center",
              minWidth: 200,
              key: "transport_no",
            },
        { title: "单位", align: "center", minWidth: 100, key: "company" },
        {
          title: "状态",
          align: "center",
          minWidth: 200,
          key: "",
          render: (h, params) =>
            h(
              "span",
              {},
              params.row.sub_state == 0
                ? "未指派"
                : params.row.sub_state == 1
                ? "可以派工"
                : params.row.sub_state == 2
                ? "已派工"
                : "已完成"
            ),
        },
        {
          title: this.$route.query.type == 2 ? "确认出库状态" : "出库状态",
          align: "center",
          minWidth: 200,
          render: (h, params) =>
            h(
              "span",
              params.row.in_out_value == 1
                ? this.$route.query.type == 2
                  ? "已确认"
                  : "已出库"
                : this.$route.query.type == 2
                ? "未确认"
                : "未出库"
            ),
        },
        { title: "芯片编号", align: "center", minWidth: 200, key: "chip" },
        this.$route.query.type == 2
          ? {
              title: "运输状态",
              align: "center",
              minWidth: 200,
              render: (h, params) =>
                h(
                  "span",
                  params.row.transportation_value == 1 ? "已确认" : "未确认"
                ),
            }
          : {},
        {
          title: "操作",
          align: "center",
          width: "150",
          fixed: "right",
          slot: "set",
        },
      ],
      tableData: [],
      pageIndex: 1,
      total: 0,
      pageSize: 10,
      loading: false,
      selectedReturnArr:[],
      selects: [],
      selects_out: [],
      showStock: false,
      info: {
        user_id: "",
        work_type: 2,
        order_in_no: "",
        start_time: "",
        end_time: "",
        user_salary: "",
      },
      users: [],
      time: "",
      shipArray: [],
      options: {
        disabledDate(date) {
          return date && date.valueOf() < Date.now() - 86400000;
        },
      },
    };
  },

  computed: {
    setList() {
      const { type } = this.$route.query;
      if (type == 2) {
        const result = [
          {
            title: "运输单号",
            name: "Input",
            serverName: "transport_no",
            value: "",
            placeholder: "运输单号",
          },
          {
            title: "确认出库状态",
            name: "Select",
            serverName: "in_out_value",
            value: "",
            option: [
              { label: "未确认", value: 0 },
              { label: "已确认", value: 1 },
            ],
          },
          {
            title: "确认运输状态",
            name: "Select",
            serverName: "transportation_value",
            value: "",
            option: [
              { label: "未确认", value: 0 },
              { label: "已确认", value: 1 },
            ],
          },
        ];
        this.list = this.list.concat(result);
      }
      return this.list;
    },
  },
  created() {
    this.getOptions();
  },

  methods: {
    init(row) {
      this.axios("/api/user").then((res) => (this.users = res.data.data));
      this.pageIndex = 1;
      row.page_index = this.pageIndex;
      row.page_size = this.pageSize;
      if (this.func.isType(row.house) == "Array") {
        row.house = row.house.join(",");
      }
      if (this.func.isType(row.unit) == "Array") {
        row.unit = row.unit.join(",");
      }
      if (this.func.isType(row.layer) == "Array") {
        row.layer = row.layer.join(",");
      }
      if (this.func.isType(row.number_detail) == "Array") {
        row.number_detail = row.number_detail.join(",");
      }
      if (this.func.isType(row.product) == "Array") {
        row.product = row.product.join(",");
      }
      if (this.func.isType(row.part) == "Array") {
        row.part = row.part.join(",");
      }
      Object.assign(row, this.$route.query);
      this.proxyObj = row;
      this.getData(row);
    },
    getOptions() {
      this.axios("/api/orders_list_detail", {
        params: { order_no: this.$route.query.order_no ,type:this.$route.query.type},
      }).then((res) => {
        res.data.house.map((v) => {
          v.value = v.house;
          v.label = v.house;
        });
        res.data.unit.map((v) => {
          v.value = v.unit;
          v.label = v.unit;
        });
        res.data.layer.map((v) => {
          v.value = v.layer;
          v.label = v.layer;
        });
        res.data.number_detail.map((v) => {
          v.value = v.number;
          v.label = v.number;
        });
        res.data.product_title.map((v) => {
          (v.value = v.title), (v.label = v.title);
        });
        res.data.part_title.map((v) => {
          (v.value = v.title), (v.label = v.title);
        });
        res.data.url_number.map(v=>{
          (v.value=v.url_number),(v.label = v.url_number);
        })
        this.list[0].option = res.data.house;
        this.list[1].option = res.data.unit;
        this.list[2].option = res.data.layer;
        this.list[3].option = res.data.number_detail;
        this.list[4].option = res.data.product_title;
        this.list[5].option = res.data.url_number;
        this.list[6].option = res.data.part_title;
      });
    },
    getData(row) {
      this.loading = true;
      this.axios("/api/orders_list_detail", { params: row }).then((res) => {
        this.loading = false;
        this.tableData = res.data.data;
        this.logList = res.data.detail;
        this.total = res.data.total || 0;
      });
    },
    changePage(e) {
      this.pageIndex = e;
      this.proxyObj.page_index = e;
      this.getData(this.proxyObj);
    },
    changeSize(e) {
      this.pageSize = e;
      this.proxyObj.page_size = this.pageSize;
      this.getData(this.proxyObj);
    },
    back() {
      this.$router.go(-1);
    },
    handleOrderReturn(row) {
      let params = [];
      if (!this.selectedReturnArr || this.selectedReturnArr.length < 1) {
        return this.$Message.error("请至少选择一项");
      }
      params = this.selectedReturnArr.map((v) => {
        return v.chip;
      });
      this.$Modal.confirm({
        title: "确认退回？",
        content: "此操作无法恢复，请确认！",
        onOk: () => {
          this.axios({
            method: "post",
            url: "/api/transport_callback",
            data: {
              tag: params,
            },
          }).then((res) => {
            if (res.code == 200) {
              this.$Message.success(res.msg);
              this.getData(this.proxyObj);
            }
          });
        },
        onCancel: () => {},
      });
    },
    selectTable(row) {
      this.selectedReturnArr = row
      let result = [],
        outResult = [];
      if (this.$route.query.type == 2) {
        row.map((v) => {
          v.id ? result.push(v.id) : "";
          v.order_in_no ? outResult.push(v.order_in_no) : "";
        });
      } else {
        row.map((v) => {
          v.orders_procedure_id ? result.push(v.orders_procedure_id) : "";
          v.order_in_no ? outResult.push(v.order_in_no) : "";
        });
      }
      this.selects = result || [];
      this.selects_out = outResult || [];
    },
    confirmSuccess(row) {
      let params = "";
      if (!row || row.length < 1) {
        return this.$Message.error("请至少选择一项");
      }
      params = Array.isArray(row) ? row.join(",") : row.orders_procedure_id;
      this.confirmDelete({
        title: "确认入库",
        content: "确认入库？",
        type: "primary",
        then: () => {
          this.axios
            .post("/api/orders_in", { orders_procedure_id: params })
            .then((res) => {
              if (res.code == 200) {
                this.$Message.success(res.msg);
                this.getData(this.proxyObj);
              }
            });
        },
        cancel: () => {
          this.$Message.warning("您取消了确认入库操作");
        },
      });
    },
    outStock(row) {
      console.log("row :>> ", row);
      if (!row || row.length < 1) {
        return this.$Message.error("您未选择或者未确认入库");
      }
      this.info.order_in_no = Array.isArray(row)
        ? row.join(",")
        : row.order_in_no;
      this.showStock = true;
    },
    confirmOutStock() {
      if (this.time) {
        this.info.start_time = new Date(this.time)
          .toLocaleDateString()
          .replace(/\//g, "-");
        this.info.end_time = new Date(this.time)
          .toLocaleDateString()
          .replace(/\//g, "-");
      }

      this.axios.post("/api/orders_out", this.info).then((res) => {
        if (res.code == 200) {
          this.$Message.success(res.msg);
          this.getData(this.proxyObj);
          // setTimeout(()=>this.back(),500)
        }
      });
    },

    outShip(row, type) {
      //type 1出库  2运输
      if(type == 3){
             this.confirmDelete({
        title:  "确认出库" ,
        content: "确认出库么？" ,
        type: "primary",
         then: (e) => {
          this.axios.post('/api/orders_transport', {transport_no:row.transport_no}).then((res) => {
            if (res.code == 200) {
              this.$Message.success(res.msg);
              this.getData(this.proxyObj);
            }
          });
        },
        cancel: (e) => {},
      });
      }else{
      if (!row || row.length < 1) {
        return this.$Message.error("请至少选择一项");
      }
      let id = Array.isArray(row) ? row.join(",") : row.id;
      let post_url =
        type == 1 ? "/api/orders_transport" : "/api/orders_transport_confirm";
      let params = {};
      params.id = id;
      this.confirmDelete({
        title: type == 1 ? "确认出库" : "确认运输",
        content: type == 1 ? "确认出库么？" : "确认运输么",
        type: "primary",
        then: (e) => {
          this.axios.post(post_url, params).then((res) => {
            if (res.code == 200) {
              this.$Message.success(res.msg);
              this.getData(this.proxyObj);
            }
          });
        },
        cancel: (e) => {},
      });}
    },
    async exportData() {
      const res = await this.axios("/api/orders_list_detail", {
        params: { ...this.proxyObj, sub_type: "excel" },
      });
      if (res.code == 200) {
        let url = `${this.$store.state.ip}/api/storage/${res.data.file}`;
        location.href = url;
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>