k94314517
2023-09-15 64f45c75ea93911b9841bf00bb4c436cd294be3a
company_admin/src/components/business/OperaCategoryWindow.vue
@@ -5,7 +5,25 @@
      :confirm-working="isWorking"
      @confirm="confirm"
    >
      <el-alert title="如果从平台选择商品进行直播,建议类别选择从平台库选择,系统已做数据关联;" type="warning" effect="dark" :closable="false"></el-alert>
      <h3 style="margin: 20px 0 10px 0;">基本信息</h3>
      <el-form :model="form" ref="form" :rules="rules">
        <el-form-item label="类别来源" prop="type">
          <el-radio-group v-model="form.type" @change="changeRadio">
            <el-radio :label="1">从平台库选择</el-radio>
            <el-radio :label="0">企业自建</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="选择类别" prop="platCateId" v-if="form.type == 1">
          <el-select v-model="form.platCateId" placeholder="请选择" @change="changeCategory">
            <el-option
              v-for="item in categoryList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类别名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入类别名称,不超过6个字" maxlength="6" v-trim/>
        </el-form-item>
@@ -14,7 +32,7 @@
            :action="action"
            :class="{ hide: hideUpload }"
            :file-list="form.fileList"
            :data="{ folder: 'projects' }"
            :data="{ folder: 'category_img' }"
            list-type="picture-card"
            :limit="1"
            :on-success="fileSuccess"
@@ -23,13 +41,56 @@
            <i class="el-icon-plus"></i>
            <div slot="tip" class="el-upload__tip">只能上传图片格式,png格式,建议尺寸120*120px</div>
          </el-upload>
          <!-- <el-input v-model="form.imgurl" placeholder="请输入图标" v-trim/> -->
        </el-form-item>
        <el-form-item label="排序码(升序)" prop="sortnum">
          <el-input v-model="form.sortnum" placeholder="请输入排序码" v-trim/>
        </el-form-item>
        <el-form-item label="筛选属性1名称" prop="attrFirst">
        <div style="margin: 20px 0 10px 0; height: 30px; display: flex; justify-content: space-between;">
          <h3 style="display: flex; align-items: flex-end;">参数属性配置<h6 style="margin-left: 10px;">配置当前类别的产品参数名</h6></h3>
          <el-button style="display: inline-block;" type="primary" v-if="form.type == 0" @click="addItem">+ 新增</el-button>
        </div>
        <el-table
          :data="form.tableData"
          border
          style="width: 100%">
          <el-table-column label="参数名">
            <template slot-scope="scope">
              <el-input v-model="scope.row.name" placeholder="请输入内容"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="设置为选项">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.isselect"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="1"
                :inactive-value="0">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="是否显示">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.isshow"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="1"
                :inactive-value="0">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" v-if="form.type == 0">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- <el-form-item label="筛选属性1名称" prop="attrFirst">
          <el-input v-model="form.attrFirst" maxlength="6" placeholder="请输入筛选属性名称,不超过6个字" v-trim/>
        </el-form-item>
        <el-form-item label="筛选属性1的值" prop="attrFirst">
@@ -53,8 +114,9 @@
          <div style="display: flex; align-items: center; flex-wrap: wrap;">
            <el-tag style="margin-right: 10px; margin-top: 10px;" @close="close(index, 3)" closable v-for="(item, index) in form.paramList" :key="index">{{ item.name }}</el-tag>
          </div>
        </el-form-item>
        </el-form-item> -->
        <h3 style="margin: 20px 0 10px 0; display: flex; align-items: flex-end;">预算区间配置<h6 style="margin-left: 10px;">配置当前类别的预算区间筛选值,上限和下限不能同时为空</h6></h3>
        <el-form-item label="预算区间" prop="attrSecond">
          <div style="display: flex; align-items: center; margin-bottom: 10px;" v-for="(item, index) in form.budgetList" :key="index">
            <el-input v-model="item.minamount" type="number" @input="changeInput(1, index)" placeholder="下限" v-trim/>
