线条拖动

wente

2024-03-19 64e66a21a9111bbd21c442f3657f098f96f7b4df

 web/src/views/modules/sysPictureBase/SysPictureBase-AddOrUpdate.vue

@@ -1,28 +1,27 @@
<template>
  <zt-dialog ref="dialog" @confirm="formSubmit">
    <el-form :model="dataForm" ref="dataForm" :disabled="dataForm.disabled" label-width="120px">
      <zt-form-item label="类型" prop="type">
        <el-input v-model="dataForm.type"></el-input>
      </zt-form-item>
      <zt-form-item label="子类型" prop="subType">
        <el-input v-model="dataForm.subType"></el-input>
      </zt-form-item>

      <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="productType" rules="required">
        <zt-dict v-model="dataForm.productType" dict="product"></zt-dict>
      </zt-form-item>
      <zt-form-item label="是否默认" prop="isDefault" rules="required">
        <zt-dict v-model="dataForm.isDefault" dict="is_or_not"></zt-dict>
      </zt-form-item>
      <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-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>
      </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,37 +29,76 @@
</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: '',
          subType: '',
          isDefault: '',
          name: '',
          contentType: '',
          systemMark: '',
          sortNo: '',
          productType: '',
          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表单中
        if (!this.dataForm.id){
          this.dataForm.id = 0
        }
        params.append('id', this.dataForm.id)
        params.append('isDefault', this.dataForm.isDefault)
        params.append('name', this.dataForm.name)
        params.append('contentType', this.dataForm.contentType)
        params.append('productType', this.dataForm.productType)
        params.append('remark', this.dataForm.remark)
        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 +112,8 @@
  .img-sc > .el-form-item > .el-form-item__content {
    width: 100%;
  }
   .marginTopAndMarginBottom {

  .marginTopAndMarginBottom {
    margin-top: 10px !important;
    margin-bottom: 0 !important;
  }