编辑新增使用同一个表单

编辑新增使用一个表单

列表展示table

<template>
  <div class="mod-config ml10">
    <!--搜索-->
    <div class="search searchHead" v-show="showSearch">
      <el-form ref="searchForm" :model="searchForm" :inline="true" size="mini">
        <el-form-item label="版权名称" prop="name">
          <cl-input v-model="searchForm.name" prefix-icon="el-icon-search" placeholder="请输入版权名称" clearable size="small"
                    style="width: 240px"/>
        </el-form-item>
        <el-form-item label="版权类型" prop="type">
          <el-select v-model.trim="searchForm.type" clearable placeholder="请选择版权类型" style="width: 240px" size="small">
            <el-option v-for="(item) in typeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" size="small" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-delete" size="small" @click="resetQuery">清空</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="tableContent">
      <!--搜索刷新-->
      <toolbar @refreshTable="getDataList" :showSearch.sync="showSearch">
        <el-button slot="add" type="primary" icon="el-icon-plus" size="small" @click="addOrUpdateHandle()">新增版权</el-button>
      </toolbar>

      <div class="avue-crud">
        <el-table
            :data="dataList"
            border
            :default-sort = "{prop: 'createTime', order: 'descending'}"
            v-loading="dataListLoading">
          <el-table-column label="序号" align="left" min-width="50px">
            <template slot-scope="scope">
              {{ helper.generateIndex(scope.$index, searchForm) }}
            </template>
          </el-table-column>
          <el-table-column
              prop="name"
              header-align="left"
              align="left"
              label="版权名称">
          </el-table-column>
          <el-table-column
            prop="files"
            header-align="left"
            align="left"
            width="120px"
            label="附件">
            <template slot-scope="scope">
              <div style="position: relative;">

                <div v-if="scope.row.files!==''&&scope.row.files!==null">

                  <el-image :src="$fileUrl+scope.row.files.split(',')[0]" v-if="
                scope.row.files.split(',')[0].indexOf('.png')!==-1||
               scope.row.files.split(',')[0].indexOf('.jpg')!==-1||
               scope.row.files.split(',')[0].indexOf('.jpeg')!==-1||
               scope.row.files.split(',')[0].indexOf('.gif')!==-1||
               scope.row.files.split(',')[0].indexOf('.bmp')!==-1
              || scope.row.files.split(',')[0].indexOf('.BMP') !== -1||
               scope.row.files.split(',')[0].indexOf('.GIF') !== -1||
               scope.row.files.split(',')[0].indexOf('.JPEG') !== -1||
               scope.row.files.split(',')[0].indexOf('.JPG') !== -1||
               scope.row.files.split(',')[0].indexOf('.PNG') !== -1"
                            style="width:100px;height:100px;"

                  >
                  </el-image>

                  <img src="public/images/file.png" fit="contain" style="width:100px;height:100px;" v-else></img>
                </div>

                <div class="div-mask-one">
                  <div class="mask-one-p"
                       v-if="
                scope.row.files.split(',')[0].indexOf('.png')!==-1||
               scope.row.files.split(',')[0].indexOf('.jpg')!==-1||
               scope.row.files.split(',')[0].indexOf('.jpeg')!==-1||
               scope.row.files.split(',')[0].indexOf('.gif')!==-1||
               scope.row.files.split(',')[0].indexOf('.bmp')!==-1
              || scope.row.files.split(',')[0].indexOf('.BMP') !== -1||
               scope.row.files.split(',')[0].indexOf('.GIF') !== -1||
               scope.row.files.split(',')[0].indexOf('.JPEG') !== -1||
               scope.row.files.split(',')[0].indexOf('.JPG') !== -1||
               scope.row.files.split(',')[0].indexOf('.PNG') !== -1">
                    <i class="el-icon-zoom-in"  @click="handleView(scope.row.files,1)" style="font-size:30px;"></i>
                  </div>
                  <div class="mask-one-p" v-else>
                    <i class="el-icon-zoom-in"  @click="handleView(scope.row.files,2)" style="font-size:30px;"></i>
                  </div>
                </div>
              </div>

            </template>
          </el-table-column>
          <el-table-column
              prop="region"
              header-align="left"
              align="left"
              label="版权类型">
            <template slot-scope="scope">
              <span v-if="scope.row.type===1">自有</span>
              <span v-else-if="scope.row.type===2">第三方</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="source"
            header-align="left"
            align="left"
            label="版权来源">
          </el-table-column>
          <el-table-column
              header-align="center"
              align="center"
              label="操作">
            <template slot-scope="scope">
              <!--<el-button v-if="permissions.onstudy_copyrighttemplate_view" type="text" size="small" icon="el-icon-view"
                         @click="addOrUpdateHandle(scope.row.copyrightTemplateId,1)">查看
              </el-button>-->
              <el-button v-if="permissions.onstudy_copyrighttemplate_edit" type="text" size="small" icon="el-icon-edit"
                         @click="addOrUpdateHandle(scope.row.copyrightTemplateId)">编辑
              </el-button>
              <el-button v-if="permissions.onstudy_copyrighttemplate_del" type="text" size="small" icon="el-icon-delete"
                         @click="deleteHandle(scope.row.copyrightTemplateId,scope.row.name)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="avue-crud__pagination">
        <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
                       :current-page="searchForm.current" :page-sizes="[10,20,50,100]"
                       :page-size="searchForm.size" :total="totalPage" background
                       layout="total,sizes,prev,pager,next,jumper"></el-pagination>
      </div>
      <!-- 弹窗, 新增 / 修改 -->
      <table-form v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></table-form>
    </div>



    <tableJoinImg v-if="showImgVisible||showPdfVisible" @btnClickImg="btnClickImg"
                  :viewImgVisible="showImgVisible"
                  :viewFileVisible="showPdfVisible" :fileLists="fileListes"></tableJoinImg>

  </div>
