BJ_ZTEITS-Developers / parking-cloud-yudao

Commit e2cd336a22dd03de9dfb2f9b76050ef31ddfd5c2

Authored by luowenfeng
1 parent e1e55dc8

feature(管理后台): 规格值添加

Inline Side-by-side
Showing 1 changed file with 255 additions and 0 deletions
yudao-ui-admin/src/views/mall/product/property/value.vue 0 → 100644
  View file @e2cd336
  1 +<template>
  2 + <div class="app-container">
  3 + <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
  4 + <el-form-item label="规格名称" prop="propertyId">
  5 + <el-select v-model="queryParams.propertyId">
  6 + <el-option v-for="item in propertyOptions" :key="item.id" :label="item.id +'-'+ item.name" :value="item.id"/>
  7 + </el-select>
  8 + </el-form-item>
  9 + <el-form-item label="规格值" prop="name">
  10 + <el-input v-model="queryParams.name" placeholder="请输入规格值" clearable @keyup.enter.native="handleQuery"/>
  11 + </el-form-item>
  12 + <el-form-item label="状态" prop="status">
  13 + <el-select v-model="queryParams.status" placeholder="状态" clearable size="small">
  14 + <el-option v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)"
  15 + :key="dict.value" :label="dict.label" :value="dict.value"/>
  16 + </el-select>
  17 + </el-form-item>
  18 + <el-form-item>
  19 + <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
  20 + <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
  21 + </el-form-item>
  22 + </el-form>
  23 +
  24 + <el-row :gutter="10" class="mb8">
  25 + <el-col :span="1.5">
  26 + <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
  27 + v-hasPermi="['system:dict:create']">新增</el-button>
  28 + </el-col>
  29 + <!-- <el-col :span="1.5">
  30 + <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
  31 + v-hasPermi="['system:dict:export']">导出</el-button>
  32 + </el-col> -->
  33 + <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
  34 + </el-row>
  35 +
  36 + <el-table v-loading="loading" :data="dataList" >
  37 + <el-table-column label="规格值id" align="center" prop="id" />
  38 + <el-table-column label="规格值" align="center" prop="name" />
  39 + <el-table-column label="状态" align="center" prop="status">
  40 + <template slot-scope="scope">
  41 + <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status"/>
  42 + </template>
  43 + </el-table-column>
  44 + <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
  45 + <el-table-column label="创建时间" align="center" prop="createTime" width="180">
  46 + <template slot-scope="scope">
  47 + <span>{{ parseTime(scope.row.createTime) }}</span>
  48 + </template>
  49 + </el-table-column>
  50 + <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
  51 + <template slot-scope="scope">
  52 + <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
  53 + v-hasPermi="['system:dict:update']">修改</el-button>
  54 + <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
  55 + v-hasPermi="['system:dict:delete']">删除</el-button>
  56 + </template>
  57 + </el-table-column>
  58 + </el-table>
  59 +
  60 + <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
  61 + @pagination="getList"/>
  62 +
  63 + <!-- 添加或修改参数配置对话框 -->
  64 + <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
  65 + <el-form ref="form" :model="form" :rules="rules" label-width="90px">
  66 + <el-form-item label="规格值编码">
  67 + <el-input v-model="form.propertyId" :disabled="true" />
  68 + </el-form-item>
  69 + <el-form-item label="规格值" prop="name">
  70 + <el-input v-model="form.name" placeholder="请输入数据标签" />
  71 + </el-form-item>
  72 + <el-form-item label="状态" prop="status">
  73 + <el-radio-group v-model="form.status">
  74 + <el-radio v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)"
  75 + :key="dict.value" :label="parseInt(dict.value)">{{ dict.label }}
  76 + </el-radio>
  77 + </el-radio-group>
  78 + </el-form-item>
  79 + <el-form-item label="备注" prop="remark">
  80 + <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
  81 + </el-form-item>
  82 + </el-form>
  83 + <div slot="footer" class="dialog-footer">
  84 + <el-button type="primary" @click="submitForm">确 定</el-button>
  85 + <el-button @click="cancel">取 消</el-button>
  86 + </div>
  87 + </el-dialog>
  88 + </div>
  89 +</template>
  90 +
  91 +<script>
  92 +import { getPropertyList, getPropertyValuePage, createPropertyValue, updatePropertyValue, getPropertyValue, deletePropertyValue } from '@/api/mall/product/property'
  93 +import { getProperty } from "@/api/mall/product/property";
  94 +
  95 +export default {
  96 + name: "PropertyValue",
  97 + data() {
  98 + return {
  99 + // 遮罩层
  100 + loading: true,
  101 + // 导出遮罩层
  102 + exportLoading: false,
  103 + // 显示搜索条件
  104 + showSearch: true,
  105 + // 总条数
  106 + total: 0,
  107 + // 字典表格数据
  108 + dataList: [],
  109 + // 默认字典类型
  110 + defaultPropertyId: "",
  111 + // 弹出层标题
  112 + title: "",
  113 + // 是否显示弹出层
  114 + open: false,
  115 + // 类型数据字典
  116 + propertyOptions: [],
  117 + // 查询参数
  118 + queryParams: {
  119 + pageNo: 1,
  120 + pageSize: 10,
  121 + propertyId: undefined,
  122 + name: undefined,
  123 + status: undefined
  124 + },
  125 + // 表单参数
  126 + form: {},
  127 + // 表单校验
  128 + rules: {
  129 + name: [
  130 + { required: true, message: "规格值不能为空", trigger: "blur" }
  131 + ],
  132 + status: [
  133 + { required: true, message: "状态不能为空", trigger: "blur" }
  134 + ]
  135 + },
  136 +
  137 + };
  138 + },
  139 + created() {
  140 + const propertyId = this.$route.params && this.$route.params.propertyId;
  141 + this.getProperty(propertyId);
  142 + this.getPropertyList();
  143 + },
  144 + methods: {
  145 + /** 查询字典类型详细 */
  146 + getProperty(propertyId) {
  147 + getProperty(propertyId).then(response => {
  148 + this.queryParams.propertyId = response.data.id;
  149 + this.defaultPropertyId = response.data.id;
  150 + this.getList();
  151 + });
  152 + },
  153 + /** 查询字典类型列表 */
  154 + getPropertyList() {
  155 + getPropertyList().then(response => {
  156 + this.propertyOptions = response.data
  157 + });
  158 + },
  159 + /** 查询字典数据列表 */
  160 + getList() {
  161 + this.loading = true;
  162 + getPropertyValuePage(this.queryParams).then(response => {
  163 + this.dataList = response.data.list;
  164 + this.total = response.data.total;
  165 + this.loading = false;
  166 + });
  167 + },
  168 + // 取消按钮
  169 + cancel() {
  170 + this.open = false;
  171 + this.reset();
  172 + },
  173 + // 表单重置
  174 + reset() {
  175 + this.form = {
  176 + id: undefined,
  177 + propertyId: undefined,
  178 + name: undefined,
  179 + status: undefined,
  180 + remark: undefined
  181 + };
  182 + this.resetForm("form");
  183 + },
  184 + /** 搜索按钮操作 */
  185 + handleQuery() {
  186 + this.queryParams.pageNo = 1;
  187 + this.getList();
  188 + },
  189 + /** 重置按钮操作 */
  190 + resetQuery() {
  191 + this.resetForm("queryForm");
  192 + this.queryParams.propertyId = this.defaultPropertyId;
  193 + this.handleQuery();
  194 + },
  195 + /** 新增按钮操作 */
  196 + handleAdd() {
  197 + this.reset();
  198 + this.open = true;
  199 + this.title = "添加规格值";
  200 + this.form.propertyId = this.queryParams.propertyId;
  201 + },
  202 + /** 修改按钮操作 */
  203 + handleUpdate(row) {
  204 + this.reset();
  205 + const id = row.id || this.ids
  206 + getPropertyValue(id).then(response => {
  207 + this.form = response.data;
  208 + this.open = true;
  209 + this.title = "修改规格值";
  210 + });
  211 + },
  212 + /** 提交按钮 */
  213 + submitForm: function() {
  214 + this.$refs["form"].validate(valid => {
  215 + if (valid) {
  216 + if (this.form.id !== undefined) {
  217 + updatePropertyValue(this.form).then(response => {
  218 + this.$modal.msgSuccess("修改成功");
  219 + this.open = false;
  220 + this.getList();
  221 + });
  222 + } else {
  223 + createPropertyValue(this.form).then(response => {
  224 + this.$modal.msgSuccess("新增成功");
  225 + this.open = false;
  226 + this.getList();
  227 + });
  228 + }
  229 + }
  230 + });
  231 + },
  232 + /** 删除按钮操作 */
  233 + handleDelete(row) {
  234 + const ids = row.id;
  235 + this.$modal.confirm('是否确认删除字典编码为"' + ids + '"的数据项?').then(function() {
  236 + return deletePropertyValue(ids);
  237 + }).then(() => {
  238 + this.getList();
  239 + this.$modal.msgSuccess("删除成功");
  240 + }).catch(() => {});
  241 + },
  242 + /** 导出按钮操作 */
  243 + handleExport() {
  244 + const queryParams = this.queryParams;
  245 + this.$modal.confirm('是否确认导出所有数据项?').then(() => {
  246 + this.exportLoading = true;
  247 + return exportData(queryParams);
  248 + }).then(response => {
  249 + this.$download.excel(response, '字典数据.xls');
  250 + this.exportLoading = false;
  251 + }).catch(() => {});
  252 + }
  253 + }
  254 +};
  255 +</script>