Smart_platform_ui/src/views/system/application/detailsPage.vue

<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>