</template>

<script>
import {fetchList, delObj} from '@/api/onstudy/copyrighttemplate'
import TableForm from './copyrighttemplate-form'
import Toolbar from "@/components/Toolbar"
import tableJoinImg from "@/components/images/tableJoinImg.vue"
import {mapGetters} from 'vuex'
import {getDicDataSource} from "@/util/common";
import {getStore} from "@/util/store";



export default {
  data() {
    return {
      searchForm: {
        current: 1,
        size: 10,
        name: '',
        type: '',
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      showSearch: true,
      dataListLoading: false,
      addOrUpdateVisible: false,
      load: false,
      userInfo: {},
      showImgVisible:false,
      showPdfVisible:false,
      fileListes:[],
      typeList: [{value: 1,label: '自有'},{value: 2,label: '第三方'},]
    }
  },
  components: {
    TableForm,
    Toolbar,tableJoinImg
  },
  created() {
    this.userInfo = getStore({name: 'userInfo'});
    console.log("this.userInfo:",this.userInfo);
    this.getDataList()
  },
  computed: {
    ...mapGetters(['permissions'])
  },
  methods: {
    handleView(fileLists,num) {
      this.fileListes=[];

      this.fileListes=fileLists.split(',');
      if(num==1){
        this.showImgVisible = true;
        this.showPdfVisible = false;
      }
      else{
        this.showImgVisible = false;
        this.showPdfVisible = true;
      }

    },
    btnClickImg(){
      this.showImgVisible = false;
      this.showPdfVisible = false;
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      this.load = false;
      fetchList(this.searchForm).then(response => {
        this.dataList = response.data.data.records
        this.totalPage = response.data.data.total
        this.load = true;
      })
      this.dataListLoading = false
      console.log("list");
    },
    //每页数
    sizeChangeHandle(val) {
      this.searchForm.size = val;
      this.searchForm.current = 1;
      this.load = false;//重新加载
      this.getDataList();
    },
    //当前页
    currentChangeHandle(val) {
      console.log("page");
      this.searchForm.current = val;
      this.load = false;//重新加载
      this.getDataList();
    },
    // 新增 / 修改
    addOrUpdateHandle(id,views) {
      this.addOrUpdateVisible = true
      console.log(id, views);
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id,views);
      })
    },
    // 删除
    deleteHandle(id, name) {
      let that = this
      this.$confirm('是否确认删除：' + name, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        delObj(id).then(res => {
          if (res.data.data){
            that.$message.success('删除成功')
            that.getDataList()
          }else {
            that.$message.error('删除失败，当前文件有版权选用')
            that.getDataList()
          }
        })
      }).then(data => {

      })
    },
    //  导出excel
    exportExcel() {
      this.downBlobFile('/rs-training/subsidyfile/export', this.searchForm, 'subsidyfile.xlsx')
    },
    handleQuery() {
      this.searchForm.current = 1;
      this.load = false;//重新加载
      this.getDataList();
    },
    resetQuery() {
      this.searchForm.name = '';
      //this.searchForm.status = '';
      this.$refs['searchForm'].resetFields();
      this.handleQuery();
    },
  }
}
</script>
<style scoped lang="scss">
/deep/.cell {
  max-height: 110px;
  overflow-y: hidden;
}
/*查看截图水平居中*/
/*
/deep/.drag-inner {
  top: 50%!important;
  left: 50%;
  transform: translate(-50%,-50%);
}
*/

/deep/.el-icon-zoom-in {
  margin-right: 0!important;
}


.div-mask-one {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100px;
  cursor: pointer;
  height: 100px;
  background-color: rgba(0, 0, 0, 0.37);
  /* 垂直居中展示 注意点 如果使用绝对居中，其内容内容要用一个div包起来 */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 16px;
  color: #ffffff;
  transition: height 300ms;
  top: 1px;
}

.mask-one-p {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}



</style>

查看和编辑form

