jinlin
2024-03-13 91c67198a84e9c0a76cc0154fbebf62813c1de26
web/src/views/modules/sysPictureBase/SysPictureBase-AddOrUpdate.vue
@@ -10,19 +10,24 @@
      <zt-form-item label="图片名称" prop="name" rules="required">
        <el-input v-model="dataForm.name"></el-input>
      </zt-form-item>
      <zt-form-item label="检索关键字" prop="contentType" >
      <zt-form-item label="检索关键字" prop="contentType">
        <el-input v-model="dataForm.contentType"></el-input>
      </zt-form-item>
      <zt-form-item label="系统标识" prop="systemMark" rules="required">
      <zt-form-item label="系统标识" prop="systemMark">
        <zt-dict v-model="dataForm.systemMark" dict="product"></zt-dict>
      </zt-form-item>
      <zt-form-item label="排序" prop="sortNo">
        <el-input v-model="dataForm.sortNo"  :readonly="readonly" @input=""></el-input>
        <el-input v-model="dataForm.sortNo" :readonly="readonly" @input=""></el-input>
      </zt-form-item>
      <div class="el-flex img-src" style="height: 20px">
        <el-form-item class="marginTopAndMarginBottom" style="width: 100%">
          <config-uploader :lineHeight="true" busi-type="sys_picture" model-name="dataForm" :dataForm="dataForm"
                           v-model="dataForm.files"/>
          <!--<config-uploader :lineHeight="true" busi-type="sys_picture" model-name="dataForm" :dataForm="dataForm"
                           v-model="dataForm.files"/>-->
          <el-upload :limit="1" :http-request="httpRequest" :before-upload="beforeUpload" :on-exceed="handleExceed">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          </el-upload>
          <el-image v-if="dataForm.id" :src="url+dataForm.id" style="height: 50px;width: 50px"></el-image>
        </el-form-item>
      </div>
    </el-form>
@@ -30,9 +35,13 @@
</template>
<script>
  import Cookies from "js-cookie";
  export default {
    data() {
      return {
        url: `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getProductImg?token=${Cookies.get('token')}&id=`,
        fileList: [],
        dataForm: {
          id: '',
          type: '',
@@ -43,24 +52,59 @@
          sortNo: '',
          remark: ''
        },
        readonly:{
        readonly: {
          type: Boolean,
          default: false
        },
      }
    },
    methods: {
      httpRequest(option) {
        this.fileList.length = 0
        this.fileList.push(option)
      },
      // 上传前处理
      beforeUpload(file) {
        let fileSize = file.size
        const FIVE_M = 5 * 1024 * 1024;
        //大于5M,不允许上传
        if (fileSize > FIVE_M) {
          this.$message.error("最大上传5M")
          return false
        }
      },
      // 文件数量过多时提醒
      handleExceed() {
        this.$message({type: 'error', message: '最多支持1个附件上传'})
      },
      // 获取信息
      async getInfo() {
        let res = await this.$http.get(`/sysPictureBase/SysPictureBase/${this.dataForm.id}`)
        let res = await this.$http.get(`/sysPictureBase/${this.dataForm.id}`)
        this.dataForm = {
          ...this.dataForm,
          ...res.data
        }
        console.log(this.dataForm, 'async getInfo()')
      },
      // 表单提交
      async formSubmit() {
        let res = await this.$http[!this.dataForm.id ? 'post' : 'put']('/sysPictureBase/SysPictureBase/', this.dataForm)
        console.log(this.dataForm, 'async formSubmit()')
        // 使用form表单的数据格式
        const params = new FormData()
        // 将上传文件数组依次添加到参数paramsData中
        this.fileList.forEach((x) => {
          params.append('file', x.file)
        });
        // 将输入表单数据添加到params表单中
        params.append('id', this.dataForm.id)
        params.append('type', this.dataForm.type)
        params.append('subType', this.dataForm.subType)
        params.append('name', this.dataForm.name)
        params.append('contentType', this.dataForm.contentType)
        params.append('systemMark', this.dataForm.systemMark)
        params.append('sortNo', this.dataForm.sortNo)
        console.log(params, 'async formSubmit()')
        let res = await this.$http.post('/sysPictureBase/save', params)
        if (res.success) {
          await this.$tip.success()
          this.$refs.dialog.close()
@@ -74,7 +118,8 @@
  .img-sc > .el-form-item > .el-form-item__content {
    width: 100%;
  }
   .marginTopAndMarginBottom {
  .marginTopAndMarginBottom {
    margin-top: 10px !important;
    margin-bottom: 0 !important;
  }