赞
踩
<template> <div class="app-container"> <el-row :gutter="10" class="mb8"> <el-col :span="1.5"> <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['business:signConfig:add']">新增 </el-button> </el-col> <!-- <el-col :span="1.5">--> <!-- <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"--> <!-- v-hasPermi="['business:signConfig:edit']">修改--> <!-- </el-button>--> <!-- </el-col>--> <!-- <el-col :span="1.5">--> <!-- <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"--> <!-- v-hasPermi="['business:signConfig:remove']">删除--> <!-- </el-button>--> <!-- </el-col>--> <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> </el-row> <el-table v-loading="loading" :data="signConfigList" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55" align="center"/> <el-table-column label="ID" align="center" prop="id"/> <!-- <el-table-column label="${comment}" align="center" prop="dayDate" />--> <el-table-column label="签到天数" align="center" prop="dayDate"/> <el-table-column label="显示名称" align="center" prop="dayDesc"/> <!-- <el-table-column label="奖励列表,对应的是道具表的id" align="center" prop="itemIdList" />--> <el-table-column label="操作" align="center" class-name="small-padding fixed-width"> <template slot-scope="scope"> <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['business:signConfig:edit']">修改 </el-button> <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['business:signConfig:remove']">删除 </el-button> </template> </el-table-column> </el-table> <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/> <!-- 添加或修改签到配置对话框 --> <el-dialog :title="title" center :visible.sync="open" width="800px" append-to-body> <el-form ref="form" :model="form" :rules="rules" label-width="80px"> <el-form-item label="签到天数" prop="dayDate"> <el-input v-model="form.dayDate" :maxlength="5" placeholder="请输入签到天数"/> </el-form-item> <el-form-item label="显示名称" prop="dayDesc"> <el-input v-model="form.dayDesc" type="text" show-word-limit :maxlength="100" placeholder="请输入显示名称"/> </el-form-item> <el-divider content-position="center">奖励</el-divider> <el-row :gutter="10" class="mb8"> <el-col :span="1.5"> <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddAppItemConfig">添加</el-button> </el-col> <el-col :span="1.5"> <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteAppItemConfig">删除 </el-button> </el-col> </el-row> <el-table ref="scopeData" :data="appItemConfigList" :row-class-name="rowAppItemConfigIndex" @selection-change="handleAppItemConfigSelectionChange" > <el-table-column type="selection" align="center"/> <el-table-column label="序号" align="center" prop="index" width="50"/> <!-- <el-table-column label="道具id" prop="name" width="150">--> <!-- <template slot-scope="scope">--> <!-- <el-input v-model="scope.row.name" placeholder="请输入道具名称" />--> <!-- </template>--> <!-- </el-table-column>--> <el-table-column label="道具id" prop="itemId"> <template slot-scope="scope"> <el-input v-model="scope.row.itemId" placeholder="请选择道具id" @focus="getItemListDataDisable(scope.$index,scope)"> </el-input> </template> </el-table-column> <el-table-column label="道具名字" prop="itemName"> <template slot-scope="scope"> <el-input v-model="scope.row.itemName" disabled="true" placeholder="请输入道具名字"> </el-input> </template> </el-table-column> <el-table-column label="奖励数量" prop="count"> <template slot-scope="scope"> <el-input v-model="scope.row.count" autocomplete="off" placeholder="请输入正整数数值" @keyup.native="scope.row.count=test(scope.row.count)?scope.row.count:''"/> </template> </el-table-column> </el-table> </el-form> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="submitForm">确 定</el-button> <el-button @click="cancel">取 消</el-button> </div> </el-dialog> <el-dialog title="选择道具" :visible.sync="open2" width="800px" append-to-body> <el-table v-loading="loading" :data="itemConfigList" highlight-current-row @current-change="handleCurrentChange"> <el-table-column label="道具ID" align="center" width="100" prop="itemId"/> <el-table-column label="道具名称" align="center" prop="name"/> <el-table-column label="道具类型" align="center" width="100" prop="itemType"> <template v-slot="scope"> <span v-if="scope.row.itemType==1">食物</span> <span v-if="scope.row.itemType==2">日用品</span> <span v-if="scope.row.itemType==3">肥料</span> <span></span> </template> </el-table-column> <el-table-column label="道具描述" align="center" :show-overflow-tooltip="true" prop="itemDesc"/> </el-table> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="submitForm2">确 定</el-button> <el-button @click="open2=false">取 消</el-button> </div> </el-dialog> </div> </template> <script> import { listSignConfig, getSignConfig, delSignConfig, addSignConfig, updateSignConfig } from "@/api/business/signConfig"; import { getAllItemConfig } from "@/api/business/itemConfig"; export default { name: "SignConfig", data() { return { scopedIndex:"", itemConfigList: "", selectData: "", open2: false, //道具下拉列表 itemSelectData: [], // 遮罩层 loading: true, // 选中数组 ids: [], // 子表选中数据 checkedAppItemConfig: [], // 非单个禁用 single: true, // 非多个禁用 multiple: true, // 显示搜索条件 showSearch: true, // 总条数 total: 0, // 签到配置表格数据 signConfigList: [], // 道具配置表格数据 appItemConfigList: [], // 弹出层标题 title: "", // 是否显示弹出层 open: false, // 查询参数 queryParams: { pageNum: 1, pageSize: 10, dayDate: null, dayDesc: null, itemIdList: null }, // 表单参数 form: {}, // 表单校验 rules: { dayDate: [{ required: true, message: "天数不能为空", trigger: "blur" }, { validator: (rule, value, callback) => { if (/^(?:[1-9]\d*)$/.test(value) == false) { callback(new Error("请输入正整数")) } else { return callback() } }, trigger: 'blur', } ], scopedData:"", dayDesc: [{ required: true, message: "显示名称不能为空", trigger: "blur" }], } }; }, created() { this.getList(); this.getItemSelectData() }, methods: { test(num) { debugger var reg = /^\d+$/ if (!num.match(reg)) { return false } else { return true } }, /** 查询签到配置列表 */ getList() { this.loading = true; listSignConfig(this.queryParams).then(response => { this.signConfigList = response.rows; this.total = response.total; this.loading = false; }); }, submitForm2(){ debugger this.$refs.scopeData.data[this.scopedIndex].itemId= this.selectData.itemId this.$refs.scopeData.data[this.scopedIndex].itemName= this.selectData.name this.open2=false; }, // 取消按钮 cancel() { this.open = false; this.reset(); }, // 表单重置 reset() { this.form = { id: null, dayDate: null, dayDesc: null, itemIdList: null }; this.appItemConfigList = []; this.resetForm("form"); }, // oninput(count){ // return count=count.replace(/\D/g, '') // }, /** 搜索按钮操作 */ handleQuery() { this.queryParams.pageNum = 1; this.getList(); }, /** 重置按钮操作 */ resetQuery() { this.resetForm("queryForm"); this.handleQuery(); }, // 多选框选中数据 handleSelectionChange(selection) { this.ids = selection.map(item => item.id) this.single = selection.length !== 1 this.multiple = !selection.length }, /** 新增按钮操作 */ handleAdd() { this.reset(); this.open = true; this.title = "添加签到配置"; }, /** 修改按钮操作 */ handleUpdate(row) { this.reset(); const id = row.id || this.ids getSignConfig(id).then(response => { this.form = response.data; this.appItemConfigList = response.data.appItemConfigList; this.open = true; this.title = "修改签到配置"; }); }, getItemListDataDisable(index){ this.open2=true; this.scopedIndex=index; }, /** 提交按钮 */ submitForm() { this.$refs["form"].validate(valid => { if (valid) { this.form.appItemConfigList = this.appItemConfigList; if (this.form.id != null) { updateSignConfig(this.form).then(response => { this.$modal.msgSuccess("修改成功"); this.open = false; this.getList(); }); } else { addSignConfig(this.form).then(response => { this.$modal.msgSuccess("新增成功"); this.open = false; this.getList(); }); } } }); }, /** * 获取道具的下拉选框 * */ // getSelectData() { // // }, handleCurrentChange(val){ this.selectData=val; }, /** 删除按钮操作 */ handleDelete(row) { const ids = row.id || this.ids; this.$modal.confirm('是否确认删除签到配置编号为"' + ids + '"的数据项?').then(function () { return delSignConfig(ids); }).then(() => { this.getList(); this.$modal.msgSuccess("删除成功"); }).catch(() => { }); }, /** 道具配置序号 */ rowAppItemConfigIndex({ row, rowIndex }) { row.index = rowIndex + 1; }, /** 道具配置添加按钮操作 */ handleAddAppItemConfig() { let obj = {}; obj.name = ""; obj.itemId = ""; obj.itemName = ""; obj.count = ""; obj.itemSubType = ""; obj.icon = ""; obj.itemDesc = ""; obj.single = ""; obj.getMaxAcount = ""; obj.mask = ""; obj.effect = ""; this.appItemConfigList.push(obj); }, //获取下拉道具下拉选款数据 getItemSelectData() { getAllItemConfig().then(res => { if (res.code === 200) { this.itemConfigList = res.data; } }) }, /** 道具配置删除按钮操作 */ handleDeleteAppItemConfig() { if (this.checkedAppItemConfig.length == 0) { this.$modal.msgError("请先选择要删除的道具配置数据"); } else { const appItemConfigList = this.appItemConfigList; const checkedAppItemConfig = this.checkedAppItemConfig; this.appItemConfigList = appItemConfigList.filter(function (item) { return checkedAppItemConfig.indexOf(item.index) == -1 }); } }, /** 复选框选中数据 */ handleAppItemConfigSelectionChange(selection) { this.checkedAppItemConfig = selection.map(item => item.index) }, /** 导出按钮操作 */ handleExport() { this.download('business/signConfig/export', { ...this.queryParams }, `signConfig_${new Date().getTime()}.xlsx`) } } }; </script>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。