<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>标签使用场景配置表</title>
<script type="text/javascript" src="${springMacroRequestContext.getContextPath()}/common/mcsVueJs.js?sessId=${sessionIdFunc()}"></script>
<script type="text/javascript" src="${springMacroRequestContext.getContextPath()}/common/mcsUtils.js?sessId=${sessionIdFunc()}"></script>
<style type="text/css">
.tb-cell {
margin: 0px;
padding: 0px;
}
.tb-header-cell {
background-color: #f5f7fa !important;
}
.tb-cell > .cell, .tb-header-cell > .cell {
padding: 0px 3px !important;
}
.el-link {
font-size: 12px !important;
}
.el-dialog__body {
padding: 20px 20px;
}
.title {
font-weight: bold;
margin: 20px 0;
font-size: 18px;
}
.main {
padding: 0 20px;
}
.goods-tag-common{white-space:nowrap;margin:5px;padding:1px 2px;font-family:Times New Roman;font-size:12px }
.goods-tag-blue{background:#558ED5;color:#FFF;border:1px solid;}
.goods-tag-pink{background:#FF6699;color:#FFF;border:1px solid;}
.goods-tag-warning{background:#DE2E71;color:#FFF;}
.goods-tag-special{border:1px solid #FF0000;color:#FF0000;}
</style>
</head>
<body>
<div class="div-with-bottom-split-line" style="height:40px;padding-right:10px;">
<font class="desc">标签配置页</font>
</div>
<div id="app" v-show="loadOver" style="display: none">
<el-form :inline="true" :model="queryForm" size="mini">
<el-form-item label="场景编码">
<el-input v-model="queryForm.sceneCode" placeholder="请输入场景编码"></el-input>
</el-form-item>
<el-form-item label="场景名称">
<el-input v-model="queryForm.sceneName" placeholder="请输入场景名称"></el-input>
</el-form-item>
<el-form-item style="padding-left: 80px;">
<el-button type="primary" @click="queryList" :disabled="loading">查询</el-button>
<el-button style="margin-left: 20px;" type="primary" @click="initAddRule" :disabled="loading">新增</el-button>
</el-form-item>
</el-form>
<el-table
ref="templateTable"
:data="templateList"
style="width: 100%;margin-top: 5px;font-size: 12px"
cell-class-name="tb-cell"
header-cell-class-name="tb-header-cell"
v-loading="loading"
head
size="mini"
tooltip-effect="dark"
border>
<el-table-column prop="sceneCode" label="场景编码" align="center"></el-table-column>
<el-table-column prop="sceneName" label="场景名称" align="center"></el-table-column>
<el-table-column prop="status" label="可用状态" align="center">
<template slot-scope="scope">
{{scope.row.status == 1?"禁用":"启用"}}
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="150px">
<template slot-scope="scope">
<el-button type="text" size="mini" :type="buttonType(scope.row.status)" @click="handleStatusConfirm(scope.row.id)">
<span v-if="scope.row.status == 0">禁用</span>
<span v-else>启用</span>
</el-button>
<el-button type="text" size="mini" @click="initEditRule(scope.row.sceneCode)">配置</el-button>
<el-button type="text" size="mini" @click="deleteConfirm(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div style="text-align: center;padding: 15px 0 30px 0;">
<el-pagination
small
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="recordPagination.currentPage"
:page-sizes="[5, 10, 20, 50]"
:page-size="recordPagination.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="recordPagination.totalCount">
</el-pagination>
</div>
<el-dialog :title="editForm.id != ''?'场景编辑':'场景新增'" :visible.sync="displayAddFlag" width="550px;">
<el-form :model="editForm" :rules="editFormRules" ref="editForm" label-width="110px" size="mini">
<el-card class="box-card">
<el-header style="height: 30px;font-weight: bold">基本信息</el-header>
<el-form-item label="场景编码" prop="sceneCode">
<el-input v-model="editForm.sceneCode" placeholder="请输入场景编码" style="width: 390px;"></el-input>
</el-form-item>
<el-form-item label="场景名称" prop="sceneName">
<el-input v-model="editForm.sceneName" placeholder="请输入场景名称" style="width: 390px;"></el-input>
</el-form-item>
<el-form-item label="可用状态" prop="status">
<el-select v-model="editForm.status" style="width: 150px" clearable>
<el-option v-for="item in statusOptions" :key="item.value" :label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
</el-card>
</el-form>
<div slot="footer">
<el-button @click="cancelEditRule()" size="mini">取消</el-button>
<el-button @click="submitEditRule()" type="primary" size="mini">提交</el-button>
</div>
</el-dialog>
<el-dialog :title="'场景配置'" :visible.sync="displayEditFlag" width="1200px;">
<div class="main">
<div class="title">使用场景配置明细表</div>
<el-divider></el-divider>
<el-tabs v-model="tabName" type="border-card">
<el-tab-pane label="使用场景配置明细表" name="vcPanel">
<tag-scene-cfg :key="timer" :type="sceneCode" @cancel-cfg="cancelConfig"></tag-scene-cfg>
</el-tab-pane>
</el-tabs>
</div>
</el-dialog>
</div>
</body>
<script type="text/javascript">
Vue.component('tag-scene-cfg', httpVueLoader('/mcs/mcs/mcsViews/goodsBizTag/component/tagSceneCfg.vue'));
Vue.component('tag-row', httpVueLoader('/mcs/mcs/mcsViews/goodsBizTag/component/tagRow.vue'));
let $this;
new Vue({
el: '#app',
data: {
sceneCode: '',
tabName: "vcPanel",
loadOver: false,
loading: false,
timer: '',
templateList: [],
queryForm: {
sceneCode: '',
sceneName: ''
},
buttonType(val) {
if (val) {
return "success"
} else {
return "danger"
}
},
// 判断按钮颜色
statusOptions: [
{value: 0, label: '启用'},
{value: 1, label: '禁用'}
],
positionOptions:[
{value: 'before', label: 'before'},
{value: 'after', label: 'after'}
],
recordPagination: {
currentPage: 1,
pageSize: 10,
totalCount: 0
},
editForm: {
id: '',
sceneCode: '',
sceneName: '',
status: '',
},
configForm:{
sceneCode: '',
tagName: '',
tagOrders: '',
tagGroup: '',
tagPosition: '',
},
displayEditFlag: false,
displayAddFlag:false,
editFormRules: {
sceneCode: [
{required: true, message: '场景编码不能为空', trigger: 'blur'}
],
sceneName: [
{required: true, message: '场景名称不能为空', trigger: 'blur'}
],
status: [
{required: true, message: '请选择启用状态', trigger: 'change'}
],
},
},
mounted: function () {
$this = this;
// 加载完毕的标识
this.loadOver = true;
$http = axios.create({
baseURL: '/mcs'
});
$this.queryList();
},
methods: {
queryList: function () {
$this.loading = true;
let param = {};
param.sceneCode = $this.queryForm.sceneCode;
param.sceneName = $this.queryForm.sceneName;
param.pageNum = $this.recordPagination.currentPage;
param.pageSize = $this.recordPagination.pageSize;
$http.get("/goodsBizTagScene/querySceneList.do", {params: param}).then(function (response) {
console.log('queryTagSceneList result :', response);
$this.templateList = response.data.data.list;
$this.recordPagination.currentPage = response.data.data.pageNum;
$this.recordPagination.pageSize = response.data.data.pageSize;
$this.recordPagination.totalCount = response.data.data.total;
}).catch(function (error) {
$this.loading = false;
console.log(error);
}).finally(function () {
$this.loading = false;
});
},
handleSizeChange: function (val) {
$this.recordPagination.pageSize = val;
$this.queryList();
},
handleCurrentChange: function (val) {
$this.recordPagination.currentPage = val;
$this.queryList();
},
initEditRule: function (sceneCode) {
$this.sceneCode = sceneCode;
$this.timer = new Date().getTime();
$this.displayEditFlag = true;
},
initAddRule: function () {
$this.editForm.id = '';
$this.displayAddFlag = true;
$this.clearEditData();
},
handleStatusConfirm: function(id){
this.$confirm('此操作将改变该场景可用状态, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
$this.handleStatus(id);
}).catch(() => {
});
},
handleStatus: function (id) {
$http.get("/goodsBizTagScene/handleStatus.do", {params: {id: id}}).then(function (response) {
console.log('handleStatus result:', response.data);
if (response.data.state == "000000") {
$this.$message({
message: '标签状态改变成功！',
type: 'success'
});
$this.queryList();
} else {
$this.$message.error(response.data.message);
}
}).catch(function (error) {
console.log(error);
}).finally(function () {
});
},
clearEditData: function () {
if (this.$refs["editForm"]) {
this.$refs["editForm"].resetFields()
}
//clear data
$this.editForm.sceneCode = '';
$this.editForm.sceneName = '';
$this.editForm.status = '';
$this.editForm.tagList = [];
},
cancelEditRule: function () {
$this.displayEditFlag = false;
},
submitEditRule: function () {
//validate param
let validateError = false;
this.$refs["editForm"].validate(function (valid) {
if (!valid) {
validateError = true;
$this.$message.error('参数校验错误，请填写后提交！');
}
});
if (validateError) {
return;
}
let url = $this.editForm.id ? '/goodsBizTagScene/updateTagScene.do' : '/goodsBizTagScene/addTagScene.do';
$http({
method: 'post',
url: url,
header: {
'Content-Type': 'application/json;charset=utf-8' //如果写成contentType会报错
},
data: $this.editForm,
}).then(function (response) {
console.log('addTagScene result:', response.data);
if (response.data.state == "000000") {
$this.displayAddFlag = false;
$this.$message({
message: '添加场景成功',
type: 'success'
});
$this.queryList();
} else {
$this.$message.error(response.data.message);
}
}).catch(function (error) {
console.log(error);
}).finally(function () {
});
},
deleteConfirm: function (id) {
this.$confirm('此操作将删除此场景, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
$this.deleteScene(id);
}).catch(() => {
});
},
deleteScene: function (id) {
$http.get("/goodsBizTagScene/deleteTagScene.do", {params: {id: id}}).then(function (response) {
console.log('queryTagSceneById result:', response.data);
if (response.data.state == "000000") {
$this.$message({
message: '删除场景成功！',
type: 'success'
});
$this.queryList();
} else {
$this.$message.error(response.data.message);
}
}).catch(function (error) {
console.log(error);
}).finally(function () {
});
},
cancelConfig: function () {
console.log("cancel");
$this.displayEditFlag = false;
}
},
});
</script>
</html>
对于前端组件点击一次之后不会再重新加载数据的问题，可以传一个 :key 参数是时间
某个点击之后 key都是不同的 都会重新加载
tagSceneCfg.vue
<template>
<div>
<div class="forbidden-div">
<div>
<el-tag class="panel-title">使用场景标签配置</el-tag>
<el-button type="primary" size="mini" @click="addTagRow" >新增</el-button>
<el-button type="primary" size="mini" @click="queryDefault">默认配置</el-button>
</div>
<tag-row v-for="(item,index) in configList" @del-row="delTagRow" @check="hadSelect"
:tag="item" :row="index" :tag-list="tagListOptions">
</tag-row>
</div>
<div class="btn-row">
<el-button type="primary" size="middle" :loading="isLoad" :disabled="loadingFlag" @click="submitConfigTag"
style="margin-left: 200px;">保存
</el-button>
<el-button size="middle" @click="cancelConfig">取消</el-button>
</div>
</div>
</template>
<script>
let $http;
module.exports = {
props: ["type"],
data: function () {
return {
sceneCode: '',
tabName: "vcPanel",
loadingFlag: false,
isLoad: false,
configList: [],//某个场景下得标签
defaultList: [],//默认标签配置
tagListOptions: [],//所有标签
}
},
mounted: function () {
$http = axios.create({
baseURL: '/mcs'
});
this.initEditRule(this.type);
this.searchTag();
},
methods: {
searchTag: function(){
let $this = this;
$http.get("/goodsBizTagScene/queryTag.do", {}).then(function (response) {
console.log('searchTag result:', response);
for(let i = 0; i < response.data.data.length; i++ ){
let tempObj = {};
tempObj.value = response.data.data[i].tagCode;
tempObj.label = response.data.data[i].tagName;
tempObj.tmpState = false;
$this.tagListOptions.push(tempObj);
}
}).catch(function (error) {
$this.loading = false;
console.log(error);
}).finally(function () {
$this.loading = false;
});
},
initEditRule: function (sceneCode) {
let $this = this;
$http.get("/goodsBizTagScene/queryTagListBySceneCode.do", {params: {sceneCode: sceneCode}}).then(function (response) {
console.log('queryTagListBySceneCode result:', response.data);
$this.configList = response.data;
$this.sceneCode = sceneCode;
}).catch(function (error) {
console.log(error);
}).finally(function () {
});
},
queryDefault: function () {
let $this = this;
let defCode = 'default';
$http.get("/goodsBizTagScene/queryTagListBySceneCode.do", {params: {sceneCode: defCode}}).then(function (response) {
console.log('queryTagListBySceneCode result:', response.data);
$this.configList = response.data;
for (let i = 0; i < $this.configList.length; i++) {
$this.configList[i].sceneCode = $this.sceneCode;
}
}).catch(function (error) {
console.log(error);
}).finally(function () {
});
},
addTagRow: function () {
let param = {};
param.tag = '';
param.tagOrders = '';
param.tagGroup = '';
param.tagPosition = '';
param.sceneCode = this.sceneCode;
param.isDeleted = 0;
this.configList.push(param);
console.log('param', param);
},
delTagRow: function (index) {
this.configList.splice(index, 1);
},
submitConfigTag: function () {
let $this = this;
$this.loadingFlag = true;
$this.isLoad = true;
let url = '/goodsBizTagScene/submitConfig.do';
$http({
method: 'post',
url: url,
header: {
'Content-Type': 'application/json;charset=utf-8' //如果写成contentType会报错
},
data: $this.configList,
}).then(function (response) {
console.log('addTagScene result:', response.data);
$this.$emit("cancel-cfg")
if (response.data.state == "000000") {
$this.displayEditFlag = false;
$this.$message({
message: '添加场景成功',
type: 'success'
});
} else {
$this.$message.error(response.data.message);
}
}).catch(function (error) {
console.log(error);
}).finally(function () {
$this.loadingFlag = false;
$this.isLoad = false;
});
},
cancelConfig: function () {
console.log('cancel');
this.$emit("cancel-cfg")
},
hadSelect: function (tag){
let selected = false;
let index = tag.row;
for(let i = 0 ; i < this.configList.length; i++ ){
if(this.configList[i].tagCode == undefined){
continue;
}else{
if(tag.row != i){
if(tag.tagCode == this.configList[i].tagCode){
$this.$message({
message: '不可重复选择',
type: 'error'
});
tag.tagCode = ''
selected = true;
break;
}
}
}
}
if (selected == false) {
this.configList[index].tagCode = tag.tagCode;
}
}
}
};
</script>
tagRow.vue
标签使用场景配置表组件
<template>
<div style="margin: 20px 10px;">
<el-label class="item-label-number">{{row+1}}</el-label>
<el-label class="item-label-middle">名称</el-label>
<el-select @change="selectChanged" v-model="tag.tagCode" filterable style="width: 130px" >
<el-option v-for="item in tagList" :key="item.value" :label="item.label"
:value="item.value"
:disabled=item.tmpState></el-option>
</el-select>
<el-label class="item-label-middle">顺序</el-label>
<el-input v-model="tag.tagOrders" placeholder="请输入标签顺序" style="width: 130px;" size="mini"></el-input>
<el-label class="item-label-middle">分组</el-label>
<el-input v-model="tag.tagGroup" placeholder="请输入标签分组" style="width: 130px;" size="mini"></el-input>
<el-label class="item-label-middle">位置</el-label>
<el-select v-model="tag.tagPosition" filterable style="width: 130px" >
<el-option v-for="item in positionOptions" :key="item.value" :label="item.label"
:value="item.value"></el-option>
</el-select>
<el-button type="danger" size="mini" @click="deleteBtn">删除</el-button>
</div>
</template>
<script>
let $http;
module.exports = {
props: ["tag", "row", "tagList"],
data: function () {
return {
tabName: "vcPanel",
loadingFlag: false,
configList: [],//某个场景下得标签
positionOptions: [
{value: 'before', label: 'before'},
{value: 'after', label: 'after'}
],
}
},
mounted() {
$http = axios.create({
baseURL: '/mcs'
});
},
methods: {
deleteBtn: function () {
console.log("del ..." + this.row);
this.$emit("del-row", this.row)
},
selectChanged(value) {
this.tag.row=this.row;
this.$emit("check",this.tag);
},
}
}
</script>
v-model="tag.tagCode" 这个表示与tag的tagcode绑定了 选了啥 tagCode的值就是啥
1102
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
