jf-frock/src/views/Agreement/deepen/edit.vue

<template>
    <div>
        <Toptitle :title="$route.query.type==1?'深化单新增':$route.query.type==2?'深化单编辑':'深化单详情'">
             <Upload
             v-if="$route.query.type!=3"
          style="display:inline"
          name="your_file"
          :show-upload-list="false"
          :headers="headers"
          :on-error="uploadError"
          :on-success="uploadSuccess"
          :action="$store.state.ip + '/api/contract_deep_import'"
        >
          <Button type="primary" style="margin-right:10px;"
            >导入</Button
          >
        </Upload>
            <Button @click="back" style="margin-right:10px">返回</Button>
            <Button @click="postData"  v-if="$route.query.type!=3">保存</Button>
        </Toptitle>
        <div class="content">
            <Form :label-width='120' class="form_content" :style="$route.query.type==3?{'border-bottom':'1px solid #eeeeee'}:{}">
                <FormItem label='金螳螂ID：'>
                    <span v-if="$route.query.type==3" class="form_item">{{formData.jtl_id}}</span>
                    <Input v-else clearable v-model="formData.jtl_id" placeholder="请输入金螳螂ID"/>
                    
                </FormItem>
                <FormItem label='项目编码：'>
                    <span v-if="$route.query.type==3" class="form_item">{{formData.order_no}}</span>
                    <Input v-else clearable v-model="formData.order_no" placeholder="请输入项目编码"/>
                </FormItem>
                <FormItem label='项目名称：'>
                    <span v-if="$route.query.type==3" class="form_item">{{formData.project_title}}</span>
                    <Input v-else clearable v-model="formData.project_title" placeholder="请输入项目名称"/>
                </FormItem>
                <FormItem label='项目简称：'>
                    <span v-if="$route.query.type==3" class="form_item">{{formData.abbreviation}}</span>
                    <Input  v-else clearable v-model="formData.abbreviation" placeholder="请输入项目简称"/>
                </FormItem>
            </Form>
            <Form :label-width='100' class="form_content" v-if="$route.query.type==3">
                <FormItem label='区域：'>
                    <Select multiple filterable v-model="searchData.region" class="form_item" :max-tag-count='2'>
                        <Option v-for="(item,index) in regionList" :key="index" :value="item" :label='item'></Option>
                    </Select>
                </FormItem>
                <FormItem label='图号：'>
                  <Select multiple filterable v-model="searchData.url_number" class="form_item" :max-tag-count='2'>
                        <Option v-for="(item,index) in urlNumberList" :key="index" :value="item" :label='item'></Option>
                    </Select>
                </FormItem>
                <FormItem label='产品名称：'>
                  <Select multiple filterable v-model="searchData.product_title" class="form_item" :max-tag-count='2'>
                       <Option v-for="(item,index) in productTitleList" :key="index" :value="item" :label='item'></Option>
                    </Select>
                </FormItem>
                <FormItem label='制单日期：'>
                    <DatePicker type="date" placeholder="年/月/日" style="width: 200px" v-model="searchData.start_time"></DatePicker>
                    ~
                    <DatePicker type="date" placeholder="年/月/日" style="width: 200px" v-model="searchData.end_time"></DatePicker>
                </FormItem>
                 <FormItem :label-width='60'>
                    <Button type="primary" @click="search">搜索</Button>
                </FormItem>
            </Form>
            <Table :data='tableData' :columns='$route.query.type==3?detailTableColumns:tableColumns' border max-height='550'>  
             <template slot="set" slot-scope="{index}">
                     <a @click="del(index)">删除</a>
             </template>
            </Table>
        </div>
         <div class="content_body_page" v-if="$route.query.type==3">
        <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>
