订单
This commit is contained in:
yanran200730
474
project/fengdu/app/AppIntegratingOrder/storeManagement.vue
Normal file
474
project/fengdu/app/AppIntegratingOrder/storeManagement.vue
Normal file
@@ -0,0 +1,474 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user