开发业务接口

jiangping

2024-01-26 8ebca068bb00e530ce44e10e7d009bcaa46c6579

 platform/src/components/business/OperaCategoryWindow.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,251 @@
<template>
  <GlobalWindow :title="title" :visible.sync="visible" :confirm-working="isWorking" @confirm="confirm" width="900px">
    <el-form :model="form" ref="form" label-width="120px" label-suffix="：" :rules="rules" v-loading="isUploading">
      <el-form-item label="类别名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入类别名称，不超过6个字" maxlength="6" v-trim />
      </el-form-item>
      <el-form-item label="图标" prop="imgurl">
        <UploadAvatarImage :file="{ 'imgurlfull': form.imgfullurl, 'imgurl': form.imgurl }"
          :uploadData="{ folder: 'category_img' }" @uploadSuccess="uploadReverseSuccess" @uploadEnd="isUploading = false"
          @uploadBegin="isUploading = true" />
        åªèƒ½ä¸Šä¼ å›¾ç‰‡æ ¼å¼ï¼Œpng格式，建议尺寸120*120px
      </el-form-item>
      <el-form-item label="加价系数" prop="priceRate">
        <!-- <el-input v-model="form.priceRate" placeholder="在京东采购价基础上，平台的加价系数" v-trim /> -->
        <el-input-number v-model="form.priceRate" controls-position="right" :min="0.1" :step="0.1"></el-input-number>
      </el-form-item>
      <el-form-item label="排序码(升序)" prop="sortnum">
        <el-input v-model="form.sortnum" type="number" placeholder="请输入排序码，升序展示" v-trim />
      </el-form-item>

    </el-form>
    <div class="param-table" >
      <div class="title-contant">
        <div class="title">参数属性配置</div>
        <div class="sub-title">配置当前类别的产品参数名</div>
      </div>
      <el-table :data="form.baseCateParamList" stripe border >
        <el-table-column prop="" label="参数名"  min-width="200px" align="center">
          <template slot-scope="{row}">
            <el-input v-model="row.name" placeholder="请输入参数名" v-trim />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100" align="center">
          <template slot-scope="{row, $index}">
            <el-button type="text" style="color: red"
              @click="form.baseCateParamList.splice($index, 1)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button style="color: #2E68EC; margin-top: 10px;" @click="addParam" icon="el-icon-plus">新增</el-button>
    </div>
  </GlobalWindow>
</template>
  
<script>
import BaseOpera from '@/components/base/BaseOpera'
import GlobalWindow from '@/components/common/GlobalWindow'
import UploadAvatarImage from '@/components/common/UploadAvatarImage.vue'
import { create, updateById } from '@/api/business/category.js'
export default {
  name: 'OperaCategoryWindow',
  extends: BaseOpera,
  components: { GlobalWindow, UploadAvatarImage },
  data() {
    return {
      action: process.env.VUE_APP_API_PREFIX + '/public/upload',
      isUploading: false,
      // è¡¨å•æ•°æ®
      form: {
        id: null,
        name: '',
        imgurl: '',
        imgfullurl: '',
        priceRate: '1.2',
        sortnum: '',

        // attrFirst: '',
        // attrFirst1: '',
        baseCateParamList: [],
        // attrSecond: '',
        // attrSecond1: '',
        // attrSecondList: [],

        // parameter: '',
        paramList: []

      },
      // éªŒè¯è§„则
      rules: {
        name: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ]
      },
      dialogVisible: false
    }
  },
  created() {
    this.config({
      api: '/business/category',
      'field.id': 'id'
    })
  },
  methods: {
    open(title, target) {
      this.title = title
      this.visible = true
      // æ–°å»º
      if (target == null) {
        this.$nextTick(() => {
          this.$refs.form.resetFields()
          this.form.imgfullurl = ''
          this.form.baseCateParamList = [{name:''}]
          this.form.paramList = [{name:''}]
          this.form[this.configData['field.id']] = null
        })
        return
      }
      // ç¼–辑
      this.$nextTick(() => {
        for (const key in this.form) {
          this.form[key] = target[key]
        }
        this.form.baseCateParamList = this.form.baseCateParamList || []
      })
    },
    addParam () {
      this.form.baseCateParamList.push({ name: '' })
    },
    changeInput (type, index) {
      if (type === 1) {
        if (!this.form.budgetList[index].minamount) return
        if (!/^[0-9]*[1-9][0-9]*$/.test(this.form.budgetList[index].minamount)) {
          this.$message.warning({
            type: 'warning',
            message: '预算只能输入正整数'
          })
          this.form.budgetList[index].minamount = ''
        }
      } else {
        if (!this.form.budgetList[index].maxamount) return
        if (!/^[0-9]*[1-9][0-9]*$/.test(this.form.budgetList[index].maxamount)) {
          this.$message.warning({
            type: 'warning',
            message: '预算只能输入正整数'
          })
          this.form.budgetList[index].maxamount = ''
        }
      }
    },

    confirm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.isWorking = true
          if (!this.form.id) {
            create(this.form)
              .then(() => {
                this.visible = false
                this.$tip.apiSuccess('新建成功')
                this.$emit('success')
              })
              .catch(e => {
                this.$tip.apiFailed(e)
              })
              .finally(() => {
                this.isWorking = false
              })
          } else {
            updateById(this.form)
              .then(() => {
                this.visible = false
                this.$tip.apiSuccess('编辑成功')
                this.$emit('success')
              })
              .catch(e => {
                this.$tip.apiFailed(e)
              })
              .finally(() => {
                this.isWorking = false
              })
          }
        } else {
          return false;
        }
      });
    },
    close(index, type) {
      if (type === 1) {
        this.form.attrFirstList.splice(index, 1)
      } else if (type === 2) {
        this.form.attrSecondList.splice(index, 1)
      } else if (type === 3) {
        this.form.paramList.splice(index, 1)
      }
    },
    confirmVal(type) {
      if (type === 1) {
        if (!this.form.attrFirst1) return
        this.form.attrFirstList.push({ name: this.form.attrFirst1 })
        this.form.attrFirst1 = ''
      } else if (type === 2) {
        if (!this.form.attrSecond1) return
        this.form.attrSecondList.push({ name: this.form.attrSecond1 })
        this.form.attrSecond1 = ''
      } else if (type === 3) {
        if (!this.form.parameter) return
        this.form.paramList.push({ name: this.form.parameter })
        this.form.parameter = ''
      }
    },
    add() {
      this.form.budgetList.push({ minamount: '', maxamount: '' })
    },
    begin() {
      this.isUploading = true
    },
    end() {
      this.isUploading = false
    },
    // ä¸Šä¼ å›¾ç‰‡
    uploadReverseSuccess(file) {
      this.form.imgurl = file.imgurl;
      this.form.imgfullurl = file.imgurlfull;
    },
    dele(i) {
      if (this.form.budgetList.length === 1) return
      this.form.budgetList.splice(i, 1)
    }
  }
}
</script>

<style lang="scss" scoped>
.param-table {
  //width: 70%;
  margin-top: 40px;

  .title-contant {
    display: flex;
    align-items: baseline;
    margin-bottom: 10px;
    .title {
      font-weight: 600;
      font-size: 20px;
      margin-right: 15px;
    }
    .sub-title {
      font-size: 14px;
    }
  }
}
::v-deep .el-form-item__content {
  .el-input {
    width: 300px;
  }
  .el-input-number {
    text-align: left;
    width: 300px;
  }
}
</style>