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

<template>
  <div>
    <FullPage
      title="查看详情"
      :list="list"
      @init="init"
      @searchData="search"
      :logList="logList"
      @selectTable="selectTable"
      @changePage="changePage"
      @changeSize="changeSize"
      :tableColums="tableColums"
      :tableData="tableData"
      :pageIndex="pageIndex"
      :pageSize="pageSize"
      :total="total"
      @changeSelected="changeSelected"
    >
      <div slot="titleButton">
        <Button @click="back" style="margin-right:10px;">返回</Button>
        <Button
        v-if="export_state"
          @click="leadingOut"
          type="primary"
          style="margin-right:10px;"
          ghost
          >导出</Button
        >
        <Button
          @click="batchPrint"
          type="primary"
          style="margin-right:10px;"
          ghost
          >打印派工单</Button
        >
        <Button
          @click="workoveragain(selectIds, 2)"
          type="error"
          style="margin-right:10px;"
          ghost
          >批量返工</Button
        >
        <Button @click="finish(selectIds)" type="success" ghost
          >批量完成</Button
        >
      </div>

      <template slot="set" slot-scope="{ row }">
        <div>
          <a
            v-if="row.sub_state < 3"
            class="map-margin"
            style="color:#32C800"
            @click="finish(row)"
            >完成</a
          >
          <a
            class="map-margin"
            style="color:#ed4014"
            v-if="row.sub_state == 3"
            @click="workoveragain(row, 1)"
            >返工</a
          >
          <a
           class="map-margin"
        v-if="NC_state"
            @click="download"
          >
            NC下载
          </a>
        </div>
      </template>
      <div slot="text-list" class="nickname">
        <Button
          type="primary"
          style="margin-left:10px;"
          ghost
          size="small"
          @click="updata"
          >修改班组</Button
        >
        <Select v-model="nickname_list" style="width:160px" size="small">
          <Option
            v-for="item in username_list"
            :value="item.id"
            :key="item.value"
            >{{ item.nickname }}</Option
          >
        </Select>
      </div>
    </FullPage>
    <div>
      <Modal
        title="返工"
        v-model="modal8"
        :mask-closable="false"
        width="800"
        @on-ok="onOk"
      >
        <Form :model="form_modal" inline :label-width="80">
          <div v-for="(item, index) in form_modal.return_list" :key="index">
            <FormItem :label="'返工工序' + (index + 1) + ':'">
              <Select v-model="item.procedure_id" style="width:180px">
                <Option
                  :value="item.id"
                  v-for="item in form_modal.procedure"
                  :key="item.id"
                  >{{ item.title }}</Option
                >
              </Select>
            </FormItem>
            <FormItem label="返工班组:">
              <Select v-model="item.user_id" style="width:180px">
                <Option
                  :value="item.id"
                  v-for="(item, index) in form_modal.nickname"
                  :key="index"
                  >{{ item.nickname }}</Option
                >
              </Select>
            </FormItem>
            <FormItem>
              <Icon
                @click="add()"
                style="'margin:0 10px"
                color="#32C800"
                size="20"
                type="ios-add-circle"
              />
              <Icon
                v-show="form_modal.return_list.length != 1"
                @click="remove(index)"
                style="'margin:0 10px"
                color="#FF5E5C"
                size="20"
                type="ios-remove-circle"
              />
            </FormItem>
          </div>
          <FormItem label="返工原因:">
            <Input
              v-model="form_modal.rework_reason"
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 5 }"
              placeholder="请输入返工原因"
            />
          </FormItem>
          <!-- <FormItem>
 <Select v-model="formItem.select">
                <Option value="beijing">New York</Option>
                <Option value="shanghai">London</Option>
                <Option value="shenzhen">Sydney</Option>
            </Select>
            </FormItem>
             <FormItem>
 <Select v-model="formItem.select">
                <Option value="beijing">New York</Option>
                <Option value="shanghai">London</Option>
                <Option value="shenzhen">Sydney</Option>
            </Select>
            </FormItem> -->
        </Form>
      </Modal>
      <Modal
       title="设置班组"
        v-model="finish_modal"
        width="400"
      
        @on-ok="finish_Ok">
        <Form>
          <FormItem label="完成班组:">
              <Select v-model="finish_nickname" style="width:180px">
                <Option
                  :value="item.id"
                  v-for="(item, index) in username_list"
                  :key="index"
                  >{{ item.nickname }}</Option
                >
              </Select>
            </FormItem>
        </Form>
      </Modal>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      select_nickname:'',
      finish_modal:false,
      finish_nickname:'',
      formData:{
           house:'',
           unit:'',
           layer:'',
           number_detail:'',
           product_title:'',
           url_number:'',
           part_title:'',
           label:'',
           basic_title:'',
           procedure_title:'',
           state:''
      },
      form_modal: {
        return_list: [
          {
            procedure_id: "",
            user_id: "",
          },
        ],
        // nickname:[],
        // user_id:'',
        rework_reason: "",
        tag: [],
        procedure: [],
      },
      type: 1,
      logList: [{ title: "系统单号", value: "10998765" }],
      tableColums: [
        { type: "selection", fixed: "left", width: "90", align: "center" },
        {
          title: "房间号",
          align: "center",
          key: "number_detail",
          minWidth: 150,
          render: (h, params) => {
            const { row } = params;
            return h(
              "span",
              `${row.house}-${row.unit}-${row.layer}-${row.number_detail}`
            );
          },
        },
        { title: "产品", align: "center", minWidth: 150, key: "product_title" },
        { title: "图号", align: "center", minWidth: 150, key: "url_number" },
        { title: "位置", align: "center", minWidth: 150, key: "position" },
        { title: "部件", align: "center", minWidth: 150, key: "part_title" },
        {
          title: "零部件",
          align: "center",
          minWidth: 150,
          key: "part_detail_title",
        },
        {
          title: "部件是否贴标签",
          align: "center",
          minWidth: 150,
          render: (h, params) =>
            h("span", {}, params.row.label == "1" ? "是" : "否"),
        },
        // {title:'贴标签零部件',align:'center',minWidth:150,key:'sub_part'},
        {
          title: "工序分类",
          align: "center",
          minWidth: 150,
          key: "basic_title",
        },
        {
          title: "工序",
          align: "center",
          minWidth: 150,
          key: "procedure_title",
        },
        { title: "派工班组", align: "center", minWidth: 150, key: "nickname" },
        { title: "完工班组", align: "center", minWidth: 150, key: "finish_nickname" },
        { title: "测量尺寸", align: "center", minWidth: 150, key: "measure" },
        { title: "单位", align: "center", minWidth: 100, key: "company" },
        { title: "芯片编号", align: "center", minWidth: 150, key: "chip" },
        {
          title: "完工状态",
          align: "center",
          minWidth: 100,
          render: (h, params) =>
            h("span", {}, params.row.sub_state == 3 ? "已完工" : "未完工"),
        },
        {
          title: "操作",
          align: "center",
          slot: "set",
          fixed: "right",
          width: "150",
        },
      ],
      nickname_list: "",
      username_list: [],
      export_state:false,
      NC_state:false,
      tableData: [],
      pageIndex: 1,
      pageSize: 10,
      total: 0,
      selectIds: [],
      tag: [],
      procedure_id: [],
      state: [],
      modal8: false,
      proxyObj: { ...this.$route.query },
      house_list: [], //工序分类
      unit_list: [], //工序
      room_list: [
        { label: "已完工", value: "1" },
        { label: "未完工", value: "0" },
      ], //完工状态
      house: [], //楼幢
      unit: [], //单元
      storey: [], //楼层
      room_number: [], //房号
      produce: [], //产品
      url_number:[],//图号
      parts: [], //部件
      tip_state: [
        { label: "是", value: "1" },
        { label: "否", value: "0" },
      ], //部件时候贴标签
    };
  },
  created(){
        this.axios.get('/api/basics_config_list').then(res=>{
           res.data.forEach(element => {
             if(element.id == 3){
               element.content.forEach(v=>{
                 if(v.title === '详情导出'){
                         this.export_state = v.state;
                 }else if(v.title === 'NC下载'){
                          this.NC_state = v.state;
                 }
               })
             }
           });
        })
  },
  computed: {
    list() {
      const array = [
        {
          title: "楼幢",
          filterable: true,
          name: "Select",
          value: "",
          change:true,
          serverName: "house",
          optionName: "house",
          optionValue: "house",
          option: this.house,
        },
        {
          title: "单元",
          filterable: true,
          name: "Select",
          value: "",
          change:true,
          serverName: "unit",
          optionName: "unit",
          optionValue: "unit",
          option: this.unit,
        },
        {
          title: "楼层",
          filterable: true,
          name: "Select",
          value: "",
          change:true,
          serverName: "layer",
          optionName: "layer",
          optionValue: "layer",
          option: this.storey,
        },
        {
          title: "房号",
          filterable: true,
          name: "Select",
          value: "",
          change:true,
          serverName: "number_detail",
          optionName: "number",
          optionValue: "number",
          option: this.room_number,
        },
        {
          title: "产品",
          filterable: true,
          name: "Select",
          value: "",
          change:true,
          serverName: "product_title",
          optionName: "title",
          optionValue: "title",
          option: this.produce,
        },
         {
          title: "图号",
          filterable: true,
          name: "Select",
          value: "",
          change:true,
          serverName: "url_number",
          optionName: "url_number",
          optionValue: "url_number",
          option: this.url_number,
        },
        {
          title: "部件",
          filterable: true,
          name: "Select",
          value: "",
          change:true,
          serverName: "part_title",
          optionName: "title",
          optionValue: "title",
          option: this.parts,
        },
        {
          title: "部件是否贴标签",
          filterable: true,
          name: "Select",
          value: "",
          change:true,
          serverName: "label",
          option: this.tip_state,
        },
        {
          title: "工序分类",
          filterable: true,
          name: "Select",
          value: "",
          change:true,
          serverName: "basic_title",
          optionName: "title",
          optionValue: "id",
          option: this.house_list,
        },
        {
          title: "工序",
          filterable: true,
          name: "Select",
          value: "",
          change:true,
          serverName: "procedure_title",
          optionName: "title",
          optionValue: "id",
          option: this.unit_list,
        },
        {
          title: "完工状态",
          filterable: true,
          name: "Select",
          value: "",
          change:true,
          serverName: "state",
          option: this.room_list,
        },
      ];
      return array;
    },
  },
  mounted() {
      this.axios("/api/orders_dispatch_detail", 
      { params: {page_size:this.pageSize,page_index:this.pageIndex,...this.$route.query} }).then((res) => {
        if (res.code == 200) {
          console.log(res);
          this.tableData = res.data.list;
          this.logList = res.data.detail;
          this.total = res.data.total;
          this.produce_id = res.data.produce_id;
          this.house = res.data.house;
          this.unit = res.data.unit;
          this.storey = res.data.layer;
          this.room_number = res.data.number_detail;
          this.produce = res.data.product_title;
          this.url_number = res.data.url_number;
          this.parts = res.data.part_title;
          this.house_list = res.data.basic_title;
          this.unit_list = res.data.procedure_title;
        }
      });
    this.axios("/api/employee_list").then((res) => {
      console.log(res);
      this.username_list = res.data;
    });
  },
  methods: {
    finish_Ok(){
      if(!this.finish_nickname){
        this.$Message.warning('请选择班组')
      }else{
           this.postData({id:this.select_nickname,...this.$route.query,team_id:this.finish_nickname},1)
      }
       
    },
    download(){
      this.axios.get('/api/nc_export').then(res=>{
           if (res.code == 200) {
        let url = `${this.$store.state.ip}/${res.data.file}`;
        location.href = url;
      }
      })
    },
    leadingOut(){
         this.axios.get('/api/dispatch_produce_export',{params:{...this.$route.query}}).then(res=>{
           if (res.code == 200) {
        let url = `${this.$store.state.ip}/api/storage/${res.data.file}`;
        location.href = url;
      }
         })
    },
    changeSelected(row){
         this.formData.house = row[0].value;
          this.formData.unit = row[1].value;
          this.formData. layer = row[2].value;
          this.formData. number_detail = row[3].value;
           this.formData.product_title = row[4].value;
           this.formData.url_number = row[5].value;
           this.formData.part_title = row[6].value;
           this.formData.label = row[7].value;
           this.formData.basic_title = row[8].value;
           this.formData.procedure_title = row[9].value;
           this.formData.state = row[10].value;
    },
    updata() {
      if (this.selectIds == "") {
        this.$Message.warning("请选择产品！");
      } else {
        this.axios.post("/api/orders_dispatch_username", {
          id: this.selectIds,
          user_id: this.nickname_list,
          produce_id: this.$route.query.produce_id,
          order_no: this.$route.query.order_no,
        });
        this.getData(this.$route.query);
      }
    },
    search(row) {
      row.page_size = this.pageSize;
      row.page_index = this.pageIndex;
      Object.assign(row, this.$route.query);
      this.axios("/api/orders_dispatch_detail", { params: row }).then((res) => {
        if (res.code == 200) {
          console.log(res);
          this.tableData = res.data.list;
          this.logList = res.data.detail;
          this.total = res.data.total;
        }
      });
    },
    init(row) {
      this.pageIndex = 1;
      row.page_size = this.pageSize;
      row.page_index = this.pageIndex;
      Object.assign(row, this.$route.query);
      this.getData(row);
    },
    onOk() {
      this.axios
        .post("/api/orders_plan_cancer", {
          rework_reason: this.form_modal.rework_reason,
          return_list: this.form_modal.return_list,
          tag: this.tag,
          order_no: this.$route.query.order_no,
        })
        .then((res) => {
          if (res.code == 200) {
            this.$Message.success(res.msg);
            this.getData(this.$route.query);
          }
        });
    },
    add() {
      this.form_modal.return_list.push({
        procedure_id: "",
        user_id: "",
      });
    },
    remove(index) {
      this.form_modal.return_list.splice(index, 1);
    },
    workoveragain(row, type) {
      this.form_modal.rework_reason = "";
      let id = [];
      this.modal8 = true;
      this.form_modal.id = [];
      this.form_modal.procedure_title = [];
      console.log(row);
      this.form_modal.user_id = row.user_id;
      this.form_modal.id.push(row.id);
      id.push(row.id);
      switch (type) {
        //返工
        case 1:
          this.tag = [row.chip];
          this.axios.get("/api/employee_list").then((res) => {
            if (res.code == 200) {
              // this.$Message.success(res.msg);
              // this.getData(this.$route.query)
              this.form_modal.nickname = res.data;
            }
          });
          this.axios
            .post("/api/orders_dispatch_procedure", { id })
            .then((res) => {
              if (res.code == 200) {
                // this.$Message.success(res.msg);
                // this.getData(this.$route.query)
                this.form_modal.procedure = res.data;
              }
            });
          break;
        //批量返工
        case 2:
          //若没有选择产品
          if (row.length == 0) {
            this.$Message.warning("请选择产品!");
            this.modal8 = false;
          } else {
            this.form_modal.procedure_title = [];
            //选择了请求班组数据
            this.axios.get("/api/employee_list").then((res) => {
              if (res.code == 200) {
                this.form_modal.nickname = res.data;
              }
            });
            //请求产品数据,此时的row是选择产品id的数组
            this.axios
              .post("/api/orders_dispatch_procedure", { id: row })
              .then((res) => {
                if (res.code == 200) {
                  this.modal8 = true;
                  // this.$Message.success(res.msg);
                  // this.getData(this.$route.query)
                  this.form_modal.procedure = res.data;
                  this.form_modal.user_id = this.tableData[0].user_id;
                  // this.form_modal.procedure_title.push(this.procedure_id[0])
                  this.form_modal.id = row;
                } else {
                }
              });
          }
      }
    },
    back() {
      this.$router.go(-1);
    },
    getData(row) {
      row.page_size = this.pageSize;
      row.page_index = this.pageIndex;
      this.axios("/api/orders_dispatch_detail", { params: row }).then((res) => {
        if (res.code == 200) {
          console.log(res);
          this.tableData = res.data.list;
          this.logList = res.data.detail;
          this.total = res.data.total;
          // this.produce_id = res.data.produce_id;
          // this.house = res.data.house;
          // this.unit = res.data.unit;
          // this.storey = res.data.layer;
          // this.room_number = res.data.number_detail;
          // this.produce = res.data.product_title;
          // this.url_number = res.data.url_number;
          // this.parts = res.data.part_title;
          // this.house_list = res.data.basic_title;
          // this.unit_list = res.data.procedure_title;
        }
      });
    },
    postData(data, type) {
      let url =
        type == 1 ? "/api/orders_dispatch_confirm" : "/api/orders_plan_cancer";
      this.axios.post(url, data).then((res) => {
        if (res.code == 200) {
          this.$Message.success(res.msg);
           let data = {};
      data = {...this.formData,...this.$route.query};
          this.getData(data);
          this.selectIds = [];
        }
      });
    },
    finish(row) {
      if (!row || row.length < 1) {
        return this.$Message.warning("请至少选择一项");
      }
      let str = Array.isArray(row) ? row.join(",") : row.id;
      this.select_nickname = str;
      console.log(this.select_nickname)
     this.finish_modal = true;
    },
    selectTable(e) {
      let result = [];
      let tag = [];
      let procedure_id = [];
      let state = [];
      e.map((v) => {
        result.push(v.id);
        tag.push(v.chip);
        procedure_id.push(v.procedure_id);
        state.push(v.sub_state);
      });
      this.selectIds = result;
      this.tag = tag;
      this.procedure_id = procedure_id;
      this.state = state;
      console.log("this.tag :>> ", this.tag);
    },
    changePage(e) {
      this.pageIndex = e;
      this.proxyObj.page_index = this.pageIndex;
      let data = {};
      data = {...this.formData,...this.proxyObj}
      this.getData(data);
    },
    changeSize(e) {
      this.pageSize = e;
      this.proxyObj.page_size = this.page_size;
       let data = {};
      data = {...this.formData,...this.proxyObj}
      this.getData(data);
    },
    batchPrint() {
      this.confirmForm({
        title: "批量打印派工单",
        forms: [
          {
            name: "Select",
            title: "模板",
            value: "",
            serverName: "template_id",
            placeholder: "请选择模板",
            option: [
              { label: "木工", value: 1 },
              { label: "开料", value: 2 },
              { label: "贴皮", value: 3 },
              { label: "油漆", value: 4 },
              { label: "接、拼板", value: 6 },
            ],
          },
        ],
        then: (result) => {
          this.axios("/api/produce_export", {
            params: { ...result, ...this.$route.query },
          }).then((res) => {
            if (res.code == 200) {
              let url = `${this.$store.state.ip}/api/storage/${res.data.file}`;
              location.href = url;
            }
          });
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.nickname {
  display: flex;
  flex-direction: row-reverse;
  margin-right: 10px;
  margin-bottom: 6px;
}
.log-list {
  display: flex;
  flex-wrap: wrap;
  padding: 10px 0;
}
</style>