</template>
<script>
export default {
    data(){
        return{
            regionList:[],
            urlNumberList:[],
            productTitleList:[],
            pageIndex:1,
            pageSize:10,
            total:0,
           headers: { 'Authorization': localStorage.getItem('token') },
            tableData:[],
            tableColumns:[
                {type:'index',title:'序号',align:'center',minWidth:80},
                {title:'区域',align:'center',key:'region',minWidth:120},
                {title:'图号',align:'center',key:'url_number',minWidth:120},
                {title:'产品名称',align:'center',key:'product_title',minWidth:120},
                {title:'数量',align:'center',key:'num',minWidth:120},
                {title:'单位',align:'center',key:'unit',minWidth:120},
                {title:'饰面',align:'center',key:'finish',minWidth:120},
                {title:'备注',align:'center',key:'remark',minWidth:120},
                {title:'制单日期',align:'center',key:'crt_time',minWidth:120,render:(h,params)=>{
                    const {row} = params;
                    return h('span',{},this.func.replaceDateNoHMS(row.crt_time))
                }},
                {title:'操作',align:'center',key:'set',minWidth:120,slot:'set'},
            ],
            detailTableColumns:[
                {type:'index',title:'序号',align:'center',minWidth:80},
                {title:'区域',align:'center',key:'region',minWidth:120},
                {title:'图号',align:'center',key:'url_number',minWidth:120},
                {title:'产品名称',align:'center',key:'product_title',minWidth:120},
                {title:'数量',align:'center',key:'num',minWidth:120},
                {title:'单位',align:'center',key:'unit',minWidth:120},
                {title:'饰面',align:'center',key:'finish',minWidth:120},
                 {title:'备注',align:'center',key:'remark',minWidth:120},
                {title:'制单日期',align:'center',key:'crt_time',minWidth:120,render:(h,params)=>{
                    const {row} = params;
                    return h('span',{},this.func.replaceDateNoHMS(row.crt_time))
                }}
            ],
             formData:{
                 jtl_id:'',
                 order_no:'',
                 project_title:'',
                 abbreviation:''
             },
             searchData:{
                 region:[],
                 url_number:[],
                 project_title:[],
                 start_time:'',
                 end_time:'',
             }
        }
    },
    mounted(){
     if(this.$route.query.type!=1){
         this.initData();
     }
    },
    methods:{
        search(){
            let obj = JSON.parse(JSON.stringify(this.searchData));
            obj.start_time = obj.start_time?Date.parse(obj.start_time).toString().slice(0,10):'';
            obj.end_time = obj.end_time?Date.parse(obj.end_time).toString().slice(0,10):'';
            this.axios.post('/api/contract_deep_detail',{order_no:this.$route.query.order_no,...obj,page_index:this.pageIndex,page_size:this.pageSize}).then(res=>{
                this.tableData = res.data.children.data;
                this.total = res.data.children.total
            })
        },
        initData(){
            let obj = {};
            if(this.$route.query.type==3){
                   obj.page_index = this.pageIndex;
                   obj.page_size = this.pageSize;
            }
      this.axios.post('/api/contract_deep_detail',{order_no:this.$route.query.order_no,...obj}).then(res=>{
          this.formData = JSON.parse(JSON.stringify(res.data));
          delete this.formData.children;
             this.tableData = res.data.children.data;
             this.total = res.data.children.total;
             if(this.$route.query.type==3){
                 this.urlNumberList = res.data.url_number_list;
                 this.regionList = res.data.region_list;
                 this.productTitleList = res.data.product_title_list;
             }
      })
        },
         uploadError(err) {
      this.$Message.error(err.msg || "上传失败");
    },
    uploadSuccess(res){
            if (res.code == 200) {
        this.$Message.success(res.msg || "上传成功");
        if(this.tableData.length==0){
            this.tableData = res.data;
        }else{
           let data = JSON.parse(JSON.stringify(this.tableData));
           res.data.forEach(v => {
               let arr = [];
               arr = this.tableData.filter(x=>{
                   return x.region == v.region&&x.product_title == v.product_title&&x.url_number==v.url_number;
               })
                  if(arr.length==0){
                      data.push(v);
                  }else{
                    this.tableData.forEach((ele,index)=>{
                        if(ele.region == v.region&&ele.product_title == v.product_title&&ele.url_number == v.url_number){
                                data.splice(index,1,v)
                        }
                    })
                  }
           });
            this.tableData = data;
        }
        
      } else {
        this.$Message.warning(res.msg || "上传失败");
      }
    },
        postData(){
            if(this.tableData.length==0){
            return this.$Message.warning('请先导入数据！')
            }
            if(!this.formData.order_no||!this.formData.project_title||!this.formData.abbreviation){
                return this.$Message.warning('请输入完整信息！')
            }
            
            if(this.$route.query.type==1){
                  this.axios.post('/api/contract_deep_add',{...this.formData,children:this.tableData}).then(res=>{
            if(res.code==200){
                 this.$Message.success(res.msg);
                 this.back();        
                      }        
              })
            }else{
                this.axios.post('/api/contract_deep_edit',{order_no:this.formData.order_no,jtl_id:this.formData.jtl_id,project_title:this.formData.project_title,abbreviation:this.formData.abbreviation,children:this.tableData}).then(res=>{
            if(res.code==200){
                 this.$Message.success(res.msg);
                 this.back();        
                      }        
              })
            }
      
        },
        back(){
                this.$router.go(-1);
        },
        del(index){
            this.tableData.splice(index,1);
        },
        changePage(e){
            this.pageIndex =e;
            this.search();
        },
        changeSize(e){
            this.pageSize = e;
            this.pageIndex = 1;
            this.search();
        }
    }
}
</script>
<style lang="scss" scoped>
.form_content{
    margin-top:15px;
    display: flex;
    flex-wrap:wrap;
}
.content_body_page{
    text-align: center;
    margin-top: 10px;
}
.content{
    height:85%;
    overflow: auto;
}
.form_item{
    width:200px;
    display: inline-block;
}
</style>