<template>
  <el-dialog
    :title="!dataForm.copyrightTemplateId ? '新增版权' : views && dataForm.copyrightTemplateId ? '查看版权' : '修改版权'"
    :close-on-click-modal="false"
    :visible.sync="visible"
    v-if="visible"
  >
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmit()"
      label-width="95px"
      label-position="left"
    >
      <el-form-item label="版权方名称" prop="name">
        <cl-input v-model="dataForm.name" placeholder="请输入版权方名称" :disabled="views"></cl-input>
      </el-form-item>
      <el-form-item label="版权类型" prop="type">
        <el-select v-model="dataForm.type" style="width: 100%" placeholder="请选择版权类型" :disabled="views">
          <el-option
            :label="item.label"
            :value="item.value"
            :key="index"
            v-for="(item, index) in typeOption"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="版权来源" prop="source" v-if="dataForm.type == 2">
        <cl-input v-model="dataForm.source" placeholder="请输入版权来源" :disabled="views"></cl-input>
      </el-form-item>

      <el-form-item label="添加附件" v-model="dataForm.files" prop="files" v-if="views">
        <div class="upload-content">
          <images :files="dataForm.files" :showPdfDownloadIcon="false" v-if="load"></images>
        </div>
      </el-form-item>
      <el-form-item label="添加附件" v-model="dataForm.files" prop="files" required :rules="{required: true,message: '附件文件不能为空',trigger: 'blur',}" v-else>

      <upload-file
          @uploadFileSuccess="uploadFileSuccess"
          @uploadDel="uploadDel"
          nameSpace="files"
          :limitSize="limitSize"
          table="copyrighttemplate"
          :files="fileList"
          :maximumNumber="true"
          :showPdfDownloadIcon="false"
      ></upload-file>

      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()" v-if="canSubmit"
        >确认{{ !dataForm.copyrightTemplateId ? '新增版权' : '修改版权'}}</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import { getObj, addObj, putObj } from "@/api/onstudy/copyrighttemplate";

import { getDicDataSource } from "@/util/common";
import uploadFile from "@/components/uploadFile";

export default {
  data() {
    return {
      visible: false,
      canSubmit: false,
      views: false,
      limitSize: 20,
      typeOption: [{value: 1,label: '自有'},{value: 2,label: '第三方'},],
      fileList: [],
      dataForm: {
        type: "",
        name: "",
        files: "",
        source: "",
      },
      dataRule: {
        type: [
          { required: true, message: "版权类型不能为空", trigger: "change" },
        ],
        name: [{ required: true, message: "版权方名称不能为空", trigger: "blur" }],
        source: [
          { required: true, message: "版权来源不能为空", trigger: "blur" },
          { pattern: /^[\u4e00-\u9fa5]+$/, message: "版权来源请输入文字",trigger: "blur" },
        ],
        // files: [{ required: true, message: "附件文件不能为空", trigger: "blur" }],
      },
      load:false
    };
  },
  created() {
  },
  components: { uploadFile },
  methods: {
    init(id,views) {
      console.log('views', id, views);
      if (views == 1) {
        this.views = true;
        this.canSubmit = false;
      } else {
        this.views = false;
        this.canSubmit = true;
      }
      this.fileList = []
      if (id) {
        this.dataForm.copyrightTemplateId = id;
      } else {
        delete this.dataForm.copyrightTemplateId;
      }
      this.dataForm.type = "";
      this.dataForm.name = "";
      this.dataForm.files = "";
      this.dataForm.source = "";
      this.visible = true;
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()

        this.load = false;

        if (this.dataForm.copyrightTemplateId) {
          getObj(this.dataForm.copyrightTemplateId).then((response) => {

            this.dataForm = response.data.data;
            this.fileList.push(response.data.data.files)
            if (this.fileList !== null) {
              this.fileList = this.fileList[0].split(",")
            }
            console.log(typeof this.fileList,this.fileList);
            this.load=true;
          });
        }
      });
    },
    //上传成功文件进行回显
    uploadFileSuccess(file, nameSpace) {
      console.log(file);
      this.fileList.push(file.relativelyPath);
    },
    //删除图片
    uploadDel(nameSpace, index) {
      this.fileList.splice(index, 1);
    },
    // 表单提交
    dataFormSubmit() {
      console.log(this.dataForm);
      this.dataForm.files = this.fileList.join(",");
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          this.canSubmit = false;
          if (this.dataForm.copyrightTemplateId) {
            putObj(this.dataForm)
              .then((data) => {
                this.$message({
                  message: "修改成功",
                  type: "success",
                });
                this.visible = false;
                this.$emit("refreshDataList");
              })
              .catch(() => {
                this.canSubmit = true;
              });
          } else {
            addObj(this.dataForm)
              .then((data) => {
                this.$message({
                  message: "添加成功",
                  type: "success",
                });
                this.visible = false;
                this.$emit("refreshDataList");
              })
              .catch(() => {
                this.canSubmit = true;
              });
          }
        }
      });
    },
  },
};
</script>
<style scoped lang="scss">
/deep/ #uploadContent {
  width: 440px;
}
</style>