<template>
|
<div class="role-list">
|
<el-card class="search-box">
|
<el-form ref="formInline" :model="searchBox" :label-width="100" size="small" inline>
|
<el-form-item label="日期" prop="time">
|
<el-date-picker
|
v-model="searchBox.time"
|
type="daterange"
|
range-separator="-"
|
start-placeholder="开始日期"
|
style="width: 240px"
|
end-placeholder="结束日期"
|
>
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item label="角色名" prop="Role">
|
<el-select
|
v-model="searchBox.Role"
|
clearable
|
style="width: 240px"
|
placeholder="请输入角色"
|
>
|
<el-option
|
v-for="item in roleList"
|
clearable
|
filterable
|
:value="item.dataId + ''"
|
:key="item.dataId + ''"
|
v-text="item.dataName"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="状态" prop="Status">
|
<el-select
|
v-model="searchBox.Status"
|
clearable
|
style="width: 240px"
|
placeholder="请输入状态"
|
>
|
<el-option
|
v-for="item in statusList"
|
clearable
|
filterable
|
:value="item.dataId + ''"
|
:key="item.dataId + ''"
|
v-text="item.statusText"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item prop="Status">
|
|
<el-button
|
type="primary"
|
class="tablePageBtnStyle"
|
@click.native="searchFn"
|
>查询</el-button>
|
<el-button
|
type="primary"
|
class="tablePageBtnStyle"
|
@click.native="newAdd"
|
>+新增</el-button>
|
|
<el-button @click="userEdit">取消</el-button>
|
</el-form-item>
|
|
</el-form>
|
<!-- <div class="btnbox">
|
<el-button
|
type="primary"
|
class="tablePageBtnStyle"
|
@click.native="searchFn"
|
>查询</el-button
|
>
|
<el-button
|
type="primary"
|
class="tablePageBtnStyle"
|
@click.native="newAdd"
|
>+新增</el-button
|
>
|
</div> -->
|
|
</el-card>
|
<Etable
|
:columns="columns"
|
:defaultValue="defaultVal"
|
@changed="tableCall"
|
></Etable>
|
<!--新增模态窗 -->
|
<el-dialog v-model="addModel" width="500px" :title="modelName">
|
<el-form :model="formModelDat" :label-width="80">
|
<el-form-item label="角色名">
|
<el-input
|
v-model="formModelData.roleName"
|
placeholder="请输入角色名"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="状态">
|
<el-select v-model="formModelData.statusCheckbox">
|
<el-option value="all">全部</el-option>
|
<el-option value="on">启用</el-option>
|
<el-option value="off">停用</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="菜单权限">
|
<el-radio-group v-model="formModelData.menuCheckbox">
|
<el-radio label="0">订单查询</el-radio>
|
<el-radio label="1">财务管理</el-radio>
|
<el-radio label="2">订单处理</el-radio>
|
<el-radio label="3">门店管理</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="操作权限">
|
<el-radio-group v-model="formModelData.operationCheckbox">
|
<el-radio label="0">导出</el-radio>
|
<el-radio label="1">对账</el-radio>
|
<el-radio label="2">结算</el-radio>
|
<el-radio label="3">商户新增及审核</el-radio><br />
|
<el-radio label="4">结算查询</el-radio>
|
<el-radio label="5">提前结清</el-radio>
|
<el-radio label="6">对账查询</el-radio>
|
<el-radio label="7">商户编辑及密码重置</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</el-form>
|
<div slot="footer">
|
<el-button @click="addModel = false">取消</el-button>
|
<el-button v-if="!showSave" type="primary" @click.native="newAdd"
|
>新增</el-button
|
>
|
<el-button v-if="showSave" type="primary" @click.native="userEdit"
|
>保存</el-button
|
>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
<script>
|
import Etable from "../../components/table.vue";
|
export default {
|
name: "role-list",
|
components:{Etable},
|
data() {
|
return {
|
// 模态框的数据
|
formModelData: {
|
statusCheckbox: "all",
|
roleName: "",
|
operationCheckbox: [],
|
menuCheckbox: []
|
},
|
//查询的数据盒子
|
searchBox: {
|
// merId: Cookies.get('clouds2_plat_merId'),
|
time: [],
|
Status: "all",
|
Role: ""
|
},
|
showSave: false,
|
addModel: false,
|
modelName: "新增角色",
|
roleList: [], //角色列表
|
statusList: [
|
{
|
dataId: "all",
|
statusText: "全部"
|
},
|
{
|
dataId: "on",
|
statusText: "启用"
|
},
|
{
|
dataId: "off",
|
statusText: "停用"
|
}
|
], //状态列表
|
|
columns: [
|
// {
|
// title: "序号",
|
// align: "center",
|
// key: "orderId",
|
// width: 200
|
// },
|
{
|
lable: "创建日期",
|
align: "center",
|
prop: "prodName",
|
width: 200
|
},
|
{
|
lable: "角色名",
|
align: "center",
|
prop: "nodeStatus",
|
width: 180
|
},
|
{
|
lable: "状态",
|
align: "center",
|
prop: "cusMblNo",
|
width: 200
|
},
|
{
|
lable: "",
|
align: "center"
|
},
|
{
|
lable: "操作",
|
prop: "action",
|
width: 110,
|
fixed: "right",
|
align: "center",
|
render: (h, params) => {
|
let result = [];
|
result.push(
|
h(
|
"a",
|
{
|
style: {
|
color: "#357eff"
|
},
|
on: {
|
click: () => {
|
this.userEdit();
|
}
|
}
|
},
|
"编辑"
|
)
|
);
|
return h("div", result);
|
}
|
}
|
]
|
};
|
},
|
methods: {
|
searchFn() {
|
let obj = { ...this.searchBox };
|
this.filt = { ...this.defaultVal };
|
},
|
newAdd() {
|
this.addModel = true;
|
let obj = this.formModelData;
|
},
|
userEdit() {
|
this.addModel = true;
|
this.modelName = "编辑用户";
|
this.showSave = true;
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss">
|
.role-list {
|
padding: 16px;
|
.search-box {
|
display: flex;
|
justify-content: lex-start;
|
align-items: lex-start;
|
flex-direction: row;
|
padding-top: 24px;
|
padding-right: 24px;
|
background-color: #ffffff;
|
margin-bottom: 15px;
|
}
|
.btnbox {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
flex-direction: column;
|
.ivu-btn {
|
&:last-child {
|
margin-top: 20px;
|
}
|
}
|
}
|
}
|
|
.user-num {
|
display: flex;
|
margin-bottom: 16px;
|
.user-num-title {
|
width: 80px;
|
text-align: right;
|
vertical-align: middle;
|
float: left;
|
font-size: 12px;
|
color: #495060;
|
line-height: 1;
|
padding: 10px 12px 10px 0;
|
box-sizing: border-box;
|
}
|
.user-number {
|
vertical-align: middle;
|
float: left;
|
font-size: 12px;
|
color: #495060;
|
line-height: 1;
|
padding: 10px 12px 10px 0;
|
box-sizing: border-box;
|
}
|
}
|
</style>
|
