电商后台管理系统商品分类参数可选项的添加与删除

╰+攻爆jí腚メ 2021-07-24 15:23 790阅读 0赞

一 代码

1 修改 Params.vue

  1. <template>
  2.     <div>
  3.         <!-- 面包屑导航区 -->
  4.         <el-breadcrumb separator-class="el-icon-arrow-right">
  5.             <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
  6.             <el-breadcrumb-item>商品管理</el-breadcrumb-item>
  7.             <el-breadcrumb-item>分类参数</el-breadcrumb-item>
  8.         </el-breadcrumb>
  9.         <!-- 卡片视图区 -->
  10.         <el-card>
  11.             <!-- 警告区-->
  12.             <el-alert title="注意：只允许为第三级分类设置相关参数！" type="warning" :closable=false show-icon>
  13.             </el-alert>
  14.             <!-- 选择商品分类区域 -->
  15.             <el-row class="cat-opt">
  16.                 <el-col>
  17.                     <span>商品分类：</span>
  18.                     <!-- 选择商品分类的级联选择框 -->
  19.                     <!-- options :指定数据源-->
  20.                     <!-- props :用来指定配置对象-->
  21.                     <!-- model :选中的父级分类的Id数组-->
  22.                     <!-- change :当选中改变时触发的事件-->
  23.                     <!-- clearable :清空选择-->
  24.                     <el-cascader
  25.                             expand-trigger="hover"
  26.                             v-model="selectedCateKeys"
  27.                             :options="cateList"
  28.                             :props="cateProps"
  29.                             @change="handleChange"
  30.                             clearable
  31.                     >
  32.                     </el-cascader>
  33.                 </el-col>
  34.             </el-row>
  35.             <!-- tab 页签区-->
  36.             <el-tabs v-model="activeName" @tab-click="handleTabClick">
  37.                 <!-- 添加 动态参数 面板-->
  38.                 <el-tab-pane label="动态参数" name="many">
  39.                     <el-button type="primary" size="mini"
  40.                                :disabled="isBtnDisable"
  41.                                @click="addDialogVisible = true"
  42.                     >添加参数
  43.                     </el-button>
  44.                     <!-- 动态参数表格 -->
  45.                     <el-table :data="manyTableData" border stripe>
  46.                         <!-- 展开行 -->
  47.                         <el-table-column type="expand">
  48.                             <template slot-scope="scope">
  49.                                 <!-- 循环渲染tag标签 -->
  50.                                 <el-tag v-for="(item,i) in scope.row.attr_vals" :key="i" closable
  51.                                         @close="handleClose(i,scope.row)">{
  52.    {item}}
  53.                                 </el-tag>
  54.                                 <!-- 输入文本框 -->
  55.                                 <el-input
  56.                                         class="input-new-tag"
  57.                                         v-if="scope.row.inputVisible"
  58.                                         v-model="scope.row.inputValue"
  59.                                         ref="saveTagInput"
  60.                                         size="small"
  61.                                         @keyup.enter.native="handleInputConfirm(scope.row)"
  62.                                         @blur="handleInputConfirm(scope.row)"
  63.                                 >
  64.                                 </el-input>
  65.                                 <!-- 按钮 -->
  66.                                 <el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+
  67.                                     New Tag
  68.                                 </el-button>
  69.                             </template>
  70.                         </el-table-column>
  71.                         <!-- 索引列 -->
  72.                         <el-table-column type="index"></el-table-column>
  73.                         <el-table-column label="参数名称" prop="attr_name"></el-table-column>
  74.                         <el-table-column label="操作">
  75.                             <template slot-scope="scope">
  76.                                 <el-button type="primary" size="mini" icon="el-icon-edit"
  77.                                            @click="showEditDialog(scope.row.attr_id)">编辑
  78.                                 </el-button>
  79.                                 <el-button type="danger" size="mini"
  80.                                            @click="removeParams(scope.row.attr_id)"
  81.                                            icon="el-icon-delete">删除
  82.                                 </el-button>
  83.                             </template>
  84.                         </el-table-column>
  85.                     </el-table>
  86.                 </el-tab-pane>
  87.                 <!-- 添加 静态属性 面板-->
  88.                 <el-tab-pane label="静态属性" name="only">
  89.                     <el-button type="primary" size="mini"
  90.                                :disabled="isBtnDisable"
  91.                                @click="addDialogVisible = true"
  92.                     >添加属性
  93.                     </el-button>
  94.                     <!-- 静态参数表格 -->
  95.                     <el-table :data="onlyTableData" border stripe>
  96.                         <!-- 展开行 -->
  97.                         <!-- 展开行 -->
  98.                         <el-table-column type="expand">
  99.                             <template slot-scope="scope">
  100.                                 <!-- 循环渲染tag标签 -->
  101.                                 <el-tag v-for="(item,i) in scope.row.attr_vals" :key="i" closable
  102.                                         @close="handleClose(i,scope.row)">{
  103.    {item}}
  104.                                 </el-tag>
  105.                                 <!-- 输入文本框 -->
  106.                                 <el-input
  107.                                         class="input-new-tag"
  108.                                         v-if="scope.row.inputVisible"
  109.                                         v-model="scope.row.inputValue"
  110.                                         ref="saveTagInput"
  111.                                         size="small"
  112.                                         @keyup.enter.native="handleInputConfirm(scope.row)"
  113.                                         @blur="handleInputConfirm(scope.row)"
  114.                                 >
  115.                                 </el-input>
  116.                                 <!-- 按钮 -->
  117.                                 <el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+
  118.                                     New Tag
  119.                                 </el-button>
  120.                             </template>
  121.                         </el-table-column>
  122.                         <!-- 索引列 -->
  123.                         <el-table-column type="index"></el-table-column>
  124.                         <el-table-column label="属性名称" prop="attr_name"></el-table-column>
  125.                         <el-table-column label="操作">
  126.                             <template slot-scope="scope">
  127.                                 <el-button type="primary" size="mini" icon="el-icon-edit"
  128.                                            @click="showEditDialog(scope.row.attr_id)">编辑
  129.                                 </el-button>
  130.                                 <el-button type="danger" size="mini"
  131.                                            @click="removeParams(scope.row.attr_id)"
  132.                                            icon="el-icon-delete">删除
  133.                                 </el-button>
  134.                             </template>
  135.                         </el-table-column>
  136.                     </el-table>
  137.                 </el-tab-pane>
  138.             </el-tabs>
  139.         </el-card>
  140.         <!-- 添加参数的对话框框 -->
  141.         <el-dialog
  142.                 :title="'添加'+titleText"
  143.                 :visible.sync="addDialogVisible"
  144.                 width="50%"
  145.                 @close="addDialogClosed"
  146.         >
  147.             <!-- 添加参数对话框 -->
  148.             <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px">
  149.                 <el-form-item :label="titleText" prop="attr_name">
  150.                     <el-input v-model="addForm.attr_name"></el-input>
  151.                 </el-form-item>
  152.             </el-form>
  153.             <span slot="footer" class="dialog-footer">
  154.                 <el-button @click="addDialogVisible = false">取 消</el-button>
  155.                 <el-button type="primary" @click="addParams">确 定</el-button>
  156.             </span>
  157.         </el-dialog>
  158.         <!-- 修改参数对话框-->
  159.         <el-dialog
  160.                 :title="'修改'+titleText"
  161.                 :visible.sync="editDialogVisible"
  162.                 width="50%"
  163.                 @close="editDialogClosed"
  164.         >
  165.             <!-- 修改参数对话框 -->
  166.             <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="100px">
  167.                 <el-form-item :label="titleText" prop="attr_name">
  168.                     <el-input v-model="editForm.attr_name"></el-input>
  169.                 </el-form-item>
  170.             </el-form>
  171.             <span slot="footer" class="dialog-footer">
  172.                 <el-button @click="editDialogVisible = false">取 消</el-button>
  173.                 <el-button type="primary" @click="editParams">确 定</el-button>
  174.             </span>
  175.         </el-dialog>
  176.     </div>
  177. </template>
  179. <script>
  180.     export default {
  181.         name: "Params",
  182.         data() {
  183.             return {
  184.                 /* 商品分类列表 */
  185.                 cateList: [],
  186.                 /* 级联选择框配置对象*/
  187.                 cateProps: {
  188.                     value: 'cat_id',
  189.                     label: 'cat_name',
  190.                     children: 'children'
  191.                 },
  192.                 /* 级联选择框双向绑定到数组*/
  193.                 selectedCateKeys: [],
  194.                 // 被激活页签的名称
  195.                 activeName: 'many',
  196.                 // 动态参数的数据
  197.                 manyTableData: [],
  198.                 // 静态参数的数据
  199.                 onlyTableData: [],
  200.                 // 控制添加对话框的显示和隐藏
  201.                 addDialogVisible: false,
  202.                 // 添加参数表单数据对象
  203.                 addForm: {
  204.                     attr_name: ''
  205.                 },
  206.                 // 添加表单验证规则对象
  207.                 addFormRules: {
  208.                     attr_name: [
  209.                         {required: true, message: '请输入参数名称', trigger: 'blur'}
  210.                     ]
  211.                 },
  212.                 // 控制修改对话框的显示和隐藏
  213.                 editDialogVisible: false,
  214.                 // 修改参数表单数据对象
  215.                 editForm: {
  216.                     attr_name: '',
  217.                     attr_id: ''
  218.                 },
  219.                 // 修改表单验证规则对象
  220.                 editFormRules: {
  221.                     attr_name: [
  222.                         {required: true, message: '请输入参数名称', trigger: 'blur'}
  223.                     ]
  224.                 }
  225.             }
  226.         },
  227.         created() {
  228.             this.getCateList()
  229.         },
  230.         methods: {
  231.             // 获取所有商品分类列表
  232.             async getCateList() {
  233.                 const {data: res} = await this.$http.get('categories')
  234.                 if (res.meta.status !== 200) {
  235.                     return this.$message.error('获取商品分类失败')
  236.                 }
  237.                 this.cateList = res.data
  238.             },
  239.             // 级联选择框选中项变化，会触发这个函数
  240.             handleChange() {
  241.                 this.getParamList()
  242.             },
  243.             // tab 页签点击事件的处理函数
  244.             handleTabClick() {
  245.                 this.getParamList()
  246.             },
  247.             // 获得参数列表数据
  248.             async getParamList() {
  249.                 // 证明选中的不是三级分类
  250.                 if (this.selectedCateKeys.length !== 3) {
  251.                     this.selectedCateKeys = []
  252.                     this.manyTableData = []
  253.                     this.onlyTableData = []
  254.                     return
  255.                 }
  256.                 // 根据所选分类的id和当前所选的面板，获取对应的参数
  257.                 const {data: res} = await this.$http.get(`categories/${this.cateId}/attributes`, {
  258.                     params: {
  259.                         sel: this.activeName
  260.                     }
  261.                 })
  262.                 if (res.meta.status !== 200) {
  263.                     return this.$message.error('获取商品参数列表失败')
  264.                 }
  266.                 res.data.forEach(item => {
  267.                     /* 将以空格隔开的字符串转换为数组 */
  268.                     item.attr_vals = item.attr_vals ? item.attr_vals.split(',') : []
  269.                     /* 控制文本框的显示和隐藏 */
  270.                     item.inputVisible = false
  271.                     /* 文本框中输入的值 */
  272.                     item.inputValue = ''
  273.                 });
  274.                 console.log(res.data)
  275.                 if (this.activeName === 'many') {
  276.                     this.manyTableData = res.data
  277.                 } else {
  278.                     this.onlyTableData = res.data
  279.                 }
  280.             },
  281.             // 对话框的关闭事件监听
  282.             addDialogClosed() {
  283.                 this.$refs.addFormRef.resetFields()
  284.             },
  285.             // 点击按钮，添加参数
  286.             addParams() {
  287.                 this.$refs.addFormRef.validate(async valid => {
  288.                     if (!valid) return
  289.                     const {data: res} = await this.$http.post(`categories/${this.cateId}/attributes`, {
  290.                         attr_name: this.addForm.attr_name,
  291.                         attr_sel: this.activeName
  292.                     })
  293.                     if (res.meta.status !== 201) {
  294.                         return this.$message.error('添加商品参数列表')
  295.                     }
  296.                     this.$message.success('添加商品参数成功')
  297.                     this.addDialogVisible = false
  298.                     this.getParamList()
  299.                 })
  300.             },
  301.             // 点击按钮，展示修改对话框
  302.             async showEditDialog(attr_id) {
  303.                 // 查询当前参数的信息
  304.                 const {data: res} = await this.$http.get(`categories/${this.cateId}/attributes/${attr_id}`, {
  305.                     params: {
  306.                         attr_sel: this.activeName
  307.                     }
  308.                 })
  309.                 if (res.meta.status !== 200) {
  310.                     return this.$message.error('获取参数信息失败')
  311.                 }
  312.                 this.editForm = res.data
  313.                 this.editDialogVisible = true;
  314.             },
  315.             // 重置修改的表单
  316.             editDialogClosed() {
  317.                 this.$refs.editFormRef.resetFields()
  318.             },
  319.             // 点击按钮，修改参数
  320.             editParams() {
  321.                 this.$refs.editFormRef.validate(async valid => {
  322.                     if (!valid) return
  323.                     const {data: res} = await this.$http.put(`categories/${this.cateId}/attributes/${this.editForm.attr_id}`, {
  324.                         attr_name: this.editForm.attr_name,
  325.                         attr_sel: this.activeName
  326.                     })
  327.                     if (res.meta.status !== 200) {
  328.                         return this.$message.error('修改商品参数列表')
  329.                     }
  330.                     this.$message.success('修改商品参数成功')
  331.                     this.editDialogVisible = false
  332.                     this.getParamList()
  333.                 })
  334.             },
  335.             // 点击按钮，删除参数
  336.             async removeParams(attr_id) {
  337.                 const confirmResult = await this.$confirm('此操作将永久删除该参数, 是否继续?', '提示', {
  338.                     confirmButtonText: '确定',
  339.                     cancelButtonText: '取消',
  340.                     type: 'warning'
  341.                 }).catch(err => err)
  342.                 if (confirmResult !== 'confirm') {
  343.                     return this.$message.info('已取消删除！')
  344.                 }
  345.                 const {data: res} = await this.$http.delete(`categories/${this.cateId}/attributes/${attr_id}`)
  346.                 if (res.meta.status !== 200) {
  347.                     return this.$message.error('删除商品参数列表')
  348.                 }
  349.                 this.$message.success('删除商品参数成功')
  350.                 this.getParamList()
  351.             },
  352.             // 文本框失去焦点，或摁下了 Enter 都会触发
  353.             handleInputConfirm(row) {
  354.                 if (row.inputValue.trim().length === 0) {
  355.                     row.inputValue = ''
  356.                     row.inputVisible = false
  357.                     return
  358.                 }
  359.                 // 如果没有return，则证明输入的内容，需要做后续的处理
  360.                 row.attr_vals.push(row.inputValue.trim())
  361.                 row.inputValue = ''
  362.                 row.inputVisible = false
  363.                 this.saveAttrVals(row)
  365.             },
  366.             // 点击按钮，展示输入文本框
  367.             showInput(row) {
  368.                 row.inputVisible = true
  369.                 /* 让文本框自动获得焦点 */
  370.                 /* $nextTick：页面中的元素被重新渲染后，才会回调函数中的代码*/
  371.                 this.$nextTick(_ => {
  372.                     this.$refs.saveTagInput.$refs.input.focus();
  373.                 });
  374.             },
  375.             // 将对save_vals的操作，保存到数据库
  376.             async saveAttrVals(row) {
  377.                 // 需要发起请求，保存到数据库中
  378.                 const {data: res} = await this.$http.put(`categories/${this.cateId}/attributes/${row.attr_id}`, {
  379.                     attr_name: row.attr_name,
  380.                     attr_sel: row.attr_sel,
  381.                     attr_values: row.attr_vals.join(',')
  382.                 })
  383.                 if (res.meta.status !== 200) {
  384.                     return this.$message.error('修改参数项失败！')
  385.                 }
  386.                 this.$message.success('修改参数项成功')
  387.             },
  388.             // 删除对应的参数可选项目
  389.             handleClose(i, row) {
  390.                 row.attr_vals.splice(i, 1)
  391.                 this.saveAttrVals(row)
  392.             }
  393.         },
  394.         computed: {
  395.             // 如果按钮需要被禁用，返回true
  396.             isBtnDisable() {
  397.                 if (this.selectedCateKeys.length !== 3) {
  398.                     return true
  399.                 } else {
  400.                     return false
  401.                 }
  402.             },
  403.             // 当前选中的三级分类的Id
  404.             cateId() {
  405.                 if (this.selectedCateKeys.length === 3) {
  406.                     return this.selectedCateKeys[2]
  407.                 }
  408.                 return null
  409.             },
  410.             // 动态计算标题文本
  411.             titleText() {
  412.                 if (this.activeName === 'many') {
  413.                     return '动态参数'
  414.                 } else {
  415.                     return '静态属性'
  416.                 }
  417.             }
  418.         }
  419.     }
  420. </script>
  422. <style scoped>
  423.     .cat-opt {
  424.         margin: 15px 0;
  425.     }
  427.     .input-new-tag {
  428.         width: 120px;
  429.     }
  430. </style>

二 测试

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70

发表评论

表情：
评论列表 （有 0 条评论，790人围观）

还没有评论，来说两句吧...

相关阅读