@@ -71,31 +133,35 @@
  <script>
  import BaseOpera from '@/components/base/BaseOpera'
  import GlobalWindow from '@/components/common/GlobalWindow'
  import { create, updateById } from '@/api/business/category.js'
  import { create, updateById, baseCategoryList, companyCreate, companyUpdateById } from '@/api/business/category.js'
  export default {
    name: 'OperaCategoryWindow',
    extends: BaseOpera,
    components: { GlobalWindow },
    data () {
      return {
        action: process.env.VUE_APP_API_PREFIX + '/public/uploadLocal',
        action: process.env.VUE_APP_API_PREFIX + '/public/upload',
        hideUpload: false,
        categoryList: [],
        
        // 表单数据
        form: {
          id: null,
          type: 1,
          platCateId: '',
          name: '',
          attrFirst: '',
          attrFirst1: '',
          attrFirstList: [],
          attrSecond: '',
          attrSecond1: '',
          attrSecondList: [],
          // attrFirst: '',
          // attrFirst1: '',
          // attrFirstList: [],
          // attrSecond: '',
          // attrSecond1: '',
          // attrSecondList: [],
          sortnum: '',
          parameter: '',
          // parameter: '',
          paramList: [],
          imgurl: '',
          tableData: [],
          budgetList: [
            {
              maxamount: '',
@@ -103,7 +169,7 @@
            }
          ],
          fileList: [],
          attributeValueOne: []
          // attributeValueOne: []
        },
        // 验证规则
        rules: {
@@ -121,6 +187,91 @@
      })
    },
    methods: {
      addItem() {
        this.form.tableData.push({ name: '', isselect: 0, isshow: 1 })
      },
      handleDelete(index) {
        this.form.tableData.splice(index, 1)
      },
      changeRadio(e) {
        this.form.name = ''
        this.form.platCateId = ''
        this.form.sortnum = ''
        this.form.tableData = []
        this.form.imgurl = ''
        this.form.fileList = []
        this.form.budgetList = [{
          maxamount: '',
          minamount: ''
        }]
      },
      confirm() {
        this.$refs.form.validate((valid) => {
          if (!valid) return
          // 调用新建接口
          this.isWorking = true
          if (!this.form.id) {
            companyCreate({
              paramList: this.form.tableData,
              type: this.form.type,
              sortnum: this.form.sortnum,
              platCateId: this.form.platCateId,
              name: this.form.name,
              imgurl: this.form.imgurl,
              budgetList: this.form.budgetList
            })
              .then(() => {
                this.visible = false
                this.$tip.apiSuccess('新建成功')
                this.$emit('success')
              })
              .catch(e => {
                this.$tip.apiFailed(e)
              })
              .finally(() => {
                this.isWorking = false
              })
          } else {
            companyUpdateById({
              id: this.form.id,
              paramList: this.form.tableData,
              type: this.form.type,
              sortnum: this.form.sortnum,
              platCateId: this.form.platCateId,
              name: this.form.name,
              imgurl: this.form.imgurl,
              budgetList: this.form.budgetList
            })
              .then(() => {
                this.visible = false
                this.$tip.apiSuccess('编辑成功')
                this.$emit('success')
              })
              .catch(e => {
                this.$tip.apiFailed(e)
              })
              .finally(() => {
                this.isWorking = false
              })
          }
        })
      },
      // 切换分类
      changeCategory(id) {
        this.categoryList.forEach(item => {
          if (item.id === id) {
            this.form.name = item.name
            this.form.sortnum = item.sortnum
            let arr = []
            item.baseCateParamList.forEach((row, index) => {
              arr.push({ name: row.name, isselect: index <= 1 ? 1 : 0, isshow: 1 })
            })
            this.form.tableData = arr
            this.form.imgurl = item.imgurl
            this.form.fileList = [{ url: item.imgfullurl }]
          }
        })
      },
      changeInput(type, index) {
        if (type === 1) {
          if (!this.form.budgetList[index].minamount) return
@@ -147,42 +298,42 @@
          message: '只能上传一个图标'
        })
      },
      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;
          }
        });
      },
      // 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)
@@ -230,15 +381,18 @@
            this.form = {
              id: null,
              name: '',
              attrFirst: '',
              attrFirst1: '',
              attrFirstList: [],
              attrSecond: '',
              attrSecond1: '',
              attrSecondList: [],
              type: 1,
              platCateId: '',
              tableData: [],
              // attrFirst: '',
              // attrFirst1: '',
              // attrFirstList: [],
              // attrSecond: '',
              // attrSecond1: '',
              // attrSecondList: [],
              sortnum: '',
              parameter: '',
              paramList: [],
              // parameter: '',
              // paramList: [],
              imgurl: '',
              budgetList: [
                {
@@ -247,8 +401,14 @@
                }
              ],
              fileList: [],
              attributeValueOne: []
              // attributeValueOne: []
            }
          } else {
            // 获取分类列表
            baseCategoryList({})
              .then(res => {
                this.categoryList = res
              })
          }
        }
      }