jf-frock/src/views/leadMatch/Ironware/edit.vue

<template>
    <div>
        <Toptitle :title="$route.query.type==1?'新增':$route.query.type==2?'编辑':'查看'">
            <Button type="primary" style="margin-right:10px;" @click="del_total" v-show="$route.query.type==1">批量删除</Button>
              <Upload
              v-show="$route.query.type!=3"
              style="display:inline-block"
          name="your_file"
          :show-upload-list="false"
          :headers="headers"
          :on-error="uploadError"
          :on-success="uploadSuccess"
          :action="$store.state.ip + '/api/cut_order_alloy_import'"
        >
          <Button type="primary" style="margin-right:10px;"
            >导入</Button
          >
        </Upload>
            <Button style="margin-right:10px;" @click="back">返回</Button>
            <Button @click="postData" v-show="$route.query.type!=3">保存</Button>
        </Toptitle>
        <div style="height:85%;overflow:auto">
        <Form :label-width='100' style="display:flex;margin-top:15px;flex-wrap:wrap;border-bottom: 1px solid #F4F4F4; ">
            <FormItem label='项目编码:' style="width:250px">
                <span v-if="$route.query.type==3">{{searchData.project_code}}</span>
                <Input v-else clearable :disabled='true' v-model="searchData.project_code"/>
            </FormItem>
            <FormItem label='项目名称:' style="width:250px">
                <span v-if="$route.query.type==3">{{searchData.project_title}}</span>
                  <Input v-else clearable :disabled='true' v-model='searchData.project_title'/>
            </FormItem>
            <FormItem label='项目简称:' style="width:250px">
                <span v-if="$route.query.type==3">{{searchData.abbreviation}}</span>
                  <Input v-else clearable :disabled='true' v-model="searchData.abbreviation"/>
            </FormItem>
            <FormItem label='下单日期:' style="width:250px" class="red_star">
                <span v-if="$route.query.type==3">{{searchData.alloy_time}}</span>
                <DatePicker type='date' v-model="searchData.alloy_time" placeholder='年/月/日' v-else></DatePicker>
            </FormItem>
        </Form>
        <div v-show="$route.query.type==3">
        <Form :label-width='100' style="display:flex;margin-top:15px;flex-wrap:wrap;">
            <FormItem label='图号'>
                <Select v-model="formData.url_number" filterable multiple>
                    <Option v-for="(item,index) in url_number" :key="index" :label="item" :value="item"/>
                </Select>
            </FormItem>
             <FormItem label='名称'>
              <Select v-model="formData.title" filterable multiple>
                    <Option v-for="(item,index) in title" :key="index" :label="item" :value="item"/>
                </Select>
                </FormItem>
              <FormItem>
                  <Button type="primary" @click="initData(formData)">搜索</Button>
              </FormItem>
        </Form>
        </div>
        <Table :data='tableData' :columns='$route.query.type==1?tableColumns_add:tableColumns_edit' border max-height='550' @on-selection-change='choose'>
   <template slot="set" slot-scope="{row,index}">
       <a @click="del(row,index)">删除</a>
   </template>
        </Table>
        </div>
          <Page
          v-show="$route.query.type==3"
      :page-size-opts="[10, 20, 30, 40, 100, 1000]"
      @on-page-size-change="changeSize"
      @on-change="changePage"
      :current="pageIndex"
      show-total
      :total="total"
      show-sizer
      :page-size="pageSize"
      style="text-align: center; margin-top: 10px"
    />
    </div>
