|  | @@ -0,0 +1,291 @@
 | 
	
		
			
				|  |  | +<template>
 | 
	
		
			
				|  |  | +  <div class="borderless">
 | 
	
		
			
				|  |  | +    <div class="customer-head">
 | 
	
		
			
				|  |  | +      <div class="customer-back">
 | 
	
		
			
				|  |  | +        <el-button type="danger" style="border: none;background: none;color: red" icon="el-icon-arrow-left"
 | 
	
		
			
				|  |  | +                   @click="backToList">返回列表
 | 
	
		
			
				|  |  | +        </el-button>
 | 
	
		
			
				|  |  | +        <div class="upper_right_button">
 | 
	
		
			
				|  |  | +          <el-button class="el-button--small-yh"
 | 
	
		
			
				|  |  | +                     type="primary"
 | 
	
		
			
				|  |  | +                     size="small"
 | 
	
		
			
				|  |  | +                     :loading="buttonLoading"
 | 
	
		
			
				|  |  | +                     @click.stop="saveData"
 | 
	
		
			
				|  |  | +          >保存数据
 | 
	
		
			
				|  |  | +          </el-button>
 | 
	
		
			
				|  |  | +        </div>
 | 
	
		
			
				|  |  | +      </div>
 | 
	
		
			
				|  |  | +    </div>
 | 
	
		
			
				|  |  | +    <div class="customer-main">
 | 
	
		
			
				|  |  | +      <containerTitle title="基础信息"></containerTitle>
 | 
	
		
			
				|  |  | +      <basic-container>
 | 
	
		
			
				|  |  | +        <avue-form class="trading-form" ref="form" v-model="form" :option="option">
 | 
	
		
			
				|  |  | +          <template slot="remark">
 | 
	
		
			
				|  |  | +            <el-input type="textarea"
 | 
	
		
			
				|  |  | +                      v-model="form.remark"
 | 
	
		
			
				|  |  | +                      size="small"
 | 
	
		
			
				|  |  | +                      rows="2"
 | 
	
		
			
				|  |  | +                      autocomplete="off"
 | 
	
		
			
				|  |  | +                      placeholder="">
 | 
	
		
			
				|  |  | +            </el-input>
 | 
	
		
			
				|  |  | +          </template>
 | 
	
		
			
				|  |  | +        </avue-form>
 | 
	
		
			
				|  |  | +      </basic-container>
 | 
	
		
			
				|  |  | +      <containerTitle title="明细列表"></containerTitle>
 | 
	
		
			
				|  |  | +      <basic-container>
 | 
	
		
			
				|  |  | +        <avue-crud :option="itemsOption"
 | 
	
		
			
				|  |  | +                   :data="dataList"
 | 
	
		
			
				|  |  | +                   ref="crud"
 | 
	
		
			
				|  |  | +                   v-model="itemsForm"
 | 
	
		
			
				|  |  | +                   @search-reset="searchReset"
 | 
	
		
			
				|  |  | +                   @row-update="rowUpdate"
 | 
	
		
			
				|  |  | +                   @selection-change="selectionChange"
 | 
	
		
			
				|  |  | +                   @current-change="currentChange"
 | 
	
		
			
				|  |  | +                   @size-change="sizeChange"
 | 
	
		
			
				|  |  | +                   @refresh-change="refreshChange">
 | 
	
		
			
				|  |  | +          <template slot="menuLeft">
 | 
	
		
			
				|  |  | +            <el-button type="primary"
 | 
	
		
			
				|  |  | +                       size="small"
 | 
	
		
			
				|  |  | +                       :loading="buttonLoading"
 | 
	
		
			
				|  |  | +                       @click="addDetail"
 | 
	
		
			
				|  |  | +            >录入明细
 | 
	
		
			
				|  |  | +            </el-button>
 | 
	
		
			
				|  |  | +          </template>
 | 
	
		
			
				|  |  | +          <template slot-scope="scope" slot="menu">
 | 
	
		
			
				|  |  | +            <el-button
 | 
	
		
			
				|  |  | +              type="text"
 | 
	
		
			
				|  |  | +              size="small"
 | 
	
		
			
				|  |  | +              icon="el-icon-edit"
 | 
	
		
			
				|  |  | +              @click.stop="rowCell(scope.row,scope.index)"
 | 
	
		
			
				|  |  | +            > {{ scope.row.$cellEdit ? '修改完成' : '修改' }}
 | 
	
		
			
				|  |  | +            </el-button>
 | 
	
		
			
				|  |  | +            <el-button
 | 
	
		
			
				|  |  | +              type="text"
 | 
	
		
			
				|  |  | +              size="small"
 | 
	
		
			
				|  |  | +              icon="el-icon-delete"
 | 
	
		
			
				|  |  | +              @click.stop="rowDel(scope.row,scope.index)"
 | 
	
		
			
				|  |  | +            >删除
 | 
	
		
			
				|  |  | +            </el-button>
 | 
	
		
			
				|  |  | +          </template>
 | 
	
		
			
				|  |  | +        </avue-crud>
 | 
	
		
			
				|  |  | +      </basic-container>
 | 
	
		
			
				|  |  | +    </div>
 | 
	
		
			
				|  |  | +  </div>
 | 
	
		
			
				|  |  | +</template>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +<script>
 | 
	
		
			
				|  |  | +  import option from "./config/detailsPage.json";
 | 
	
		
			
				|  |  | +  import { contrastObj,contrastList } from "@/util/contrastData";
 | 
	
		
			
				|  |  | +  import {appSave  ,appDetail,appDetailRemove} from "@/api/application/application";
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +  export default {
 | 
	
		
			
				|  |  | +    name: "receiptDetailsPage",
 | 
	
		
			
				|  |  | +    props: {
 | 
	
		
			
				|  |  | +      detailData: {
 | 
	
		
			
				|  |  | +        type: Object
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    components:{
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    data() {
 | 
	
		
			
				|  |  | +      return {
 | 
	
		
			
				|  |  | +        buttonLoading:false,
 | 
	
		
			
				|  |  | +        form: {},
 | 
	
		
			
				|  |  | +        itemsForm:{},
 | 
	
		
			
				|  |  | +        dataList: [],
 | 
	
		
			
				|  |  | +        itemsOption: option,
 | 
	
		
			
				|  |  | +        option: {
 | 
	
		
			
				|  |  | +          menuBtn: false,
 | 
	
		
			
				|  |  | +          labelWidth: 100,
 | 
	
		
			
				|  |  | +          column: [
 | 
	
		
			
				|  |  | +            {
 | 
	
		
			
				|  |  | +              label: 'app名称',
 | 
	
		
			
				|  |  | +              prop: 'appName',
 | 
	
		
			
				|  |  | +              span: 8,
 | 
	
		
			
				|  |  | +              rules: [
 | 
	
		
			
				|  |  | +                {
 | 
	
		
			
				|  |  | +                  required: true,
 | 
	
		
			
				|  |  | +                  message: ' ',
 | 
	
		
			
				|  |  | +                  trigger: 'blur'
 | 
	
		
			
				|  |  | +                }
 | 
	
		
			
				|  |  | +              ]
 | 
	
		
			
				|  |  | +            },{
 | 
	
		
			
				|  |  | +              label: '应用描述',
 | 
	
		
			
				|  |  | +              prop: 'appDesc',
 | 
	
		
			
				|  |  | +              span: 8,
 | 
	
		
			
				|  |  | +            },
 | 
	
		
			
				|  |  | +            {
 | 
	
		
			
				|  |  | +              label: '类型',
 | 
	
		
			
				|  |  | +              prop: 'type',
 | 
	
		
			
				|  |  | +              type:'select',
 | 
	
		
			
				|  |  | +              dicData:[{
 | 
	
		
			
				|  |  | +                label:'安卓',
 | 
	
		
			
				|  |  | +                value:0,
 | 
	
		
			
				|  |  | +              },
 | 
	
		
			
				|  |  | +                {
 | 
	
		
			
				|  |  | +                  label:'苹果',
 | 
	
		
			
				|  |  | +                  value:1,
 | 
	
		
			
				|  |  | +                }],
 | 
	
		
			
				|  |  | +              span: 8,
 | 
	
		
			
				|  |  | +            },
 | 
	
		
			
				|  |  | +            {
 | 
	
		
			
				|  |  | +              label: '苹果appStoreId',
 | 
	
		
			
				|  |  | +              prop: 'appStoreId',
 | 
	
		
			
				|  |  | +              span: 8,
 | 
	
		
			
				|  |  | +            },
 | 
	
		
			
				|  |  | +            {
 | 
	
		
			
				|  |  | +              label: '苹果bundleId',
 | 
	
		
			
				|  |  | +              prop: 'bundleId',
 | 
	
		
			
				|  |  | +              span: 8,
 | 
	
		
			
				|  |  | +            },
 | 
	
		
			
				|  |  | +            {
 | 
	
		
			
				|  |  | +              label: '安卓包名',
 | 
	
		
			
				|  |  | +              prop: 'packageName',
 | 
	
		
			
				|  |  | +              span: 8,
 | 
	
		
			
				|  |  | +            },
 | 
	
		
			
				|  |  | +          ],
 | 
	
		
			
				|  |  | +        },
 | 
	
		
			
				|  |  | +        oldForm:{},
 | 
	
		
			
				|  |  | +        oldDataList:[],
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    created() {
 | 
	
		
			
				|  |  | +      if(this.detailData.id){
 | 
	
		
			
				|  |  | +        this.buttonLoading = true
 | 
	
		
			
				|  |  | +        appDetail(this.detailData.id).then(res=>{
 | 
	
		
			
				|  |  | +          this.afterEcho(res.data.data)
 | 
	
		
			
				|  |  | +        }).finally(()=>{
 | 
	
		
			
				|  |  | +          this.buttonLoading = false
 | 
	
		
			
				|  |  | +        })
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    mounted() {
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    methods: {
 | 
	
		
			
				|  |  | +      rowUpdate(row, index, done) {
 | 
	
		
			
				|  |  | +        done(row);
 | 
	
		
			
				|  |  | +      },
 | 
	
		
			
				|  |  | +      rowCell(row,index){
 | 
	
		
			
				|  |  | +        this.$refs.crud.rowCell(row, index)
 | 
	
		
			
				|  |  | +      },
 | 
	
		
			
				|  |  | +      rowDel(row,index){
 | 
	
		
			
				|  |  | +        this.$confirm("确定将选择数据删除?", {
 | 
	
		
			
				|  |  | +          confirmButtonText: "确定",
 | 
	
		
			
				|  |  | +          cancelButtonText: "取消",
 | 
	
		
			
				|  |  | +          type: "warning"
 | 
	
		
			
				|  |  | +        }).then(() => {
 | 
	
		
			
				|  |  | +          if(row.id){
 | 
	
		
			
				|  |  | +            appDetailRemove(row.id).then(res=>{
 | 
	
		
			
				|  |  | +              if(res.data.success){
 | 
	
		
			
				|  |  | +                this.$message.success("操作成功!")
 | 
	
		
			
				|  |  | +                this.dataList.splice(index, 1);
 | 
	
		
			
				|  |  | +              }
 | 
	
		
			
				|  |  | +            })
 | 
	
		
			
				|  |  | +          }else{
 | 
	
		
			
				|  |  | +            this.dataList.splice(index, 1);
 | 
	
		
			
				|  |  | +          }
 | 
	
		
			
				|  |  | +        })
 | 
	
		
			
				|  |  | +      },
 | 
	
		
			
				|  |  | +      addDetail(){
 | 
	
		
			
				|  |  | +        this.$refs.crud.rowCellAdd();
 | 
	
		
			
				|  |  | +      },
 | 
	
		
			
				|  |  | +      searchReset() {
 | 
	
		
			
				|  |  | +        console.log('1')
 | 
	
		
			
				|  |  | +      },
 | 
	
		
			
				|  |  | +      selectionChange() {
 | 
	
		
			
				|  |  | +        console.log('1')
 | 
	
		
			
				|  |  | +      },
 | 
	
		
			
				|  |  | +      currentChange() {
 | 
	
		
			
				|  |  | +        console.log('1')
 | 
	
		
			
				|  |  | +      },
 | 
	
		
			
				|  |  | +      sizeChange() {
 | 
	
		
			
				|  |  | +        console.log('1')
 | 
	
		
			
				|  |  | +      },
 | 
	
		
			
				|  |  | +      refreshChange() {
 | 
	
		
			
				|  |  | +        console.log('1')
 | 
	
		
			
				|  |  | +      },
 | 
	
		
			
				|  |  | +      saveData(type){
 | 
	
		
			
				|  |  | +        this.buttonLoading = true
 | 
	
		
			
				|  |  | +        let params = {
 | 
	
		
			
				|  |  | +          ...this.form,
 | 
	
		
			
				|  |  | +          appVersionList: this.dataList
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +        appSave(params).then(res =>{
 | 
	
		
			
				|  |  | +          if(res.data.success){
 | 
	
		
			
				|  |  | +            this.$message.success("操作成功!")
 | 
	
		
			
				|  |  | +            this.afterEcho(res.data.data)
 | 
	
		
			
				|  |  | +          }
 | 
	
		
			
				|  |  | +        }).finally(()=>{
 | 
	
		
			
				|  |  | +          this.buttonLoading = false
 | 
	
		
			
				|  |  | +          if(type === true){
 | 
	
		
			
				|  |  | +            this.$emit("goBack");
 | 
	
		
			
				|  |  | +          }
 | 
	
		
			
				|  |  | +        })
 | 
	
		
			
				|  |  | +      },
 | 
	
		
			
				|  |  | +      afterEcho(data){
 | 
	
		
			
				|  |  | +        this.form = data
 | 
	
		
			
				|  |  | +        this.oldForm = Object.assign({},data);
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        if(data.appVersionList){
 | 
	
		
			
				|  |  | +          this.dataList = data.appVersionList
 | 
	
		
			
				|  |  | +          this.oldDataList = this.deepClone(data.appVersionList)
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +      },
 | 
	
		
			
				|  |  | +      verificationData(){
 | 
	
		
			
				|  |  | +        if(contrastObj(this.form,this.oldForm) || contrastList(this.dataList,this.oldDataList)
 | 
	
		
			
				|  |  | +        ){
 | 
	
		
			
				|  |  | +          this.$confirm("数据发生变化,请先提交保存!", "提示", {
 | 
	
		
			
				|  |  | +            confirmButtonText: "保存",
 | 
	
		
			
				|  |  | +            cancelButtonText: "取消",
 | 
	
		
			
				|  |  | +            type: "warning",
 | 
	
		
			
				|  |  | +          }).then(() => {
 | 
	
		
			
				|  |  | +            this.saveData()
 | 
	
		
			
				|  |  | +          }).catch(()=>{
 | 
	
		
			
				|  |  | +            return false
 | 
	
		
			
				|  |  | +          })
 | 
	
		
			
				|  |  | +        }else{
 | 
	
		
			
				|  |  | +          return true
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +      },
 | 
	
		
			
				|  |  | +      backToList(){
 | 
	
		
			
				|  |  | +        if(contrastObj(this.form,this.oldForm) || contrastList(this.dataList,this.oldDataList)
 | 
	
		
			
				|  |  | +        ){
 | 
	
		
			
				|  |  | +          this.$confirm("是否保存当前页面?", "提示", {
 | 
	
		
			
				|  |  | +            confirmButtonText: "保存",
 | 
	
		
			
				|  |  | +            cancelButtonText: "取消",
 | 
	
		
			
				|  |  | +            type: "warning",
 | 
	
		
			
				|  |  | +          }).then(() => {
 | 
	
		
			
				|  |  | +            this.saveData(true)
 | 
	
		
			
				|  |  | +          }).catch(()=>{
 | 
	
		
			
				|  |  | +            this.$emit("goBack");
 | 
	
		
			
				|  |  | +          })
 | 
	
		
			
				|  |  | +        }else{
 | 
	
		
			
				|  |  | +          this.$emit("goBack");
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +      },
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +</script>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +<style lang="scss" scoped>
 | 
	
		
			
				|  |  | +::v-deep .el-form-item {
 | 
	
		
			
				|  |  | +  margin-bottom: 0;
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +.trading-form ::v-deep .el-form-item {
 | 
	
		
			
				|  |  | +  margin-bottom: 8px !important;
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +.required_fields{
 | 
	
		
			
				|  |  | +  color: #F56C6C;
 | 
	
		
			
				|  |  | +  display:inline-block;
 | 
	
		
			
				|  |  | +  width: 7%
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +.upper_right_button{
 | 
	
		
			
				|  |  | +  display: flex;
 | 
	
		
			
				|  |  | +  position: fixed;
 | 
	
		
			
				|  |  | +  right: 12px;
 | 
	
		
			
				|  |  | +  top: 47px;
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +</style>
 |