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

<template>
    <div>
        <Toptitle title="包装单详情">
            <Button style="margin-right:10px" @click="$router.go(-1)">返回</Button>
            <Button style="margin-right:10px" type="primary">批量包装完成</Button>
            <Button type="primary">批量发货指令</Button>
        </Toptitle>
        <Form style="display:flex;flex-wrap:wrap;margin-top:10px" :label-width='100'>
            <FormItem label='图号：'>
                <Input clearable placeholder="请输入图号" style="width:200px"/>
            </FormItem>
            <FormItem label='产品名称：'>
                <Input clearable placeholder="请输入产品名称" style="width:200px"/>
            </FormItem>
            <FormItem label='产品组件：'>
                <Input clearable placeholder="请输入产品组件" style="width:200px"/>
            </FormItem>
            <FormItem label='房号：'>
                <Input clearable placeholder="请输入房号" style="width:200px"/>
            </FormItem>
            <FormItem label='包装状态：'>
                <Select filterable clearable style="width:200px">
                    <Option label='未包装完成' :value="0"/>
                    <Option label='已包装完成' :value="1"/>
                </Select>
            </FormItem>
            <FormItem label='发货指令状态'>
                <Select filterable clearable style="width:200px">
                    <Option label='未下发货指令' :value="0"/>
                    <Option label='已下发货指令' :value="1"/>
                </Select>
            </FormItem>
            <FormItem label='包装日期：'>
                <DatePicker type='daterange' placeholder='选择日期'></DatePicker>
            </FormItem>
            <FormItem :label-width='40'>
                <Button type="primary" @click="handleSearch">搜索</Button> 
            </FormItem>
        </Form>
        <Table border :data='tableData' :columns='tableColumns' max-height='550' @on-selection-change='handleSelect'>
            <template slot="img" slot-scope="{row}">
                <img v-for="(item,index) in row.url_img" :key="index" :src="$store.state.ip+item" alt="">
            </template>
            <template slot="set" slot-scope="{row}">
                <a @click="goPage(row)" style="margin-right:10px">详情</a>
                <a @click="handleIn(row)" v-show="row.sub_state==2">包装完成</a>
                <a @click="handleOut(row)" v-show="row.sub_state!=2&&row.overdue_state==0">发货指令</a>
            </template>
        </Table>
        <Page
        style="text-align:center;margin-top:10px"
          :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"
        />
         <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 band_list"
                :key="item.id"
                :value="item.id"
                :label="item.nickname"
              ></Option>
            </Select>
          </FormItem>

          <FormItem label="发货日期">
            <DatePicker
              v-model="time"
              clearable
              type="daterange"
              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>
    </div>
</template>
<script>
export default {
    data(){
        return{
            searchData:{
                
            },
            time:[],
      band_list:[],
            outData:[],
            showStock:false,
             info: {
        user_id: "",
        work_type: 2,
        order_in_no: "",
        start_time: "",
        end_time: "",
        user_salary: "",
      },
             modalData:[
        {title:"选择班组：",value:'',list:[],is_select:true}
        //  {title:"垛码：",value:'',is_select:false},
      ],
            selectData:[],
         total:0,
         pageSize:10,
         pageIndex:1,
         tableData:[{
            order_no:'订单',
            url_number:'01',
            assembly:'产品组件',
            house_number:'房号',
            url_img:[],
         }],
         tableColumns:[
            {type:'selection',align:'center',minWidth:100},
            {title:'订单号',key:'order_no',align:'center',minWidth:120},
            {title:'图号',key:'url_number',align:'center',minWidth:120},
            {title:'产品名称',key:'product_title',align:'center',minWidth:120},
            {title:'产品组件',key:'compose_name',align:'center',minWidth:120},
            {title:'房号',key:'house_title',align:'center',minWidth:120},
            {title:'包装日期',key:'',align:'center',minWidth:120},
            {title:'图纸',key:'url_img',align:'center',minWidth:120,slot:'img'},
            {title:'包装状态',align:'center',minWidth:120,key:'sub_state',render:(h,params)=>{
                const {row} = params;
                return h('span',{}, row.sub_state==2?"未包装完成":'已包装完成')
            }},
            {title:"发货状态",align:'center',minWidth:120,key:'overdue_state',render:(h,params)=>{
                const {row} = params;
                return h('span',{},row.overdue_state==0?'未下指令':'已下指令')
            }},
            {title:'操作',key:'set',align:'center',minWidth:150,slot:'set'},
         ],
         proxyData:{}
        }
    },
    created(){
         this.axios("/api/employee_list").then((res) => (this.band_list = res.data.data));
//获取包装班组
       this.axios.post('/api/orders_in_employee',{title:'包装'}).then(res=>{
        this.modalData[0].list = res.data;
       });
    },
    mounted(){
      this.initData();
    },
    methods:{
        handleSearch(){
          this.proxyData = JSON.parse(JSON.stringify(this.searchData));
          this.pageIndex = 1;
          this.initData(this.proxyData)
        },
        confirmOutStock(){
             if (this.time) {
        this.info.start_time = new Date(this.time[0])
          .toLocaleDateString()
          .replace(/\//g, "-");
        this.info.end_time = new Date(this.time[1])
          .toLocaleDateString()
          .replace(/\//g, "-");
      }
      this.axios.post("/api/orders_out", {...this.info,...this.outData}).then((res) => {
        if (res.code == 200) {
          this.$Message.success(res.msg);
          this.initData(this.proxyObj);
          // setTimeout(()=>this.back(),500)
        }
      });
        },
        handleOut(row){
       this.showStock = true;
       this.outData = JSON.parse(JSON.stringify(row));
        },
        handleIn(row){
 this.confirmDelete({
        title: "包装完成",
        content: "是否确认包装完成",
        type: "primary",
        formData:this.modalData,
        then: () => {
          this.axios
            .post("/api/orders_in", { ...row,team_id:this.modalData[0].value})
            .then((res) => {
              if (res.code == 200) {
                this.modalData[0].value = '';
                this.$Message.success(res.msg);
                this.initData(this.proxyObj);
              }
            });
        },
        cancel: () => {
          this.$Message.warning("您取消了包装完成操作");
        },
      });
        },
        handleSelect(e){
        this.selectData = e;
        },
        goPage(row){
         this.$router.push({path:'/cms/productionorderlist/inboundform/details',query:{...this.$route.query,house_id:row.house_id,url_number:row.url_number,compose_name:row.compose_name}})
        },
        initData(obj){
               this.axios.post('/api/new_product_box_list',{order_no:this.$route.query.order_no,...obj,page_size:this.pageSize,page_index:this.pageIndex}).then(res=>{
this.tableData = res.data.data;
this.total = res.data.total;
               })
        },
        changeSize(e){
             this.pageSize = e;
             this.pageIndex = 1;
             this.initData(this.proxyData);
        },
        changePage(e){
            this.pageIndex = e;
            this.initData(this.proxyData);
        }
    }
}
</script>
<style lang="scss" scoped>

</style>