475 lines
13 KiB
Vue
475 lines
13 KiB
Vue
<template>
|
||
<section class="storeManagement">
|
||
<ai-list isTabs>
|
||
<template slot="content">
|
||
<ai-search-bar bottomBorder>
|
||
<template slot="left">
|
||
<el-button
|
||
:disabled="!isLevel5"
|
||
type="primary"
|
||
icon="iconfont iconAdd"
|
||
@click="onAdd">
|
||
添加
|
||
</el-button>
|
||
</template>
|
||
</ai-search-bar>
|
||
<ai-table
|
||
:tableData="tableData"
|
||
:col-configs="colConfigs"
|
||
:total="total"
|
||
ref="aitableex"
|
||
:current.sync="search.current"
|
||
:size.sync="search.size"
|
||
@getList="getList">
|
||
<el-table-column
|
||
slot="changeIntegral"
|
||
label="积分"
|
||
align="center">
|
||
<template slot-scope="{ row }">
|
||
<span>{{ row.doType > 0 ? "+" : ""}}{{ row.changeIntegral }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column slot="options" label="操作" align="center" width="120" fixed="right">
|
||
<template slot-scope="{ row }">
|
||
<div class="table-options">
|
||
<el-button
|
||
type="text"
|
||
title="编辑"
|
||
style="margin-right: 8px;"
|
||
:disabled="!$permissions('app_appvillagerintegralshop_edit')"
|
||
@click="editItem(row)">
|
||
编辑
|
||
</el-button>
|
||
<ai-wechat-selecter :instance="instance" v-model="dialogInfo.operators" @change="getSelect">
|
||
<el-button
|
||
type="text"
|
||
@click="statusChage(row)"
|
||
title="授权"
|
||
v-if="$permissions('app_appvillagerintegralshop_edit')">
|
||
授权
|
||
</el-button>
|
||
</ai-wechat-selecter>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
</ai-table>
|
||
</template>
|
||
</ai-list>
|
||
<ai-dialog
|
||
:title="dialog.title"
|
||
:visible.sync="dialog.visible"
|
||
:customFooter="true"
|
||
:destroyOnClose="true"
|
||
@close="init('ruleForm')"
|
||
width="520px"
|
||
>
|
||
<div class="form_div">
|
||
<el-form
|
||
ref="ruleForm"
|
||
:model="dialogInfo"
|
||
:rules="formRules"
|
||
size="small"
|
||
label-suffix="："
|
||
label-width="100px"
|
||
>
|
||
<el-form-item label="店铺名称" prop="shopName">
|
||
<el-input
|
||
placeholder="请输入…"
|
||
v-model="dialogInfo.shopName"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="店主" prop="shopkeeper">
|
||
<el-input
|
||
placeholder="请输入…"
|
||
v-model="dialogInfo.shopkeeper"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="联系电话" prop="phone">
|
||
<el-input
|
||
placeholder="请输入…"
|
||
v-model="dialogInfo.phone"
|
||
maxlength="11"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="店铺地址" prop="shopAddress">
|
||
<el-input
|
||
placeholder="请输入…"
|
||
v-model="dialogInfo.shopAddress"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="状态" prop="status">
|
||
<el-radio-group v-model="dialogInfo.status">
|
||
<el-radio label="1">启用</el-radio>
|
||
<el-radio label="0">停用</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<div class="dialog-footer" slot="footer">
|
||
<el-button @click="dialog.visible = false" size="medium"
|
||
>取消</el-button
|
||
>
|
||
<el-button @click="onConfirm('ruleForm')" type="primary" size="medium"
|
||
>确认</el-button
|
||
>
|
||
</div>
|
||
</ai-dialog>
|
||
|
||
<ai-dialog
|
||
title="操作人授权"
|
||
:visible.sync="dialog.visibleStatus"
|
||
:customFooter="true"
|
||
:destroyOnClose="true"
|
||
@close="init('ruleStatus')"
|
||
width="720px"
|
||
>
|
||
<div class="form_div">
|
||
<el-form
|
||
ref="ruleStatus"
|
||
:model="dialogInfo"
|
||
:rules="formRules"
|
||
size="small"
|
||
label-suffix="："
|
||
label-width="100px"
|
||
>
|
||
<el-form-item label="事件区域" prop="areaId">
|
||
<ai-area-select
|
||
clearable
|
||
always-show
|
||
:instance="instance"
|
||
v-model="dialogInfo.areaId"
|
||
:hide-level="2"
|
||
:disabled-level="user.info.areaList.length"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="操作员" required>
|
||
<el-col :span="14" style="width: 60%; margin-right: 8px">
|
||
<el-form-item prop="operators">
|
||
<div class="organ">
|
||
<span v-if="dialogInfo.operators.length">
|
||
<span
|
||
v-for="(item, i) in dialogInfo.operators"
|
||
:key="i"
|
||
class="organzation"
|
||
>{{ item.userName }}
|
||
<span
|
||
class="iconfont iconOverrule"
|
||
@click.stop="delate(i)"
|
||
></span>
|
||
</span>
|
||
</span>
|
||
<span v-else style="color: #999">请选择</span>
|
||
</div>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="7" style="width: 30%">
|
||
<ai-person-select
|
||
:instance="instance"
|
||
:url="peopleAjaxUrl"
|
||
:isMultiple="true"
|
||
v-if="$permissions('app_appvillagerintegralshopoperator_edit')"
|
||
@selectPerson="getSelect"
|
||
:chooseUserList="dialogInfo.operators"
|
||
>
|
||
<template name="option" v-slot:option="{ item }">
|
||
<span class="iconfont iconProlife">{{ item.userName }}</span>
|
||
</template>
|
||
</ai-person-select>
|
||
</el-col>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<div class="dialog-footer" slot="footer">
|
||
<el-button @click="dialog.visibleStatus = false" size="medium"
|
||
>取消</el-button
|
||
>
|
||
<el-button @click="onConfirm('ruleStatus')" type="primary" size="medium"
|
||
>确认</el-button
|
||
>
|
||
</div>
|
||
</ai-dialog>
|
||
</section>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapState } from "vuex";
|
||
export default {
|
||
name: "storeManagement",
|
||
|
||
props: {
|
||
instance: Function,
|
||
dict: Object,
|
||
areaId: String,
|
||
},
|
||
|
||
data() {
|
||
return {
|
||
searchDotime: [],
|
||
search: {
|
||
current: 1,
|
||
size: 10,
|
||
},
|
||
unitId: "",
|
||
total: 10,
|
||
colConfigs: [
|
||
{ prop: "shopName", label: "店铺名称", align: "left" },
|
||
{
|
||
prop: "shopkeeper",
|
||
label: "店主",
|
||
align: "center",
|
||
},
|
||
{
|
||
prop: "phone",
|
||
label: "联系电话",
|
||
align: "center",
|
||
},
|
||
{
|
||
prop: "shopAddress",
|
||
label: "店铺地址",
|
||
align: "left",
|
||
width: 280,
|
||
},
|
||
{
|
||
prop: "names",
|
||
label: "店铺操作员",
|
||
align: "left",
|
||
},
|
||
{
|
||
prop: "status",
|
||
label: "状态",
|
||
align: "center",
|
||
render: (h, params) => {
|
||
return h(
|
||
"span",
|
||
{
|
||
class: "status-" + params.row.status,
|
||
},
|
||
this.$dict.getLabel("assessmentStartStatus", params.row.status)
|
||
);
|
||
},
|
||
},
|
||
{ slot: "options", label: "操作", align: "center" },
|
||
],
|
||
tableData: [],
|
||
dialog: {
|
||
title: "",
|
||
visible: false,
|
||
visibleStatus: false,
|
||
},
|
||
dialogInfo: {
|
||
shopName: "",
|
||
shopkeeper: "",
|
||
phone: "",
|
||
shopAddress: "",
|
||
status: "1",
|
||
areaId: "",
|
||
operators: [],
|
||
},
|
||
formRules: {
|
||
shopName: [
|
||
{ required: true, message: "请输入店铺名称", trigger: "change" },
|
||
],
|
||
shopkeeper: [
|
||
{ required: true, message: "请输入店主", trigger: "blur" },
|
||
],
|
||
phone: [{ required: true, message: "请输入联系电话", trigger: "blur" }],
|
||
shopAddress: [
|
||
{ required: true, message: "请输入店铺地址", trigger: "blur" },
|
||
],
|
||
status: [{ required: true, message: "请选择状态", trigger: "blur" }],
|
||
areaId: [
|
||
{ required: true, message: "请选择事件区域", trigger: "blur" },
|
||
],
|
||
operators: [
|
||
{ required: true, message: "请选择操作员", trigger: "blur" },
|
||
],
|
||
},
|
||
peopleAjaxUrl: "/admin/user/page",
|
||
isLevel5: false,
|
||
};
|
||
},
|
||
|
||
computed: {
|
||
...mapState(["user"]),
|
||
},
|
||
|
||
mounted() {
|
||
this.unitId = this.user.info.unitId;
|
||
|
||
this.$dict.load(["assessmentStartStatus"]).then(() => {
|
||
this.getList();
|
||
});
|
||
},
|
||
|
||
methods: {
|
||
getList() {
|
||
this.isLevel5 = this.areaId.substring(this.areaId.length - 3) != "000";
|
||
this.instance
|
||
.post(`/app/appvillagerintegralshop/list`, null, {
|
||
params: {
|
||
...this.search,
|
||
areaId: this.areaId,
|
||
},
|
||
})
|
||
.then((res) => {
|
||
if (res.code == 0) {
|
||
this.tableData = res.data.records;
|
||
this.total = res.data.total;
|
||
}
|
||
});
|
||
},
|
||
|
||
timeChange() {
|
||
if (this.searchDotime) {
|
||
this.search.doTimeStart = this.searchDotime[0];
|
||
this.search.doTimeEnd = this.searchDotime[1];
|
||
} else {
|
||
this.search.doTimeStart = null;
|
||
this.search.doTimeEnd = null;
|
||
}
|
||
this.search.current = 1;
|
||
this.getList();
|
||
},
|
||
|
||
editItem(row) {
|
||
this.dialogInfo = { ...row };
|
||
this.dialog.visible = true;
|
||
},
|
||
|
||
statusChage(row) {
|
||
this.dialogInfo = { ...row };
|
||
if (this.dialogInfo.operators.length) {
|
||
this.dialogInfo.operators.map((item) => {
|
||
item.userName = item.name;
|
||
});
|
||
} else {
|
||
this.dialogInfo.operators = [];
|
||
}
|
||
},
|
||
|
||
onReset() {
|
||
this.search.current = 1;
|
||
this.getList();
|
||
},
|
||
|
||
onConfirm(formName) {
|
||
if (this.dialogInfo.operators.length) {
|
||
this.dialogInfo.operators.map((item) => {
|
||
if (!item.name) {
|
||
item.name = item.userName;
|
||
}
|
||
});
|
||
}
|
||
this.$refs[formName].validate((valid) => {
|
||
if (valid) {
|
||
this.instance
|
||
.post(`/app/appvillagerintegralshop/addOrUpdate`, this.dialogInfo)
|
||
.then((res) => {
|
||
if (res.code == 0) {
|
||
this.onReset();
|
||
this.onCancel();
|
||
}
|
||
});
|
||
} else {
|
||
return false;
|
||
}
|
||
});
|
||
},
|
||
|
||
onCancel() {
|
||
this.dialog.visible = false;
|
||
this.dialog.visibleStatus = false;
|
||
},
|
||
|
||
init(formName) {
|
||
this.$refs[formName].clearValidate();
|
||
Object.keys(this.dialogInfo).forEach((e) => {
|
||
this.dialogInfo[e] = "";
|
||
});
|
||
this.dialogInfo.status = "1";
|
||
this.dialogInfo.operators = [];
|
||
},
|
||
|
||
getSelect(e) {
|
||
this.dialogInfo.operators = e;
|
||
this.dialogInfo.operators.map((item) => {
|
||
if (!item.name) {
|
||
item.name = item.userName;
|
||
}
|
||
});
|
||
this.instance
|
||
.post(`/app/appvillagerintegralshop/addOrUpdate`, this.dialogInfo)
|
||
.then((res) => {
|
||
this.dialogInfo.operators = []
|
||
if (res.code == 0) {
|
||
this.onReset();
|
||
}
|
||
}).catch(() => {
|
||
this.dialogInfo.operators = []
|
||
})
|
||
},
|
||
|
||
delate(index) {
|
||
this.dialogInfo.operators.splice(index, 1);
|
||
},
|
||
|
||
onAdd() {
|
||
Object.keys(this.dialogInfo).forEach((e) => {
|
||
this.dialogInfo[e] = "";
|
||
});
|
||
this.dialogInfo.status = "1";
|
||
this.dialogInfo.operators = [];
|
||
this.dialog.visible = true;
|
||
this.dialogInfo.areaId = this.areaId;
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.storeManagement {
|
||
height: 100%;
|
||
overflow: auto;
|
||
background: #f3f6f9;
|
||
.status-0 {
|
||
color: #ff4466;
|
||
}
|
||
|
||
.table-options {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.status-1 {
|
||
color: #2ea222;
|
||
}
|
||
|
||
.status-2 {
|
||
color: #999999;
|
||
}
|
||
|
||
.ai-dialog__content--wrapper {
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
.organ {
|
||
width: auto;
|
||
height: auto;
|
||
padding: 0px 10px;
|
||
line-height: 32px;
|
||
border: 1px solid #d0d4dc;
|
||
border-radius: 5px;
|
||
cursor: pointer;
|
||
box-sizing: border-box;
|
||
color: #666;
|
||
|
||
.organzation {
|
||
background-color: #eee;
|
||
margin-right: 4px;
|
||
padding: 4px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|