tire-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="downloadUrl" slot-scope="{ row }">
            <el-input
              v-if="row.$cellEdit"
              v-model="row.downloadUrl"
              style="width: 80%"
              size="small"
            >
            </el-input>
            <el-button
              style="width: 20%"
              size="small"
              v-if="row.$cellEdit"
              @click="uploadFiles(row)"
            >
              附件
            </el-button>
            <span v-else>{{ row.downloadUrl }}</span>
          </template>
          <template slot="versionDesc" slot-scope="{ row }">
            <el-input type="textarea"
                      v-if="row.$cellEdit"
                      v-model="row.versionDesc"
                      size="small"
                      autosize
                      placeholder="">
            </el-input>
            <span v-else>{{ row.versionDesc }}</span>
          </template>
          <template slot="isRelease" slot-scope="{ row, index }">
            <el-select
              v-if="row.$cellEdit"
              v-model="row.isRelease"
              size="small"
              @change="isReleaseChange(row,index)"
            >
              <el-option
                v-for="(item,index) in isReleaseList"
                :key="index"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <span v-else>{{ row.isRelease ===1?"是":"否" }}</span>
          </template>
          <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>
      <el-dialog
        title="上传附件"
        append-to-body
        :visible.sync="excelBox"
        width="555px"
        v-dialog-drag
      >
        <avue-form
          :option="excelOption"
          v-model="excelForm"
          table-loading="excelLoading"
          :upload-before="uploadBefore"
          :upload-after="uploadAfter"
        >
        </avue-form>
      </el-dialog>
    </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,
                rules: [
                    {
                        required: true,
                        message: ' ',
                        trigger: 'blur'
                    }
                ]
            },
          ],
        },
        selectRow:{},
        isReleaseList:[
          {
            label: "是",
            value: 1
          },
          {
            label: "否",
            value: 0
          }
          ],
        excelBox: false,
        excelLoading: false,
        excelForm: {},
        excelOption: {
          submitBtn: false,
          emptyBtn: false,
          column: [
            {
              label: "附件上传",
              prop: "excelFile",
              type: "upload",
              drag: true,
              dataType: "string",
              loadText: "模板上传中，请稍等",
              span: 24,
              propsHttp: {
                res: "data",
                url: "link"
              },
              action: "/api/blade-resource/oss/endpoint/put-file"
            }
          ]
        },
        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
        })
      }
    },
    watch:{
      'excelForm.excelFile'(val) {
        this.selectRow.downloadUrl = val
      },
    },
    mounted() {

    },
    methods: {
      isReleaseChange(row,indexs){
        if(row.isRelease === 1){
          //如果其他版本有发布的
          let yes ;
          this.dataList.map((item,index)=>{
            if(indexs != index && item.isRelease === 1){
              yes =  true
            }
          })
          if(yes){
            this.$message.warning("已有其他版本发布!")
            row.isRelease = 0
          }
        }

      },
      uploadFiles(row){
        this.selectRow = row
        this.excelBox = true
      },
      uploadBefore(file, done, loading) {
        done();
        loading = true;
      },
      uploadAfter(res, done, loading, column) {
        this.excelBox = false;
        this.$message.success("上传成功!");
        loading = false;
        done();
      },
      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>