</template>
<script>
export default {
    data(){
        return{
            url_number:[],
            title:[],
            formData:{
                url_number:[],
                title:[],
            },
            selectData:[],
            id:'',
        headers: { Authorization: localStorage.getItem("token") },
        tableData:[],
        tableColumns_add:[
           {align:'center',minWidth:60,type:'selection'},
             {title:"序号",align:'center',minWidth:80,type:'index'},
             {title:"图号",align:'center',minWidth:80,key:'url_number'},
              {title:"名称",align:'center',minWidth:80,key:'title'},
               {title:"规格型号",align:'center',minWidth:150,key:'model'},
                {title:"单位",align:'center',minWidth:80,key:'unit'},
                 {title:"数量",align:'center',minWidth:80,key:'num'},
                  {title:"备注",align:'center',minWidth:150,key:'remark'},
                   {title:"操作",align:'center',minWidth:80,key:'set',slot:'set'},
        ],
        tableColumns_edit:[
             {title:"序号",align:'center',minWidth:80,type:'index'},
            {title:"图号",align:'center',minWidth:80,key:'url_number'},
              {title:"名称",align:'center',minWidth:80,key:'title'},
               {title:"规格型号",align:'center',minWidth:150,key:'model'},
                {title:"单位",align:'center',minWidth:80,key:'unit'},
                 {title:"数量",align:'center',minWidth:80,key:'num'},
                  {title:"备注",align:'center',minWidth:150,key:'remark'},
                   {title:"操作",align:'center',minWidth:80,key:'set',slot:'set'},
        ],
        pageSize:10,
        pageIndex:1,
        total:0,
        searchData:{
            abbreviation:'',
            project_title:'',
            project_code:'',
            alloy_time:''
        }
        }
    },
    mounted(){
        if(this.$route.query.type!=1){
             this.initData();
        }
      
    },
    methods:{
        del_total(){
            let indexs = [];
            this.selectData.forEach(element => {
                indexs.push(element.index);
            });
           for(let i = 0;i<this.tableData.length;i++){
                if(indexs.indexOf(this.tableData[i].index)>=0){
                    this.tableData.splice(i,1);
                    i--;
                }
           }
        },
        choose(e){
           this.selectData = e;
        },
        postData(){
              if(!this.id&&this.$route.query.type==1){
              return this.$Message.warning('请先导入!')
            }
            if(!this.searchData.alloy_time){
            return this.$Message.warning('请先选择下单时间!')
            }
            let time = this.searchData.alloy_time;
                time = time?Date.parse(time).toString().slice(0,10):'';
            let url =this.$route.query.type==2?'/api/cut_order_alloy_edit':'/api/cut_order_alloy_save'
           this.axios.post(url,{alloy_time:time,id:this.$route.query.type==1?this.id:this.$route.query.id,data:this.tableData}).then(res=>{
               if(res.code==200){
                   this.$Message.success(res.msg);
                   this.back();
               }
           })
        },
        del(row,index){
              this.tableData.splice(index,1);
        },
        back(){
           this.$router.go(-1)  
        },
        initData(row){
             this.axios.post('/api/cut_order_alloy_detail',{...this.$route.query,...row}).then(res=>{
                 this.url_number = res.data.url_number||[];
                 this.title = res.data.title||[];
                 this.tableData = res.data.data.data;
                 this.searchData.abbreviation = res.data.abbreviation;
            this.searchData.project_title=res.data.project_name;
            this.searchData.project_code=res.data.project_number;
            this.searchData.alloy_time = res.data.alloy_time?this.func.replaceDateNoHMS(res.data.alloy_time):''
            console.log(this.searchData.alloy_time);
             })
        },
           uploadSuccess(res) {
      if (res.code == 200) {
        this.$Message.success(res.msg || "上传成功");
         this.searchData.abbreviation = res.data.abbreviation;
         this.searchData.project_title = res.data.project_name;
         this.searchData.project_code = res.data.project_number;
         this.id = res.data.id;
        if(this.tableData.length==0){
           this.tableData = res.data.data;
        }else{
           
            this.copyTable = JSON.parse(JSON.stringify(this.tableData));
            let idxs = [];
            this.tableData.forEach((v,index)=>{
                res.data.data.forEach((m,idx)=>{
                    if(v.material_id==m.material_id&&v.url_number==m.url_number){
                        this.copyTable.splice(index,1,m);
                        idxs.push(idx);
                    }
                })
            })
           res.data.data.forEach((v,index)=>{
               if(idxs.indexOf(index)<0){
                   this.copyTable.push(v);
               }
           })
           this.tableData = JSON.parse(JSON.stringify(this.copyTable));
        }
            this.tableData.forEach((v,index)=>{
                 v.index = index;
            })
      } else {
        this.$Message.warning(res.msg || "上传失败");
      }
    },
    uploadError(err) {
      this.$Message.error(err.msg || "上传失败");
    },
    changeSize(e){
             this.pageSize =e;
             this.pageIndex = 1;
           this.initData(this.formData);
    },
    changePage(e){
           this.pageIndex = e;
           this.initData(this.formData);
    }
    }
}
</script>
<style lang="scss" scoped>
//小红星
/deep/.red_star .ivu-form-item-label:before {
    content: '*';
    display: inline-block;
    margin-right: 4px;
    line-height: 1;
    font-family: SimSun;
    font-size: 14px;
    color: #ed4014;
}
</style>