mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2026-11-07 09:28:53 +08:00
manager 升级到vue3
This commit is contained in:
pikachu1995@126.com
@@ -1,118 +1,165 @@
|
||||
<template>
|
||||
<div class="search">
|
||||
<Card>
|
||||
<Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form" @keydown.enter.native="handleSearch">
|
||||
<Form-item label="系统类型" prop="orderSn">
|
||||
<Select v-model="searchForm.type" placeholder="请选择系统类型" clearable style="width: 240px">
|
||||
<Option value="IOS">苹果</Option>
|
||||
<Option value="ANDROID">安卓</Option>
|
||||
</Select>
|
||||
</Form-item>
|
||||
<Button @click="handleSearch" type="primary" icon="ios-search">搜索</Button>
|
||||
</Form>
|
||||
</Card>
|
||||
<Card>
|
||||
<Button class="mt_10 mb_10" @click="addAppVersion" type="primary">添加</Button>
|
||||
<el-card>
|
||||
<el-form
|
||||
ref="searchForm"
|
||||
:model="searchForm"
|
||||
inline
|
||||
label-width="70px"
|
||||
class="search-form"
|
||||
@keyup.enter="handleSearch"
|
||||
>
|
||||
<el-form-item label="系统类型" prop="orderSn">
|
||||
<el-select v-model="searchForm.type" placeholder="请选择系统类型" clearable style="width: 240px">
|
||||
<el-option label="苹果" value="IOS" />
|
||||
<el-option label="安卓" value="ANDROID" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleSearch">搜索</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom" ></Table>
|
||||
<el-card>
|
||||
<el-button class="mt_10 mb_10" type="primary" @click="addAppVersion">添加</el-button>
|
||||
|
||||
<Row type="flex" justify="end" class="mt_10">
|
||||
<Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[20, 50, 100]" size="small"
|
||||
show-total show-elevator show-sizer></Page>
|
||||
</Row>
|
||||
</Card>
|
||||
<el-table ref="table" v-loading="loading" border :data="data" style="width: 100%">
|
||||
<el-table-column prop="versionName" label="版本名称" min-width="100" />
|
||||
<el-table-column prop="version" label="版本号" min-width="120" />
|
||||
<el-table-column label="强制更新" width="100">
|
||||
<template #default="{ row }">
|
||||
<span v-if="row">{{ row.forceUpdate == 0 ? "非强制" : "强制" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="类型" min-width="80">
|
||||
<template #default="{ row }">
|
||||
<span v-if="row">{{ row.type == "IOS" ? "苹果" : "安卓" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="versionUpdateDate" label="更新时间" min-width="120" sortable />
|
||||
<el-table-column label="操作" width="230" align="center" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<div v-if="row" class="ops">
|
||||
<a class="link-text" @click="detail(row)">查看</a>
|
||||
<span class="op-split">|</span>
|
||||
<a class="link-text" @click="editAppVersion(row)">修改</a>
|
||||
<span class="op-split">|</span>
|
||||
<a class="link-text" @click="remove(row)">删除</a>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<Modal :title="modalTitle" v-model="modalVisible" :mask-closable="false" :width="1000">
|
||||
<Form ref="form" :model="form" :label-width="100" :rules="formValidate">
|
||||
<FormItem label="版本名称" prop="versionName">
|
||||
<Input v-model="form.versionName" maxlength="15" clearable style="width: 40%" />
|
||||
<div class="mt_10" style="display: flex; justify-content: flex-end">
|
||||
<el-pagination
|
||||
v-model:current-page="searchForm.pageNumber"
|
||||
v-model:page-size="searchForm.pageSize"
|
||||
:page-sizes="[20, 50, 100]"
|
||||
:total="total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
size="small"
|
||||
@current-change="changePage"
|
||||
@size-change="changePageSize"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
</FormItem>
|
||||
<FormItem label="版本号" prop="version">
|
||||
<Input v-model="form.version" maxlength="15" clearable style="width: 40%" />
|
||||
<el-dialog
|
||||
v-model="modalVisible"
|
||||
:title="modalTitle"
|
||||
width="1000px"
|
||||
:close-on-click-modal="false"
|
||||
destroy-on-close
|
||||
>
|
||||
<el-form ref="form" :model="form" label-width="100px" :rules="formValidate">
|
||||
<el-form-item label="版本名称" prop="versionName">
|
||||
<el-input v-model="form.versionName" maxlength="15" clearable style="width: 40%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="版本号" prop="version">
|
||||
<el-input v-model="form.version" maxlength="15" clearable style="width: 40%" />
|
||||
<span class="tips">在移动端项目->manifest.json->基础配置->应用版本名称中查看</span>
|
||||
</FormItem>
|
||||
<FormItem label="更新时间" prop="versionUpdateDate">
|
||||
<DatePicker v-model="form.versionUpdateDate" type="datetime" format="yyyy-MM-dd HH:mm:ss" clearable placeholder="请选择" style="width: 200px"></DatePicker>
|
||||
</FormItem>
|
||||
<FormItem label="强制更新">
|
||||
<RadioGroup type="button" button-style="solid" v-model="form.forceUpdate">
|
||||
<Radio :label="1">强制更新</Radio>
|
||||
<Radio :label="0">非强制更新</Radio>
|
||||
</RadioGroup>
|
||||
</el-form-item>
|
||||
<el-form-item label="更新时间" prop="versionUpdateDate">
|
||||
<el-date-picker
|
||||
v-model="form.versionUpdateDate"
|
||||
type="datetime"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
clearable
|
||||
placeholder="请选择"
|
||||
style="width: 200px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="强制更新">
|
||||
<el-radio-group v-model="form.forceUpdate">
|
||||
<el-radio-button :value="1">强制更新</el-radio-button>
|
||||
<el-radio-button :value="0">非强制更新</el-radio-button>
|
||||
</el-radio-group>
|
||||
<span class="tips" v-if="form.forceUpdate == 1">
|
||||
强制更新即为应用中必须更新此版本。不更新则无法继续使用App
|
||||
强制更新即为应用中必须更新此版本。不更新则无法继续使用App
|
||||
</span>
|
||||
<span class="tips" v-if="form.forceUpdate == 0">
|
||||
非强制更新为应用中推荐更新此版本。不更新还可以继续使用
|
||||
非强制更新为应用中推荐更新此版本。不更新还可以继续使用
|
||||
</span>
|
||||
</FormItem>
|
||||
<FormItem label="类型">
|
||||
<RadioGroup type="button" button-style="solid" v-model="form.type">
|
||||
<Radio label="IOS">苹果</Radio>
|
||||
<Radio label="ANDROID">安卓</Radio>
|
||||
</RadioGroup>
|
||||
</FormItem>
|
||||
<FormItem label="下载地址" prop="downloadUrl">
|
||||
<Input v-model="form.downloadUrl" maxlength="100" clearable style="width: 40%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型">
|
||||
<el-radio-group v-model="form.type">
|
||||
<el-radio-button value="IOS">苹果</el-radio-button>
|
||||
<el-radio-button value="ANDROID">安卓</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="下载地址" prop="downloadUrl">
|
||||
<el-input v-model="form.downloadUrl" maxlength="100" clearable style="width: 40%" />
|
||||
<span class="tips" v-if="form.type == 'IOS'">
|
||||
AppStore中App项目下载目录。可从下载App页面点击分享，拷贝链接
|
||||
</span>
|
||||
<span class="tips" v-else>
|
||||
安卓该链接为应用的下载地址
|
||||
</span>
|
||||
</FormItem>
|
||||
<FormItem class="form-item-view-el" label="更新内容" prop="content">
|
||||
<Input v-model="form.content" :rows="6" maxlength="100" show-word-limit type="textarea" placeholder="Enter something..." />
|
||||
</FormItem>
|
||||
</Form>
|
||||
<div slot="footer">
|
||||
<Button type="text" @click="modalVisible = false">取消</Button>
|
||||
<Button type="primary" :loading="submitLoading" @click="saveAppVersion">保存</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
<div>
|
||||
<!-- 查看版本信息 -->
|
||||
<Modal :title="queryModalTitle" v-model="queryModalVisible" :width="700">
|
||||
<Form>
|
||||
<div class="div-version">
|
||||
<FormItem label="版本名称:">
|
||||
{{form.versionName}}
|
||||
</FormItem>
|
||||
</div>
|
||||
<div class="div-version">
|
||||
<FormItem label="版本号:">
|
||||
{{form.version}}
|
||||
</FormItem>
|
||||
</div>
|
||||
<span class="tips" v-else>安卓该链接为应用的下载地址</span>
|
||||
</el-form-item>
|
||||
<el-form-item class="form-item-view-el" label="更新内容" prop="content">
|
||||
<el-input
|
||||
v-model="form.content"
|
||||
:rows="6"
|
||||
maxlength="100"
|
||||
show-word-limit
|
||||
type="textarea"
|
||||
placeholder="Enter something..."
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="modalVisible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="submitLoading" @click="saveAppVersion">保存</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<FormItem label="更新时间:">
|
||||
<div>
|
||||
{{versionUpdateDate}}
|
||||
</div>
|
||||
</FormItem>
|
||||
<FormItem label="强制更新:">
|
||||
<span v-if="form.forceUpdate == 1">强制更新</span>
|
||||
<span v-else>非强制更新</span>
|
||||
</FormItem>
|
||||
<FormItem label="类型">
|
||||
<span v-if="form.type == 'IOS'">IOS</span>
|
||||
<span v-else>安卓</span>
|
||||
</FormItem>
|
||||
<FormItem label="下载地址:">
|
||||
{{form.downloadUrl}}
|
||||
</FormItem>
|
||||
<FormItem label="更新内容:">
|
||||
<div v-html="form.content">
|
||||
|
||||
</div>
|
||||
</FormItem>
|
||||
</Form>
|
||||
<div slot="footer">
|
||||
<Button type="text" @click="queryModalVisible = false">取消</Button>
|
||||
<el-dialog v-model="queryModalVisible" :title="queryModalTitle" width="700px">
|
||||
<el-form label-width="100px">
|
||||
<div class="div-version">
|
||||
<el-form-item label="版本名称:">{{ form.versionName }}</el-form-item>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
<div class="div-version">
|
||||
<el-form-item label="版本号:">{{ form.version }}</el-form-item>
|
||||
</div>
|
||||
<el-form-item label="更新时间:">
|
||||
<div>{{ versionUpdateDate }}</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="强制更新:">
|
||||
<span v-if="form.forceUpdate == 1">强制更新</span>
|
||||
<span v-else>非强制更新</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型">
|
||||
<span v-if="form.type == 'IOS'">IOS</span>
|
||||
<span v-else>安卓</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="下载地址:">{{ form.downloadUrl }}</el-form-item>
|
||||
<el-form-item label="更新内容:">
|
||||
<div v-html="form.content"></div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="queryModalVisible = false">取消</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -123,22 +170,20 @@ export default {
|
||||
name: "appVersion",
|
||||
data() {
|
||||
return {
|
||||
queryModalVisible: false, // 版本信息modal
|
||||
queryModalTitle: "查看更新信息", // modal标题
|
||||
loading: true, // 表单加载状态
|
||||
modalVisible: false, // 添加app版本模态框
|
||||
modalTitle: "", // 添加app版本标题
|
||||
modalType: 0, // 新增、编辑标识
|
||||
queryModalVisible: false,
|
||||
queryModalTitle: "查看更新信息",
|
||||
loading: true,
|
||||
modalVisible: false,
|
||||
modalTitle: "",
|
||||
modalType: 0,
|
||||
searchForm: {
|
||||
// 搜索框初始化对象
|
||||
pageNumber: 1, // 当前页数
|
||||
pageSize: 20, // 页面大小
|
||||
sort: "createTime", // 默认排序字段
|
||||
order: "desc", // 默认排序方式
|
||||
pageNumber: 1,
|
||||
pageSize: 20,
|
||||
sort: "createTime",
|
||||
order: "desc",
|
||||
type: "",
|
||||
},
|
||||
form: {
|
||||
// 添加或编辑表单对象初始化数据
|
||||
versionName: "",
|
||||
version: "",
|
||||
forceUpdate: 1,
|
||||
@@ -147,164 +192,33 @@ export default {
|
||||
content: "",
|
||||
versionUpdateDate: "",
|
||||
},
|
||||
versionUpdateDate: "", // 更新时间
|
||||
// 表单验证规则
|
||||
versionUpdateDate: "",
|
||||
formValidate: {
|
||||
version: [
|
||||
{ required: true, message: "版本号不能为空", trigger: "blur" },
|
||||
],
|
||||
versionName: [
|
||||
{ required: true, message: "版本名称不能为空", trigger: "blur" },
|
||||
],
|
||||
downloadUrl: [
|
||||
{ required: true, message: "下载地址不能为空", trigger: "blur" },
|
||||
],
|
||||
version: [{ required: true, message: "版本号不能为空", trigger: "blur" }],
|
||||
versionName: [{ required: true, message: "版本名称不能为空", trigger: "blur" }],
|
||||
downloadUrl: [{ required: true, message: "下载地址不能为空", trigger: "blur" }],
|
||||
versionUpdateDate: [{ required: true, message: "更新时间不能为空" }],
|
||||
},
|
||||
submitLoading: false, // 添加或编辑提交状态
|
||||
columns: [
|
||||
{
|
||||
title: "版本名称",
|
||||
key: "versionName",
|
||||
minWidth: 100,
|
||||
},
|
||||
{
|
||||
title: "版本号",
|
||||
key: "version",
|
||||
minWidth: 120,
|
||||
},
|
||||
{
|
||||
title: "强制更新",
|
||||
key: "forceUpdate",
|
||||
width: 100,
|
||||
render: (h, params) => {
|
||||
return h(
|
||||
"div",
|
||||
{
|
||||
props: {
|
||||
color: params.row.forceUpdate ? "primary" : "default",
|
||||
},
|
||||
},
|
||||
params.row.forceUpdate == 0 ? "非强制" : "强制"
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "类型",
|
||||
key: "type",
|
||||
minWidth: 80,
|
||||
render: (h, params) => {
|
||||
if (params.row.type == "IOS") {
|
||||
return h("div", [h("span", {}, "苹果")]);
|
||||
} else {
|
||||
return h("div", [h("span", {}, "安卓")]);
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
title: "更新时间",
|
||||
key: "versionUpdateDate",
|
||||
minWidth: 120,
|
||||
sortable: true,
|
||||
},
|
||||
|
||||
{
|
||||
title: "操作",
|
||||
key: "action",
|
||||
align: "center",
|
||||
fixed: "right",
|
||||
width: 230,
|
||||
render: (h, params) => {
|
||||
return h("div", [
|
||||
h(
|
||||
"a",
|
||||
{
|
||||
style: {
|
||||
color: "#2d8cf0",
|
||||
cursor: "pointer",
|
||||
textDecoration: "none",
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.detail(params.row);
|
||||
},
|
||||
},
|
||||
},
|
||||
"查看"
|
||||
),
|
||||
h(
|
||||
"span",
|
||||
{ style: { margin: "0 8px", color: "#dcdee2" } },
|
||||
"|"
|
||||
),
|
||||
h(
|
||||
"a",
|
||||
{
|
||||
style: {
|
||||
color: "#2d8cf0",
|
||||
cursor: "pointer",
|
||||
textDecoration: "none",
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.editAppVersion(params.row);
|
||||
},
|
||||
},
|
||||
},
|
||||
"修改"
|
||||
),
|
||||
h(
|
||||
"span",
|
||||
{ style: { margin: "0 8px", color: "#dcdee2" } },
|
||||
"|"
|
||||
),
|
||||
h(
|
||||
"a",
|
||||
{
|
||||
style: {
|
||||
color: "#2d8cf0",
|
||||
cursor: "pointer",
|
||||
textDecoration: "none",
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.remove(params.row);
|
||||
},
|
||||
},
|
||||
},
|
||||
"删除"
|
||||
),
|
||||
]);
|
||||
},
|
||||
},
|
||||
],
|
||||
data: [], // 表单数据
|
||||
total: 0, // 表单数据总数
|
||||
submitLoading: false,
|
||||
data: [],
|
||||
total: 0,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 获取表格数据
|
||||
init() {
|
||||
this.getData();
|
||||
},
|
||||
// 分页 修改页码
|
||||
changePage(v) {
|
||||
this.searchForm.pageNumber = v;
|
||||
changePage() {
|
||||
this.getData();
|
||||
},
|
||||
// 分页 修改页数
|
||||
changePageSize(v) {
|
||||
changePageSize() {
|
||||
this.searchForm.pageNumber = 1;
|
||||
this.searchForm.pageSize = v;
|
||||
this.getData();
|
||||
},
|
||||
// 搜索
|
||||
handleSearch() {
|
||||
this.searchForm.pageNumber = 1;
|
||||
this.getData();
|
||||
},
|
||||
// 获取数据
|
||||
getData() {
|
||||
this.loading = true;
|
||||
API_Setting.appVersionPage(this.searchForm).then((res) => {
|
||||
@@ -314,16 +228,12 @@ export default {
|
||||
this.total = res.result.total;
|
||||
}
|
||||
});
|
||||
this.total = this.data.length;
|
||||
this.loading = false;
|
||||
},
|
||||
//添加app版本信息
|
||||
addAppVersion() {
|
||||
this.modalVisible = true;
|
||||
this.modalTitle = "添加APP版本信息";
|
||||
const versionUpdateDate = this.$options.filters.unixToDate(
|
||||
new Date() / 1000
|
||||
);
|
||||
this.modalType = 0;
|
||||
const versionUpdateDate = this.$filters.unixToDate(new Date() / 1000);
|
||||
this.form = {
|
||||
forceUpdate: 0,
|
||||
type: "IOS",
|
||||
@@ -331,30 +241,25 @@ export default {
|
||||
content: " ",
|
||||
};
|
||||
},
|
||||
//编辑app版本信息
|
||||
editAppVersion(v) {
|
||||
this.modalVisible = true;
|
||||
this.modalTitle = "修改APP版本信息";
|
||||
this.modalType = 1;
|
||||
v.forceUpdate ? (v.forceUpdate = 1) : (v.forceUpdate = 0);
|
||||
this.form = v;
|
||||
|
||||
console.log(this.form);
|
||||
},
|
||||
//保存app版本信息
|
||||
saveAppVersion() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
this.submitLoading = true;
|
||||
if(JSON.stringify(this.form.versionUpdateDate).includes('T')){
|
||||
const versionUpdateDate = this.$options.filters.unixToDate(
|
||||
if (JSON.stringify(this.form.versionUpdateDate).includes("T")) {
|
||||
const versionUpdateDate = this.$filters.unixToDate(
|
||||
this.form.versionUpdateDate / 1000
|
||||
);
|
||||
this.form.versionUpdateDate = versionUpdateDate;
|
||||
this.form.updateTime = versionUpdateDate;
|
||||
}
|
||||
if (this.modalType == 0) {
|
||||
// 添加 避免编辑后传入id等数据 记得删除
|
||||
delete this.form.id;
|
||||
API_Setting.addVersion(this.form).then((res) => {
|
||||
this.submitLoading = false;
|
||||
@@ -377,14 +282,12 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
// 删除app版本信息
|
||||
remove(v) {
|
||||
this.$Modal.confirm({
|
||||
title: "确认删除",
|
||||
content: "您确认要删除么?",
|
||||
loading: true,
|
||||
onOk: () => {
|
||||
// 删除
|
||||
API_Setting.deleteVersion(v.id).then((res) => {
|
||||
this.$Modal.remove();
|
||||
if (res.success) {
|
||||
@@ -395,11 +298,9 @@ export default {
|
||||
},
|
||||
});
|
||||
},
|
||||
// 查看
|
||||
detail(v) {
|
||||
this.queryModalVisible = true;
|
||||
this.form = JSON.parse(JSON.stringify(v));
|
||||
//时间格式化有问题，所以另外单独给时间赋值
|
||||
this.versionUpdateDate = this.form.versionUpdateDate;
|
||||
},
|
||||
},
|
||||
@@ -416,4 +317,14 @@ export default {
|
||||
margin-left: 10px;
|
||||
color: #999;
|
||||
}
|
||||
.ops a {
|
||||
color: #2d8cf0;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
.ops span {
|
||||
display: inline-block;
|
||||
margin: 0 8px;
|
||||
color: #dcdee2;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,169 +1,108 @@
|
||||
<template>
|
||||
<div class="search">
|
||||
<Card>
|
||||
<Row class="operation">
|
||||
<i-switch v-model="strict" size="large" style="margin-right: 5px">
|
||||
<span slot="open">级联</span>
|
||||
<span slot="close">单选</span>
|
||||
</i-switch>
|
||||
<Button @click="addRoot">添加部门</Button>
|
||||
<Button @click="add" type="primary">添加子部门</Button>
|
||||
<Button @click="delAll">批量删除</Button>
|
||||
<Button @click="getParentList">刷新</Button>
|
||||
</Row>
|
||||
<Row type="flex" justify="start">
|
||||
<Col :md="8" :lg="8" :xl="6">
|
||||
<Alert show-icon>
|
||||
<el-card>
|
||||
<el-row class="operation">
|
||||
<el-switch
|
||||
v-model="strict"
|
||||
active-text="级联"
|
||||
inactive-text="单选"
|
||||
style="margin-right: 5px"
|
||||
/>
|
||||
<el-button @click="addRoot">添加部门</el-button>
|
||||
<el-button type="primary" @click="add">添加子部门</el-button>
|
||||
<el-button @click="delAll">批量删除</el-button>
|
||||
<el-button @click="getParentList">刷新</el-button>
|
||||
</el-row>
|
||||
<el-row type="flex" justify="start">
|
||||
<el-col :md="8" :lg="8" :xl="6">
|
||||
<el-alert type="info" show-icon :closable="false">
|
||||
当前选择编辑：
|
||||
<span class="select-title">{{ editTitle }}</span>
|
||||
<a class="select-clear" v-if="form.id" @click="cancelSelect"
|
||||
>取消选择</a
|
||||
>
|
||||
</Alert>
|
||||
<div class="tree-bar" :style="{ maxHeight: maxHeight }">
|
||||
<Tree
|
||||
ref="tree"
|
||||
<a v-if="form.id" class="select-clear" @click="cancelSelect">取消选择</a>
|
||||
</el-alert>
|
||||
<div v-loading="loading" class="tree-bar" :style="{ maxHeight: maxHeight }">
|
||||
<el-tree
|
||||
ref="treeRef"
|
||||
:data="data"
|
||||
:load-data="loadData"
|
||||
lazy
|
||||
:load="loadNode"
|
||||
:props="treeProps"
|
||||
node-key="id"
|
||||
show-checkbox
|
||||
@on-check-change="changeSelect"
|
||||
@on-select-change="selectTree"
|
||||
highlight-current
|
||||
:check-strictly="!strict"
|
||||
></Tree>
|
||||
<Spin size="large" fix v-if="loading"></Spin>
|
||||
:current-node-key="currentNodeKey"
|
||||
@node-click="onNodeClick"
|
||||
@check="onCheckChange"
|
||||
/>
|
||||
</div>
|
||||
</Col>
|
||||
<Col :md="15" :lg="13" :xl="9" style="margin-left: 10px">
|
||||
<Form
|
||||
ref="form"
|
||||
:model="form"
|
||||
:label-width="100"
|
||||
:rules="formValidate"
|
||||
>
|
||||
<!-- <FormItem label="上级部门" prop="parentTitle">
|
||||
<div style="display: flex">
|
||||
<Input
|
||||
v-model="form.parentTitle"
|
||||
readonly
|
||||
style="margin-right: 10px"
|
||||
/>
|
||||
<Poptip
|
||||
transfer
|
||||
trigger="click"
|
||||
placement="right-start"
|
||||
title="选择上级部门"
|
||||
width="250"
|
||||
>
|
||||
<Button icon="md-list">选择部门</Button>
|
||||
<div
|
||||
slot="content"
|
||||
style="position: relative; min-height: 5vh"
|
||||
>
|
||||
<Tree
|
||||
:data="dataEdit"
|
||||
:load-data="loadData"
|
||||
@on-select-change="selectTreeEdit"
|
||||
></Tree>
|
||||
<Spin size="large" fix v-if="loadingEdit"></Spin>
|
||||
</div>
|
||||
</Poptip>
|
||||
</div>
|
||||
</FormItem> -->
|
||||
<FormItem label="部门名称" prop="title">
|
||||
<Input v-model="form.title" />
|
||||
</FormItem>
|
||||
<FormItem label="选择角色">
|
||||
<Select
|
||||
:loading="userLoading"
|
||||
not-found-text="暂无角色"
|
||||
</el-col>
|
||||
<el-col :md="15" :lg="13" :xl="9" style="margin-left: 10px">
|
||||
<el-form ref="form" :model="form" label-width="100px" :rules="formValidate">
|
||||
<el-form-item label="部门名称" prop="title">
|
||||
<el-input v-model="form.title" />
|
||||
</el-form-item>
|
||||
<el-form-item label="选择角色">
|
||||
<el-select
|
||||
v-model="selectedRole"
|
||||
multiple
|
||||
:loading="userLoading"
|
||||
placeholder="请选择角色"
|
||||
style="width: 100%"
|
||||
>
|
||||
<Option v-for="item in users" :value="item.id" :key="item.id">{{
|
||||
item.name
|
||||
}}</Option>
|
||||
</Select>
|
||||
</FormItem>
|
||||
|
||||
<FormItem label="排序值" prop="sortOrder">
|
||||
<Tooltip
|
||||
trigger="hover"
|
||||
placement="right"
|
||||
content="值越小越靠前，支持小数"
|
||||
>
|
||||
<InputNumber
|
||||
:max="1000"
|
||||
:min="0"
|
||||
v-model="form.sortOrder"
|
||||
></InputNumber>
|
||||
</Tooltip>
|
||||
</FormItem>
|
||||
<!-- <FormItem label="是否启用" prop="status">
|
||||
<i-switch size="large" v-model="form.status" :true-value="0" :false-value="-1">
|
||||
<span slot="open">启用</span>
|
||||
<span slot="close">禁用</span>
|
||||
</i-switch>
|
||||
</FormItem> -->
|
||||
<Form-item>
|
||||
<Button
|
||||
style="margin-right: 5px"
|
||||
@click="submitEdit"
|
||||
:loading="submitLoading"
|
||||
<el-option
|
||||
v-for="item in users"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序值" prop="sortOrder">
|
||||
<el-tooltip placement="right" content="值越小越靠前，支持小数">
|
||||
<el-input-number v-model="form.sortOrder" :max="1000" :min="0" />
|
||||
</el-tooltip>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
>修改并保存</Button
|
||||
style="margin-right: 5px"
|
||||
:loading="submitLoading"
|
||||
@click="submitEdit"
|
||||
>
|
||||
<Button @click="handleReset">重置</Button>
|
||||
</Form-item>
|
||||
</Form>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
修改并保存
|
||||
</el-button>
|
||||
<el-button @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<Modal
|
||||
:title="modalTitle"
|
||||
<el-dialog
|
||||
v-model="modalVisible"
|
||||
:mask-closable="false"
|
||||
:width="500"
|
||||
:title="modalTitle"
|
||||
width="500px"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<Form
|
||||
ref="formAdd"
|
||||
:model="formAdd"
|
||||
:label-width="85"
|
||||
:rules="formValidate"
|
||||
>
|
||||
<el-form ref="formAdd" :model="formAdd" label-width="85px" :rules="formValidate">
|
||||
<div v-if="showParent">
|
||||
<FormItem label="上级部门：">{{ form.title }}</FormItem>
|
||||
<el-form-item label="上级部门：">{{ form.title }}</el-form-item>
|
||||
</div>
|
||||
<FormItem label="部门名称" prop="title">
|
||||
<Input v-model="formAdd.title" />
|
||||
</FormItem>
|
||||
<FormItem label="排序值" prop="sortOrder">
|
||||
<Tooltip
|
||||
trigger="hover"
|
||||
placement="right"
|
||||
content="值越小越靠前，支持小数"
|
||||
>
|
||||
<InputNumber
|
||||
:max="1000"
|
||||
:min="0"
|
||||
v-model="formAdd.sortOrder"
|
||||
></InputNumber>
|
||||
</Tooltip>
|
||||
</FormItem>
|
||||
<!-- <FormItem label="是否启用" prop="status">
|
||||
<i-switch size="large" v-model="formAdd.status" :true-value="0" :false-value="-1">
|
||||
<span slot="open">启用</span>
|
||||
<span slot="close">禁用</span>
|
||||
</i-switch>
|
||||
</FormItem> -->
|
||||
</Form>
|
||||
<div slot="footer">
|
||||
<Button type="text" @click="cancelAdd">取消</Button>
|
||||
<Button type="primary" :loading="submitLoading" @click="submitAdd"
|
||||
>提交</Button
|
||||
>
|
||||
</div>
|
||||
</Modal>
|
||||
<el-form-item label="部门名称" prop="title">
|
||||
<el-input v-model="formAdd.title" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序值" prop="sortOrder">
|
||||
<el-tooltip placement="right" content="值越小越靠前，支持小数">
|
||||
<el-input-number v-model="formAdd.sortOrder" :max="1000" :min="0" />
|
||||
</el-tooltip>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="cancelAdd">取消</el-button>
|
||||
<el-button type="primary" :loading="submitLoading" @click="submitAdd">提交</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -178,25 +117,31 @@ import {
|
||||
getRoleList,
|
||||
updateDepartmentRole,
|
||||
} from "@/api/index";
|
||||
|
||||
export default {
|
||||
name: "department-manage",
|
||||
data() {
|
||||
return {
|
||||
loading: true, // 加载状态
|
||||
maxHeight: "500px", // 最大高度
|
||||
strict: true, // 级联还是单选
|
||||
userLoading: false, // 选择角色加载状态
|
||||
loadingEdit: false, // 编辑加载状态
|
||||
modalVisible: false, // modal显隐
|
||||
selectList: [], // 已选列表
|
||||
selectCount: 0, // 已选总数
|
||||
showParent: false, // 展示父级
|
||||
modalTitle: "", // modal标题
|
||||
editTitle: "", // 编辑标题
|
||||
selectedRole: [], //选择的角色
|
||||
searchKey: "", // 搜索关键字
|
||||
loading: true,
|
||||
maxHeight: "500px",
|
||||
strict: true,
|
||||
userLoading: false,
|
||||
loadingEdit: false,
|
||||
modalVisible: false,
|
||||
selectList: [],
|
||||
selectCount: 0,
|
||||
showParent: false,
|
||||
modalTitle: "",
|
||||
editTitle: "",
|
||||
selectedRole: [],
|
||||
searchKey: "",
|
||||
currentNodeKey: null,
|
||||
treeProps: {
|
||||
label: "title",
|
||||
children: "children",
|
||||
isLeaf: "isLeaf",
|
||||
},
|
||||
form: {
|
||||
// 提交表单
|
||||
id: "",
|
||||
title: "",
|
||||
parentId: "",
|
||||
@@ -204,10 +149,8 @@ export default {
|
||||
sortOrder: 0,
|
||||
status: 0,
|
||||
},
|
||||
|
||||
formAdd: {}, // 新增表单
|
||||
formAdd: {},
|
||||
formValidate: {
|
||||
// 验证规则
|
||||
title: [{ required: true, message: "名称不能为空", trigger: "blur" }],
|
||||
sortOrder: [
|
||||
{
|
||||
@@ -218,17 +161,16 @@ export default {
|
||||
},
|
||||
],
|
||||
},
|
||||
submitLoading: false, // 提交loading
|
||||
data: [], // 部门数据
|
||||
dataEdit: [], // 编辑时部门数据
|
||||
users: [], // 用户
|
||||
submitLoading: false,
|
||||
data: [],
|
||||
dataEdit: [],
|
||||
users: [],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.getParentList();
|
||||
},
|
||||
// 获取部门数据
|
||||
getParentList() {
|
||||
this.loading = true;
|
||||
initDepartment().then((res) => {
|
||||
@@ -238,61 +180,60 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
// 动态加载二级数据
|
||||
loadData(item, callback) {
|
||||
loadDepartment(item.id).then((res) => {
|
||||
loadNode(node, resolve) {
|
||||
const id = node.data?.id;
|
||||
if (id === undefined || id === null) {
|
||||
resolve([]);
|
||||
return;
|
||||
}
|
||||
loadDepartment(id).then((res) => {
|
||||
this.loadingEdit = false;
|
||||
if (res.success) {
|
||||
console.log(res.result);
|
||||
callback(res.result);
|
||||
resolve(res.result || []);
|
||||
} else {
|
||||
resolve([]);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 点击树
|
||||
selectTree(v) {
|
||||
if (v.length > 0) {
|
||||
// 转换null为""
|
||||
for (let attr in v[0]) {
|
||||
if (v[0][attr] == null) {
|
||||
v[0][attr] = "";
|
||||
}
|
||||
}
|
||||
let str = JSON.stringify(v[0]);
|
||||
let data = JSON.parse(str);
|
||||
|
||||
this.editTitle = data.title;
|
||||
// 加载部门用户数据
|
||||
this.userLoading = true;
|
||||
|
||||
getUserByDepartmentId(data.id).then((res) => {
|
||||
let way = [];
|
||||
res.result &&
|
||||
res.result.forEach((item) => {
|
||||
way.push(item.roleId);
|
||||
});
|
||||
this.$set(this, "selectedRole", way);
|
||||
console.warn(this.selectedRole);
|
||||
});
|
||||
|
||||
getRoleList({
|
||||
pageNumber: 1,
|
||||
pageSize: 10000,
|
||||
}).then((res) => {
|
||||
this.userLoading = false;
|
||||
console.log(res);
|
||||
if (res.success) {
|
||||
this.users = res.result.records;
|
||||
// 回显
|
||||
this.form = data;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
onNodeClick(data) {
|
||||
if (!data) {
|
||||
this.cancelSelect();
|
||||
return;
|
||||
}
|
||||
},
|
||||
const row = JSON.parse(JSON.stringify(data));
|
||||
for (const attr in row) {
|
||||
if (row[attr] == null) {
|
||||
row[attr] = "";
|
||||
}
|
||||
}
|
||||
this.editTitle = row.title;
|
||||
this.currentNodeKey = row.id;
|
||||
this.userLoading = true;
|
||||
|
||||
// 排序
|
||||
getUserByDepartmentId(row.id).then((res) => {
|
||||
const way = [];
|
||||
res.result &&
|
||||
res.result.forEach((item) => {
|
||||
way.push(item.roleId);
|
||||
});
|
||||
this.selectedRole = way;
|
||||
});
|
||||
|
||||
getRoleList({
|
||||
pageNumber: 1,
|
||||
pageSize: 10000,
|
||||
}).then((res) => {
|
||||
this.userLoading = false;
|
||||
if (res.success) {
|
||||
this.users = res.result.records;
|
||||
this.form = row;
|
||||
}
|
||||
});
|
||||
},
|
||||
onCheckChange(_data, { checkedNodes }) {
|
||||
this.selectList = checkedNodes;
|
||||
this.selectCount = checkedNodes.length;
|
||||
},
|
||||
bubbleSort(array) {
|
||||
const len = array.length;
|
||||
if (len < 2) return array;
|
||||
@@ -307,42 +248,33 @@ export default {
|
||||
}
|
||||
return array;
|
||||
},
|
||||
|
||||
// 取消选择
|
||||
cancelSelect() {
|
||||
let data = this.$refs.tree.getSelectedNodes()[0];
|
||||
if (data) {
|
||||
data.selected = false;
|
||||
}
|
||||
this.$refs.treeRef?.setCurrentKey(null);
|
||||
this.currentNodeKey = null;
|
||||
this.$refs.form.resetFields();
|
||||
delete this.form.id;
|
||||
this.editTitle = "";
|
||||
this.selectedRole = [];
|
||||
},
|
||||
// 选择上级部门
|
||||
selectTreeEdit(v) {
|
||||
if (v.length > 0) {
|
||||
// 转换null为""
|
||||
for (let attr in v[0]) {
|
||||
for (const attr in v[0]) {
|
||||
if (v[0][attr] == null) {
|
||||
v[0][attr] = "";
|
||||
}
|
||||
}
|
||||
let str = JSON.stringify(v[0]);
|
||||
let data = JSON.parse(str);
|
||||
const data = JSON.parse(JSON.stringify(v[0]));
|
||||
this.form.parentId = data.id;
|
||||
this.form.parentTitle = data.title;
|
||||
}
|
||||
},
|
||||
// 取消添加部门
|
||||
cancelAdd() {
|
||||
this.modalVisible = false;
|
||||
},
|
||||
// 重置表单
|
||||
handleReset() {
|
||||
this.$refs.form.resetFields();
|
||||
this.form.status = 0;
|
||||
},
|
||||
// 提交表单
|
||||
submitEdit() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
@@ -350,13 +282,12 @@ export default {
|
||||
this.$Message.warning("请先点击选择要修改的部门");
|
||||
return;
|
||||
}
|
||||
let roleWay = [];
|
||||
const roleWay = [];
|
||||
this.selectedRole.forEach((item) => {
|
||||
let role = {
|
||||
roleWay.push({
|
||||
departmentId: this.form.id,
|
||||
roleId: item,
|
||||
};
|
||||
roleWay.push(role);
|
||||
});
|
||||
});
|
||||
|
||||
Promise.all([
|
||||
@@ -373,7 +304,6 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
// 确认添加部门
|
||||
submitAdd() {
|
||||
this.$refs.formAdd.validate((valid) => {
|
||||
if (valid) {
|
||||
@@ -389,7 +319,6 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
// 添加子部门
|
||||
add() {
|
||||
if (this.form.id == "" || this.form.id == null) {
|
||||
this.$Message.warning("请先点击选择一个部门");
|
||||
@@ -397,7 +326,6 @@ export default {
|
||||
}
|
||||
this.modalTitle = "添加子部门";
|
||||
this.showParent = true;
|
||||
|
||||
this.formAdd = {
|
||||
parentId: this.form.id,
|
||||
sortOrder: 0,
|
||||
@@ -405,7 +333,6 @@ export default {
|
||||
};
|
||||
this.modalVisible = true;
|
||||
},
|
||||
// 添加一级部门
|
||||
addRoot() {
|
||||
this.modalTitle = "添加一级部门";
|
||||
this.showParent = false;
|
||||
@@ -416,13 +343,6 @@ export default {
|
||||
};
|
||||
this.modalVisible = true;
|
||||
},
|
||||
// 选中回调
|
||||
changeSelect(v) {
|
||||
console.log(v);
|
||||
this.selectCount = v.length;
|
||||
this.selectList = v;
|
||||
},
|
||||
// 批量删除部门
|
||||
delAll() {
|
||||
if (this.selectCount <= 0) {
|
||||
this.$Message.warning("您还未勾选要删除的数据");
|
||||
@@ -454,13 +374,13 @@ export default {
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// 计算高度
|
||||
let height = document.documentElement.clientHeight;
|
||||
const height = document.documentElement.clientHeight;
|
||||
this.maxHeight = Number(height - 287) + "px";
|
||||
this.init();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/styles/tree-common.scss";
|
||||
</style>
|
||||
|
||||
@@ -1,100 +1,68 @@
|
||||
<template>
|
||||
<div class="search">
|
||||
<Card>
|
||||
<Form
|
||||
ref="searchForm"
|
||||
:model="searchForm"
|
||||
inline
|
||||
:label-width="70"
|
||||
class="search-form"
|
||||
>
|
||||
<Form-item label="搜索日志" prop="searchKey">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="searchForm.searchKey"
|
||||
placeholder="请输入搜索日志内容"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
/>
|
||||
</Form-item>
|
||||
<Form-item label="操作人" prop="operatorName">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="searchForm.operatorName"
|
||||
placeholder="请输入操作人"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
/>
|
||||
</Form-item>
|
||||
<Form-item label="创建时间">
|
||||
<DatePicker
|
||||
type="daterange"
|
||||
<el-card>
|
||||
<el-form ref="searchForm" :model="searchForm" inline label-width="70px" class="search-form" @keyup.enter="handleSearch">
|
||||
<el-form-item label="搜索日志" prop="searchKey">
|
||||
<el-input v-model="searchForm.searchKey" placeholder="请输入搜索日志内容" clearable style="width: 240px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="操作人" prop="operatorName">
|
||||
<el-input v-model="searchForm.operatorName" placeholder="请输入操作人" clearable style="width: 240px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间">
|
||||
<el-date-picker
|
||||
v-model="selectDate"
|
||||
format="yyyy-MM-dd"
|
||||
type="daterange"
|
||||
value-format="YYYY-MM-DD"
|
||||
clearable
|
||||
@on-change="selectDateRange"
|
||||
placeholder="选择起始时间"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
style="width: 240px"
|
||||
></DatePicker>
|
||||
</Form-item>
|
||||
<Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn"
|
||||
>搜索</Button
|
||||
>
|
||||
</Form>
|
||||
</Card>
|
||||
<Card>
|
||||
<Row class="operation padding-row">
|
||||
<Button type="dashed" @click="openTip = !openTip">{{
|
||||
openTip ? "关闭提示" : "开启提示"
|
||||
}}</Button>
|
||||
</Row>
|
||||
<div v-show="openTip">
|
||||
<Alert show-icon>
|
||||
<span>展示详细内容</span>
|
||||
<Icon type="ios-bulb-outline" slot="icon"></Icon>
|
||||
<i-switch class="switch" size="large" v-model="showDev">
|
||||
<span slot="open">开发</span>
|
||||
<span slot="close">普通</span>
|
||||
</i-switch>
|
||||
</Alert>
|
||||
</div>
|
||||
@change="selectDateRange"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<Table
|
||||
v-if="showDev"
|
||||
:loading="loading"
|
||||
<el-card>
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
border
|
||||
:columns="columns_dev"
|
||||
:data="data"
|
||||
ref="table"
|
||||
sortable="custom"
|
||||
style="width: 100%"
|
||||
>
|
||||
</Table>
|
||||
<Table
|
||||
v-else
|
||||
:loading="loading"
|
||||
border
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
ref="table"
|
||||
sortable="custom"
|
||||
>
|
||||
</Table>
|
||||
<el-table-column prop="name" label="操作名称" min-width="100" fixed="left" show-overflow-tooltip />
|
||||
<el-table-column prop="customerLog" label="日志内容" min-width="120" fixed="left" show-overflow-tooltip />
|
||||
<el-table-column prop="username" label="操作用户" width="115" />
|
||||
<el-table-column prop="ip" label="IP" width="150" />
|
||||
<el-table-column prop="ipInfo" label="IP信息" width="150" show-overflow-tooltip />
|
||||
<el-table-column prop="requestUrl" label="请求路径" width="150" show-overflow-tooltip />
|
||||
<el-table-column prop="requestType" label="请求类型" width="130" align="center" />
|
||||
<el-table-column prop="requestParam" label="请求参数" min-width="100" show-overflow-tooltip />
|
||||
<el-table-column prop="costTime" label="耗时-毫秒" width="140" align="center" />
|
||||
<el-table-column label="操作时间" width="170" align="center">
|
||||
<template #default="{ row }">
|
||||
<span v-if="row">{{ $filters.unixToDate(row.createTime / 1000) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<Row type="flex" justify="end" class="mt_10">
|
||||
<Page
|
||||
:current="searchForm.pageNumber"
|
||||
<div class="mt_10" style="display: flex; justify-content: flex-end">
|
||||
<el-pagination
|
||||
v-model:current-page="searchForm.pageNumber"
|
||||
v-model:page-size="searchForm.pageSize"
|
||||
:page-sizes="[20, 50, 100]"
|
||||
:total="total"
|
||||
:page-size="searchForm.pageSize"
|
||||
@on-change="changePage"
|
||||
@on-page-size-change="changePageSize"
|
||||
:page-size-opts="[20, 50, 100]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
size="small"
|
||||
show-totalzx
|
||||
show-elevator
|
||||
show-sizer
|
||||
></Page>
|
||||
</Row>
|
||||
</Card>
|
||||
@current-change="changePage"
|
||||
@size-change="changePageSize"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -105,12 +73,9 @@ export default {
|
||||
name: "log-manage",
|
||||
data() {
|
||||
return {
|
||||
openTip: false, // 开启提示
|
||||
loading: true, // 加载状态
|
||||
selectDate: null, // 选择时间段
|
||||
showDev: false, //展示进阶日志
|
||||
loading: true,
|
||||
selectDate: null,
|
||||
searchForm: {
|
||||
// 请求参数
|
||||
type: 1,
|
||||
key: "",
|
||||
operatorName: "",
|
||||
@@ -121,199 +86,36 @@ export default {
|
||||
sort: "createTime",
|
||||
order: "desc",
|
||||
},
|
||||
columns: [
|
||||
// 表头
|
||||
{
|
||||
title: "操作名称",
|
||||
key: "name",
|
||||
width: 150,
|
||||
fixed: "left",
|
||||
ellipsis: false,
|
||||
tooltip: true,
|
||||
},
|
||||
{
|
||||
title: "日志内容",
|
||||
key: "customerLog",
|
||||
minWidth: 200,
|
||||
fixed: "left",
|
||||
ellipsis: false,
|
||||
tooltip: true,
|
||||
},
|
||||
{
|
||||
title: "操作用户",
|
||||
minWidth: 115,
|
||||
key: "username",
|
||||
width: 120,
|
||||
tooltip: true,
|
||||
},
|
||||
{
|
||||
title: "操作时间",
|
||||
key: "createTime",
|
||||
align: "center",
|
||||
width: 170,
|
||||
render:(h,params)=>{
|
||||
return h('span',this.$options.filters.unixToDate(params.row.createTime / 1000))
|
||||
}
|
||||
},
|
||||
],
|
||||
columns_dev: [
|
||||
{
|
||||
title: "操作名称",
|
||||
key: "name",
|
||||
minWidth: 100,
|
||||
fixed: "left",
|
||||
ellipsis: false,
|
||||
tooltip: true,
|
||||
},
|
||||
{
|
||||
title: "日志内容",
|
||||
key: "customerLog",
|
||||
minWidth: 120,
|
||||
fixed: "left",
|
||||
ellipsis: false,
|
||||
tooltip: true,
|
||||
},
|
||||
{
|
||||
title: "操作用户",
|
||||
key: "username",
|
||||
width: 115,
|
||||
},
|
||||
{
|
||||
title: "IP",
|
||||
key: "ip",
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: "IP信息",
|
||||
key: "ipInfo",
|
||||
width: 150,
|
||||
ellipsis: false,
|
||||
tooltip: true,
|
||||
},
|
||||
{
|
||||
title: "请求路径",
|
||||
width: 150,
|
||||
ellipsis: false,
|
||||
tooltip: true,
|
||||
key: "requestUrl",
|
||||
},
|
||||
{
|
||||
title: "请求类型",
|
||||
key: "requestType",
|
||||
width: 130,
|
||||
align: "center",
|
||||
filters: [
|
||||
{
|
||||
label: "GET",
|
||||
value: "GET",
|
||||
},
|
||||
{
|
||||
label: "POST",
|
||||
value: "POST",
|
||||
},
|
||||
{
|
||||
label: "PUT",
|
||||
value: "PUT",
|
||||
},
|
||||
{
|
||||
label: "DELETE",
|
||||
value: "DELETE",
|
||||
},
|
||||
],
|
||||
filterMultiple: false,
|
||||
filterMethod(value, row) {
|
||||
if (value == "GET") {
|
||||
return row.requestType == "GET";
|
||||
} else if (value == "POST") {
|
||||
return row.requestType == "POST";
|
||||
} else if (value == "PUT") {
|
||||
return row.requestType == "PUT";
|
||||
} else if (value == "DELETE") {
|
||||
return row.requestType == "DELETE";
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "请求参数",
|
||||
minWidth: 100,
|
||||
key: "requestParam",
|
||||
ellipsis: false,
|
||||
tooltip: true,
|
||||
},
|
||||
{
|
||||
title: "耗时-毫秒",
|
||||
key: "costTime",
|
||||
width: 140,
|
||||
align: "center",
|
||||
filters: [
|
||||
{
|
||||
label: "≤300毫秒",
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
label: "300毫秒<x<1000毫秒",
|
||||
value: 0.3,
|
||||
},
|
||||
{
|
||||
label: ">1000毫秒",
|
||||
value: 1,
|
||||
},
|
||||
],
|
||||
filterMultiple: false,
|
||||
filterMethod(value, row) {
|
||||
if (value == 0) {
|
||||
return row.costTime <= 300;
|
||||
} else if (value == 0.3) {
|
||||
return row.costTime > 300 && row.costTime < 1000;
|
||||
} else {
|
||||
return row.costTime > 1000;
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "操作时间",
|
||||
key: "createTime",
|
||||
align: "center",
|
||||
width: 170,
|
||||
sortType: "desc",
|
||||
render:(h,params)=>{
|
||||
return h('span',this.$options.filters.unixToDate(params.row.createTime / 1000))
|
||||
}
|
||||
},
|
||||
],
|
||||
data: [], // 日志数据
|
||||
total: 0, // 数据总数
|
||||
data: [],
|
||||
total: 0,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 初始化数据
|
||||
init() {
|
||||
this.getLogList();
|
||||
},
|
||||
// 分页 修改页码
|
||||
changePage(v) {
|
||||
this.searchForm.pageNumber = v;
|
||||
this.getLogList();
|
||||
},
|
||||
// 分页 修改页数
|
||||
changePageSize(v) {
|
||||
this.searchForm.pageNumber = 1;
|
||||
this.searchForm.pageSize = v;
|
||||
this.getLogList();
|
||||
},
|
||||
// 起止时间从新赋值
|
||||
selectDateRange(v) {
|
||||
if (v) {
|
||||
if (v && v.length === 2) {
|
||||
this.searchForm.startDate = v[0];
|
||||
this.searchForm.endDate = v[1];
|
||||
} else {
|
||||
this.searchForm.startDate = "";
|
||||
this.searchForm.endDate = "";
|
||||
}
|
||||
},
|
||||
// 搜索
|
||||
handleSearch() {
|
||||
this.searchForm.pageNumber = 1;
|
||||
this.getLogList();
|
||||
},
|
||||
// 获取日志数据
|
||||
getLogList() {
|
||||
this.loading = true;
|
||||
getLogListData(this.searchForm).then((res) => {
|
||||
@@ -330,8 +132,3 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.switch{
|
||||
margin-left: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,191 +1,191 @@
|
||||
<template>
|
||||
<div class="search">
|
||||
<Card>
|
||||
<!-- 筛选项和操作按钮 -->
|
||||
<Row class="operation">
|
||||
<i-switch
|
||||
<el-card>
|
||||
<el-row class="operation">
|
||||
<el-switch
|
||||
v-model="strict"
|
||||
class="selectModel"
|
||||
size="large"
|
||||
active-text="级联"
|
||||
inactive-text="单选"
|
||||
style="margin-right: 5px"
|
||||
>
|
||||
<span slot="open">级联</span>
|
||||
<span slot="close">单选</span>
|
||||
</i-switch>
|
||||
<Button @click="addRootMenu">添加顶级菜单</Button>
|
||||
<Button @click="addMenu" type="primary">添加子菜单</Button>
|
||||
<Button @click="delAll">批量删除</Button>
|
||||
<Dropdown @on-click="handleDropdown">
|
||||
<Button>
|
||||
/>
|
||||
<el-button @click="addRootMenu">添加顶级菜单</el-button>
|
||||
<el-button type="primary" @click="addMenu">添加子菜单</el-button>
|
||||
<el-button @click="delAll">批量删除</el-button>
|
||||
<el-dropdown @command="handleDropdown">
|
||||
<el-button>
|
||||
更多操作
|
||||
<Icon type="md-arrow-dropdown"></Icon>
|
||||
</Button>
|
||||
<DropdownMenu slot="list">
|
||||
<DropdownItem name="refresh">刷新</DropdownItem>
|
||||
<DropdownItem name="expandOne">收合所有</DropdownItem>
|
||||
<DropdownItem name="expandTwo">展开一级</DropdownItem>
|
||||
<DropdownItem name="expandThree">展开两级</DropdownItem>
|
||||
<DropdownItem name="expandAll">展开所有</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
</Row>
|
||||
<!-- 页面主体，左侧树结构，右侧表单项 -->
|
||||
<Row type="flex" justify="start">
|
||||
<Col :md="8" :lg="8" :xl="6">
|
||||
<Alert show-icon>
|
||||
<el-icon class="el-icon--right"><ArrowDown /></el-icon>
|
||||
</el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item command="refresh">刷新</el-dropdown-item>
|
||||
<el-dropdown-item command="expandOne">收合所有</el-dropdown-item>
|
||||
<el-dropdown-item command="expandTwo">展开一级</el-dropdown-item>
|
||||
<el-dropdown-item command="expandThree">展开两级</el-dropdown-item>
|
||||
<el-dropdown-item command="expandAll">展开所有</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</el-row>
|
||||
<el-row type="flex" justify="start">
|
||||
<el-col :md="8" :lg="8" :xl="6">
|
||||
<el-alert type="info" show-icon :closable="false">
|
||||
当前选择编辑：
|
||||
<span class="select-title">{{ editTitle }}</span>
|
||||
<a class="select-clear" v-if="form.id" @click="cancelEdit">取消选择</a>
|
||||
</Alert>
|
||||
<Input
|
||||
</el-alert>
|
||||
<el-input
|
||||
v-model="searchKey"
|
||||
suffix="ios-search"
|
||||
@on-change="search"
|
||||
placeholder="输入菜单名搜索"
|
||||
clearable
|
||||
placeholder="输入菜单名搜索"
|
||||
@input="search"
|
||||
@clear="search"
|
||||
/>
|
||||
<div class="tree-bar" :style="{ maxHeight: maxHeight }">
|
||||
<Tree
|
||||
ref="tree"
|
||||
<div v-loading="loading" class="tree-bar" :style="{ maxHeight: maxHeight }">
|
||||
<el-tree
|
||||
:key="treeKey"
|
||||
ref="treeRef"
|
||||
:data="data"
|
||||
:props="treeProps"
|
||||
node-key="id"
|
||||
show-checkbox
|
||||
:render="renderContent"
|
||||
@on-select-change="selectTree"
|
||||
@on-check-change="changeSelect"
|
||||
highlight-current
|
||||
:check-strictly="!strict"
|
||||
></Tree>
|
||||
<Spin size="large" fix v-if="loading"></Spin>
|
||||
:default-expanded-keys="expandedKeys"
|
||||
:current-node-key="currentNodeKey"
|
||||
@node-click="onNodeClick"
|
||||
@check="onCheckChange"
|
||||
>
|
||||
<template #default="{ data: nodeData }">
|
||||
<span class="tree-node-label">
|
||||
<el-icon v-if="nodeData.level == 0" class="tree-node-icon"><Menu /></el-icon>
|
||||
<el-icon v-else class="tree-node-icon"><List /></el-icon>
|
||||
<span>{{ nodeData.title }}</span>
|
||||
</span>
|
||||
</template>
|
||||
</el-tree>
|
||||
</div>
|
||||
</Col>
|
||||
<Col :md="15" :lg="13" :xl="9" style="margin-left: 10px">
|
||||
<Form ref="form" :model="form" :label-width="110" :rules="formValidate">
|
||||
<FormItem label="类型" prop="type">
|
||||
</el-col>
|
||||
<el-col :md="15" :lg="13" :xl="9" style="margin-left: 10px">
|
||||
<el-form ref="form" :model="form" label-width="110px" :rules="formValidate">
|
||||
<el-form-item label="类型" prop="type">
|
||||
<div v-show="form.level == 0">
|
||||
<Icon
|
||||
type="ios-navigate-outline"
|
||||
size="16"
|
||||
style="margin-right: 5px"
|
||||
></Icon>
|
||||
<el-icon :size="16" style="margin-right: 5px"><Menu /></el-icon>
|
||||
<span>顶级菜单</span>
|
||||
</div>
|
||||
<div v-show="form.level == 1 || form.level == 2">
|
||||
<Icon
|
||||
type="ios-list-box-outline"
|
||||
size="16"
|
||||
style="margin-right: 5px"
|
||||
></Icon>
|
||||
<el-icon :size="16" style="margin-right: 5px"><List /></el-icon>
|
||||
<span>页面菜单</span>
|
||||
</div>
|
||||
</FormItem>
|
||||
<FormItem label="菜单名称" prop="title">
|
||||
<Input class="menu-input" v-model="form.title" />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
</el-form-item>
|
||||
<el-form-item label="菜单名称" prop="title">
|
||||
<el-input class="menu-input" v-model="form.title" />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="form.level != 0"
|
||||
label="路由地址"
|
||||
prop="path"
|
||||
v-if="form.level != 0"
|
||||
class="block-tool"
|
||||
>
|
||||
<Tooltip
|
||||
placement="right"
|
||||
content="路由地址，英文唯一，跳转页面，路径展示用 "
|
||||
>
|
||||
<Input class="menu-input" v-model="form.path" />
|
||||
</Tooltip>
|
||||
</FormItem>
|
||||
<FormItem label="路由名称" prop="name" class="block-tool">
|
||||
<Tooltip
|
||||
placement="right"
|
||||
content="路由name，需英文唯一，跳转页面用"
|
||||
transfer
|
||||
>
|
||||
<Input class="menu-input" v-model="form.name" />
|
||||
</Tooltip>
|
||||
</FormItem>
|
||||
<FormItem label="文件路径" prop="frontRoute" v-if="form.level != 0">
|
||||
<Input class="menu-input" v-model="form.frontRoute" />
|
||||
</FormItem>
|
||||
<FormItem label="权限url" v-if="form.level != 0" class="block-tool">
|
||||
<Tooltip placement="right" content="*号模糊匹配，逗号分割" transfer>
|
||||
<Input class="menu-input" v-model="form.permission" type="textarea" maxlength="1000"/>
|
||||
</Tooltip>
|
||||
</FormItem>
|
||||
<FormItem label="排序值" prop="sortOrder">
|
||||
<Tooltip trigger="hover" placement="right" content="值越小越靠前，支持小数">
|
||||
<InputNumber :max="1000" :min="0" v-model="form.sortOrder"></InputNumber>
|
||||
</Tooltip>
|
||||
</FormItem>
|
||||
<Form-item>
|
||||
<Button
|
||||
style="margin-right: 5px"
|
||||
@click="submitEdit"
|
||||
:loading="submitLoading"
|
||||
<el-tooltip placement="right" content="路由地址，英文唯一，跳转页面，路径展示用 ">
|
||||
<el-input class="menu-input" v-model="form.path" />
|
||||
</el-tooltip>
|
||||
</el-form-item>
|
||||
<el-form-item label="路由名称" prop="name" class="block-tool">
|
||||
<el-tooltip placement="right" content="路由name，需英文唯一，跳转页面用">
|
||||
<el-input class="menu-input" v-model="form.name" />
|
||||
</el-tooltip>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.level != 0" label="文件路径" prop="frontRoute">
|
||||
<el-input class="menu-input" v-model="form.frontRoute" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.level != 0" label="权限url" class="block-tool">
|
||||
<el-tooltip placement="right" content="*号模糊匹配，逗号分割">
|
||||
<el-input
|
||||
class="menu-input"
|
||||
v-model="form.permission"
|
||||
type="textarea"
|
||||
maxlength="1000"
|
||||
/>
|
||||
</el-tooltip>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序值" prop="sortOrder">
|
||||
<el-tooltip placement="right" content="值越小越靠前，支持小数">
|
||||
<el-input-number v-model="form.sortOrder" :max="1000" :min="0" />
|
||||
</el-tooltip>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
>保存
|
||||
</Button>
|
||||
<Button @click="handleReset">重置</Button>
|
||||
</Form-item>
|
||||
</Form>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
style="margin-right: 5px"
|
||||
:loading="submitLoading"
|
||||
@click="submitEdit"
|
||||
>
|
||||
保存
|
||||
</el-button>
|
||||
<el-button @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<Modal
|
||||
draggable
|
||||
:title="modalTitle"
|
||||
<el-dialog
|
||||
v-model="menuModalVisible"
|
||||
:mask-closable="false"
|
||||
:width="500"
|
||||
:styles="{ top: '30px' }"
|
||||
:title="modalTitle"
|
||||
width="500px"
|
||||
:close-on-click-modal="false"
|
||||
top="30px"
|
||||
>
|
||||
<Form ref="formAdd" :model="formAdd" :label-width="100" :rules="formValidate">
|
||||
<el-form ref="formAdd" :model="formAdd" label-width="100px" :rules="formValidate">
|
||||
<div v-if="showParent">
|
||||
<FormItem label="上级节点：">{{ parentTitle }}</FormItem>
|
||||
<el-form-item label="上级节点：">{{ parentTitle }}</el-form-item>
|
||||
</div>
|
||||
<FormItem label="类型" prop="type">
|
||||
<el-form-item label="类型" prop="type">
|
||||
<div v-show="formAdd.level == 0">
|
||||
<Icon type="ios-navigate-outline" size="16" style="margin-right: 5px"></Icon>
|
||||
<el-icon :size="16" style="margin-right: 5px"><Menu /></el-icon>
|
||||
<span>顶级菜单</span>
|
||||
</div>
|
||||
<div v-show="formAdd.level != 0">
|
||||
<Icon type="ios-list-box-outline" size="16" style="margin-right: 5px"></Icon>
|
||||
<el-icon :size="16" style="margin-right: 5px"><List /></el-icon>
|
||||
<span>页面菜单</span>
|
||||
</div>
|
||||
</FormItem>
|
||||
<FormItem label="菜单名称" prop="title">
|
||||
<Input class="menu-input" v-model="formAdd.title" />
|
||||
</FormItem>
|
||||
|
||||
<FormItem label="路由地址" prop="path" v-if="formAdd.level != 0">
|
||||
<Input v-model="formAdd.path" />
|
||||
</FormItem>
|
||||
<FormItem label="路由名称" prop="name" class="block-tool">
|
||||
<Tooltip placement="right" content="路由name，需英文唯一，跳转页面用">
|
||||
<Input v-model="formAdd.name" />
|
||||
</Tooltip>
|
||||
</FormItem>
|
||||
<FormItem label="文件路径" prop="frontRoute" v-if="formAdd.level != 0">
|
||||
<Input v-model="formAdd.frontRoute" />
|
||||
</FormItem>
|
||||
<FormItem label="权限url" v-if="formAdd.level != 0">
|
||||
<Input v-model="formAdd.permission" type="textarea" />
|
||||
</el-form-item>
|
||||
<el-form-item label="菜单名称" prop="title">
|
||||
<el-input class="menu-input" v-model="formAdd.title" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="formAdd.level != 0" label="路由地址" prop="path">
|
||||
<el-input v-model="formAdd.path" />
|
||||
</el-form-item>
|
||||
<el-form-item label="路由名称" prop="name" class="block-tool">
|
||||
<el-tooltip placement="right" content="路由name，需英文唯一，跳转页面用">
|
||||
<el-input v-model="formAdd.name" />
|
||||
</el-tooltip>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="formAdd.level != 0" label="文件路径" prop="frontRoute">
|
||||
<el-input v-model="formAdd.frontRoute" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="formAdd.level != 0" label="权限url">
|
||||
<el-input v-model="formAdd.permission" type="textarea" />
|
||||
<div class="desc">*号模糊匹配，逗号分割</div>
|
||||
</FormItem>
|
||||
<FormItem label="排序值" prop="sortOrder">
|
||||
<Tooltip trigger="hover" placement="right" content="值越小越靠前，支持小数">
|
||||
<InputNumber :max="1000" :min="0" v-model="formAdd.sortOrder"></InputNumber>
|
||||
</Tooltip>
|
||||
</FormItem>
|
||||
</Form>
|
||||
<div slot="footer">
|
||||
<Button type="text" @click="menuModalVisible = false">取消</Button>
|
||||
<Button type="primary" :loading="submitLoading" @click="submitAdd">提交</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序值" prop="sortOrder">
|
||||
<el-tooltip placement="right" content="值越小越靠前，支持小数">
|
||||
<el-input-number v-model="formAdd.sortOrder" :max="1000" :min="0" />
|
||||
</el-tooltip>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="menuModalVisible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="submitLoading" @click="submitAdd">提交</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Menu, List, ArrowDown } from "@element-plus/icons-vue";
|
||||
import {
|
||||
getAllPermissionList,
|
||||
addPermission,
|
||||
@@ -194,25 +194,36 @@ import {
|
||||
searchPermission,
|
||||
} from "@/api/index";
|
||||
import util from "@/libs/util.js";
|
||||
import Cookies from "js-cookie";
|
||||
|
||||
export default {
|
||||
name: "menu-manage",
|
||||
components: {
|
||||
Menu,
|
||||
List,
|
||||
ArrowDown,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: true, // 加载状态
|
||||
strict: true, // 级联 单选
|
||||
maxHeight: "500px", // 最大高度
|
||||
expandLevel: 1, // 展开层级
|
||||
menuModalVisible: false, // 添加菜单modal
|
||||
selectList: [], // 已选列表
|
||||
selectCount: 0, // 所选数量
|
||||
showParent: false, // 展示父级
|
||||
searchKey: "", // 搜索关键词
|
||||
parentTitle: "", // 父级标题
|
||||
editTitle: "", // 编辑标题
|
||||
modalTitle: "", // modal标题
|
||||
loading: true,
|
||||
strict: true,
|
||||
maxHeight: "500px",
|
||||
expandLevel: 1,
|
||||
menuModalVisible: false,
|
||||
selectList: [],
|
||||
selectCount: 0,
|
||||
showParent: false,
|
||||
searchKey: "",
|
||||
parentTitle: "",
|
||||
editTitle: "",
|
||||
modalTitle: "",
|
||||
expandedKeys: [],
|
||||
currentNodeKey: null,
|
||||
treeKey: 0,
|
||||
treeProps: {
|
||||
label: "title",
|
||||
children: "children",
|
||||
},
|
||||
form: {
|
||||
// 表单数据
|
||||
id: "",
|
||||
title: "",
|
||||
name: "",
|
||||
@@ -223,11 +234,8 @@ export default {
|
||||
level: 0,
|
||||
permission: "",
|
||||
},
|
||||
formAdd: {
|
||||
// 添加表单
|
||||
},
|
||||
formAdd: {},
|
||||
formValidate: {
|
||||
// 验证规则
|
||||
title: [{ required: true, message: "菜单名称名称不能为空", trigger: "blur" }],
|
||||
name: [{ required: true, message: "路由名称不能为空", trigger: "blur" }],
|
||||
path: [{ required: true, message: "路由地址不能为空", trigger: "blur" }],
|
||||
@@ -241,43 +249,26 @@ export default {
|
||||
},
|
||||
],
|
||||
},
|
||||
submitLoading: false, // 提交状态
|
||||
data: [], // 数据
|
||||
submitLoading: false,
|
||||
data: [],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 初始化数据
|
||||
init() {
|
||||
this.getAllList();
|
||||
},
|
||||
|
||||
renderContent(h, { root, node, data }) {
|
||||
// 渲染树形结构前面图标
|
||||
let icon = "";
|
||||
if (data.level == 0) {
|
||||
icon = "ios-navigate";
|
||||
} else if (data.level == 1) {
|
||||
icon = "md-list-box";
|
||||
} else if (data.level == 2) {
|
||||
icon = "md-list";
|
||||
}
|
||||
return h("span", [
|
||||
h("span", [
|
||||
h("Icon", {
|
||||
props: {
|
||||
type: icon,
|
||||
size: "16",
|
||||
},
|
||||
style: {
|
||||
"margin-right": "8px",
|
||||
"margin-bottom": "3px",
|
||||
},
|
||||
}),
|
||||
h("span", data.title),
|
||||
]),
|
||||
]);
|
||||
collectExpandedKeys(nodes, keys = []) {
|
||||
if (!nodes) return keys;
|
||||
nodes.forEach((node) => {
|
||||
if (node.expand === true) {
|
||||
keys.push(node.id);
|
||||
}
|
||||
if (node.children && node.children.length > 0) {
|
||||
this.collectExpandedKeys(node.children, keys);
|
||||
}
|
||||
});
|
||||
return keys;
|
||||
},
|
||||
// 更多操作
|
||||
handleDropdown(name) {
|
||||
if (name == "expandOne") {
|
||||
this.expandLevel = 1;
|
||||
@@ -296,14 +287,12 @@ export default {
|
||||
this.getAllList();
|
||||
}
|
||||
},
|
||||
// 获取所有菜单
|
||||
getAllList() {
|
||||
this.loading = true;
|
||||
getAllPermissionList().then((res) => {
|
||||
this.loading = false;
|
||||
if (res.success) {
|
||||
// 仅展开指定级数 默认后台已展开所有
|
||||
let expandLevel = this.expandLevel;
|
||||
const expandLevel = this.expandLevel;
|
||||
res.result.forEach(function (e) {
|
||||
if (expandLevel == 1) {
|
||||
if (e.level == 0) {
|
||||
@@ -380,22 +369,25 @@ export default {
|
||||
}
|
||||
});
|
||||
this.data = res.result;
|
||||
this.expandedKeys = this.collectExpandedKeys(res.result);
|
||||
this.treeKey += 1;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 选择菜单
|
||||
selectTree(v) {
|
||||
if (v.length > 0) {
|
||||
let str = JSON.stringify(v);
|
||||
let menu = JSON.parse(str);
|
||||
this.form = menu[0];
|
||||
console.log(this.form);
|
||||
this.editTitle = menu[0].title;
|
||||
onNodeClick(data) {
|
||||
if (data) {
|
||||
const menu = JSON.parse(JSON.stringify(data));
|
||||
this.form = menu;
|
||||
this.editTitle = menu.title;
|
||||
this.currentNodeKey = menu.id;
|
||||
} else {
|
||||
this.cancelEdit();
|
||||
}
|
||||
},
|
||||
// 搜索菜单
|
||||
onCheckChange(_data, { checkedNodes }) {
|
||||
this.selectList = checkedNodes;
|
||||
this.selectCount = checkedNodes.length;
|
||||
},
|
||||
search() {
|
||||
if (this.searchKey) {
|
||||
this.loading = true;
|
||||
@@ -403,28 +395,25 @@ export default {
|
||||
this.loading = false;
|
||||
if (res.success) {
|
||||
this.data = res.result;
|
||||
this.expandedKeys = [];
|
||||
this.treeKey += 1;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.getAllList();
|
||||
}
|
||||
},
|
||||
// 取消选择
|
||||
cancelEdit() {
|
||||
let data = this.$refs.tree.getSelectedNodes()[0];
|
||||
if (data) {
|
||||
data.selected = false;
|
||||
}
|
||||
this.$refs.treeRef?.setCurrentKey(null);
|
||||
this.currentNodeKey = null;
|
||||
this.$refs.form.resetFields();
|
||||
this.form.id = "";
|
||||
this.editTitle = "";
|
||||
},
|
||||
// 重置表单
|
||||
handleReset() {
|
||||
this.$refs.form.resetFields();
|
||||
this.form.frontRoute = "";
|
||||
},
|
||||
// 保存
|
||||
submitEdit() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
@@ -436,7 +425,6 @@ export default {
|
||||
if (this.form.sortOrder == null) {
|
||||
this.form.sortOrder = 0;
|
||||
}
|
||||
// 删除一些之前添加的无用字段
|
||||
delete this.form.icon;
|
||||
delete this.form.frontComponent;
|
||||
delete this.form.buttonType;
|
||||
@@ -444,13 +432,11 @@ export default {
|
||||
delete this.form.selected;
|
||||
delete this.form.description;
|
||||
delete this.form.children;
|
||||
delete this.form.children;
|
||||
|
||||
editPermission(this.form).then((res) => {
|
||||
this.submitLoading = false;
|
||||
if (res.success) {
|
||||
this.$Message.success("编辑成功");
|
||||
// 标记重新获取菜单数据
|
||||
this.$store.commit("setAdded", false);
|
||||
util.initRouter(this);
|
||||
this.init();
|
||||
@@ -460,7 +446,6 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
// 添加
|
||||
submitAdd() {
|
||||
this.$refs.formAdd.validate((valid) => {
|
||||
if (valid) {
|
||||
@@ -470,7 +455,6 @@ export default {
|
||||
this.submitLoading = false;
|
||||
if (res.success) {
|
||||
this.$Message.success("添加成功");
|
||||
// 标记重新获取菜单数据
|
||||
this.$store.commit("setAdded", false);
|
||||
util.initRouter(this);
|
||||
this.init();
|
||||
@@ -480,7 +464,6 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
// 添加子菜单
|
||||
addMenu() {
|
||||
if (!this.form.id) {
|
||||
this.$Message.warning("请先点击选择一个菜单权限节点");
|
||||
@@ -500,7 +483,7 @@ export default {
|
||||
parentId: this.form.id,
|
||||
level: Number(this.form.level) + 1,
|
||||
sortOrder: 0,
|
||||
permission: "", // 权限url
|
||||
permission: "",
|
||||
};
|
||||
if (this.form.level == 0) {
|
||||
this.formAdd.path = "/";
|
||||
@@ -508,7 +491,6 @@ export default {
|
||||
}
|
||||
this.menuModalVisible = true;
|
||||
},
|
||||
// 添加顶级菜单
|
||||
addRootMenu() {
|
||||
this.modalTitle = "添加顶级菜单";
|
||||
this.showParent = false;
|
||||
@@ -518,12 +500,6 @@ export default {
|
||||
};
|
||||
this.menuModalVisible = true;
|
||||
},
|
||||
// 选中菜单赋值
|
||||
changeSelect(v) {
|
||||
this.selectCount = v.length;
|
||||
this.selectList = v;
|
||||
},
|
||||
// 批量删除菜单
|
||||
delAll() {
|
||||
if (this.selectCount <= 0) {
|
||||
this.$Message.warning("您还未勾选要删除的数据");
|
||||
@@ -543,7 +519,6 @@ export default {
|
||||
this.$Modal.remove();
|
||||
if (res.success) {
|
||||
this.$Message.success("删除成功");
|
||||
// 标记重新获取菜单数据
|
||||
this.$store.commit("setAdded", false);
|
||||
util.initRouter(this);
|
||||
this.selectList = [];
|
||||
@@ -557,13 +532,13 @@ export default {
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// 计算高度
|
||||
let height = document.documentElement.clientHeight;
|
||||
const height = document.documentElement.clientHeight;
|
||||
this.maxHeight = Number(height - 287) + "px";
|
||||
this.init();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/styles/tree-common.scss";
|
||||
.desc {
|
||||
@@ -573,4 +548,12 @@ export default {
|
||||
.menu-input {
|
||||
width: 362px;
|
||||
}
|
||||
.tree-node-icon {
|
||||
margin-right: 8px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.tree-node-label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,24 +1,27 @@
|
||||
<template>
|
||||
<Tabs value="name1">
|
||||
<TabPane label="平台菜单" name="name1">
|
||||
<managerMenu></managerMenu>
|
||||
|
||||
</TabPane>
|
||||
<TabPane label="店铺菜单" name="name2">
|
||||
<storeMenu></storeMenu>
|
||||
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
<el-tabs v-model="activeTab">
|
||||
<el-tab-pane label="平台菜单" name="platform">
|
||||
<managerMenu />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="店铺菜单" name="store">
|
||||
<storeMenu />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
<script>
|
||||
import managerMenu from "./menu";
|
||||
import storeMenu from "./storeMenu";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
managerMenu, storeMenu
|
||||
managerMenu,
|
||||
storeMenu,
|
||||
},
|
||||
|
||||
}
|
||||
data() {
|
||||
return {
|
||||
activeTab: "platform",
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,191 +1,191 @@
|
||||
<template>
|
||||
<div class="search">
|
||||
<Card>
|
||||
<!-- 筛选项和操作按钮 -->
|
||||
<Row class="operation">
|
||||
<i-switch
|
||||
<el-card>
|
||||
<el-row class="operation">
|
||||
<el-switch
|
||||
v-model="strict"
|
||||
class="selectModel"
|
||||
size="large"
|
||||
active-text="级联"
|
||||
inactive-text="单选"
|
||||
style="margin-right: 5px"
|
||||
>
|
||||
<span slot="open">级联</span>
|
||||
<span slot="close">单选</span>
|
||||
</i-switch>
|
||||
<Button @click="addRootMenu">添加顶级菜单</Button>
|
||||
<Button @click="addMenu" type="primary">添加子菜单</Button>
|
||||
<Button @click="delAll">批量删除</Button>
|
||||
<Dropdown @on-click="handleDropdown">
|
||||
<Button>
|
||||
/>
|
||||
<el-button @click="addRootMenu">添加顶级菜单</el-button>
|
||||
<el-button type="primary" @click="addMenu">添加子菜单</el-button>
|
||||
<el-button @click="delAll">批量删除</el-button>
|
||||
<el-dropdown @command="handleDropdown">
|
||||
<el-button>
|
||||
更多操作
|
||||
<Icon type="md-arrow-dropdown"></Icon>
|
||||
</Button>
|
||||
<DropdownMenu slot="list">
|
||||
<DropdownItem name="refresh">刷新</DropdownItem>
|
||||
<DropdownItem name="expandOne">收合所有</DropdownItem>
|
||||
<DropdownItem name="expandTwo">展开一级</DropdownItem>
|
||||
<DropdownItem name="expandThree">展开两级</DropdownItem>
|
||||
<DropdownItem name="expandAll">展开所有</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
</Row>
|
||||
<!-- 页面主体，左侧树结构，右侧表单项 -->
|
||||
<Row type="flex" justify="start">
|
||||
<Col :md="8" :lg="8" :xl="6">
|
||||
<Alert show-icon>
|
||||
<el-icon class="el-icon--right"><ArrowDown /></el-icon>
|
||||
</el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item command="refresh">刷新</el-dropdown-item>
|
||||
<el-dropdown-item command="expandOne">收合所有</el-dropdown-item>
|
||||
<el-dropdown-item command="expandTwo">展开一级</el-dropdown-item>
|
||||
<el-dropdown-item command="expandThree">展开两级</el-dropdown-item>
|
||||
<el-dropdown-item command="expandAll">展开所有</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</el-row>
|
||||
<el-row type="flex" justify="start">
|
||||
<el-col :md="8" :lg="8" :xl="6">
|
||||
<el-alert type="info" show-icon :closable="false">
|
||||
当前选择编辑：
|
||||
<span class="select-title">{{ editTitle }}</span>
|
||||
<a class="select-clear" v-if="form.id" @click="cancelEdit">取消选择</a>
|
||||
</Alert>
|
||||
<Input
|
||||
</el-alert>
|
||||
<el-input
|
||||
v-model="searchKey"
|
||||
suffix="ios-search"
|
||||
@on-change="search"
|
||||
placeholder="输入菜单名搜索"
|
||||
clearable
|
||||
placeholder="输入菜单名搜索"
|
||||
@input="search"
|
||||
@clear="search"
|
||||
/>
|
||||
<div class="tree-bar" :style="{ maxHeight: maxHeight }">
|
||||
<Tree
|
||||
ref="tree"
|
||||
<div v-loading="loading" class="tree-bar" :style="{ maxHeight: maxHeight }">
|
||||
<el-tree
|
||||
:key="treeKey"
|
||||
ref="treeRef"
|
||||
:data="data"
|
||||
:props="treeProps"
|
||||
node-key="id"
|
||||
show-checkbox
|
||||
:render="renderContent"
|
||||
@on-select-change="selectTree"
|
||||
@on-check-change="changeSelect"
|
||||
highlight-current
|
||||
:check-strictly="!strict"
|
||||
></Tree>
|
||||
<Spin size="large" fix v-if="loading"></Spin>
|
||||
:default-expanded-keys="expandedKeys"
|
||||
:current-node-key="currentNodeKey"
|
||||
@node-click="onNodeClick"
|
||||
@check="onCheckChange"
|
||||
>
|
||||
<template #default="{ data: nodeData }">
|
||||
<span class="tree-node-label">
|
||||
<el-icon v-if="nodeData.level == 0" class="tree-node-icon"><Menu /></el-icon>
|
||||
<el-icon v-else class="tree-node-icon"><List /></el-icon>
|
||||
<span>{{ nodeData.title }}</span>
|
||||
</span>
|
||||
</template>
|
||||
</el-tree>
|
||||
</div>
|
||||
</Col>
|
||||
<Col :md="15" :lg="13" :xl="9" style="margin-left: 10px">
|
||||
<Form ref="form" :model="form" :label-width="110" :rules="formValidate">
|
||||
<FormItem label="类型" prop="type">
|
||||
</el-col>
|
||||
<el-col :md="15" :lg="13" :xl="9" style="margin-left: 10px">
|
||||
<el-form ref="form" :model="form" label-width="110px" :rules="formValidate">
|
||||
<el-form-item label="类型" prop="type">
|
||||
<div v-show="form.level == 0">
|
||||
<Icon
|
||||
type="ios-navigate-outline"
|
||||
size="16"
|
||||
style="margin-right: 5px"
|
||||
></Icon>
|
||||
<el-icon :size="16" style="margin-right: 5px"><Menu /></el-icon>
|
||||
<span>顶级菜单</span>
|
||||
</div>
|
||||
<div v-show="form.level == 1 || form.level == 2">
|
||||
<Icon
|
||||
type="ios-list-box-outline"
|
||||
size="16"
|
||||
style="margin-right: 5px"
|
||||
></Icon>
|
||||
<el-icon :size="16" style="margin-right: 5px"><List /></el-icon>
|
||||
<span>页面菜单</span>
|
||||
</div>
|
||||
</FormItem>
|
||||
<FormItem label="菜单名称" prop="title">
|
||||
<Input class="menu-input" v-model="form.title" />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
</el-form-item>
|
||||
<el-form-item label="菜单名称" prop="title">
|
||||
<el-input class="menu-input" v-model="form.title" />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="form.level != 0"
|
||||
label="路由地址"
|
||||
prop="path"
|
||||
v-if="form.level != 0"
|
||||
class="block-tool"
|
||||
>
|
||||
<Tooltip
|
||||
placement="right"
|
||||
content="路由地址，英文唯一，跳转页面，路径展示用 "
|
||||
>
|
||||
<Input class="menu-input" v-model="form.path" />
|
||||
</Tooltip>
|
||||
</FormItem>
|
||||
<FormItem label="路由名称" prop="name" class="block-tool">
|
||||
<Tooltip
|
||||
placement="right"
|
||||
content="路由name，需英文唯一，跳转页面用"
|
||||
transfer
|
||||
>
|
||||
<Input class="menu-input" v-model="form.name" />
|
||||
</Tooltip>
|
||||
</FormItem>
|
||||
<FormItem label="文件路径" prop="frontRoute" v-if="form.level != 0">
|
||||
<Input class="menu-input" v-model="form.frontRoute" />
|
||||
</FormItem>
|
||||
<FormItem label="权限url" v-if="form.level != 0" class="block-tool">
|
||||
<Tooltip placement="right" content="*号模糊匹配，逗号分割" transfer>
|
||||
<Input class="menu-input" v-model="form.permission" type="textarea" maxlength="1000" />
|
||||
</Tooltip>
|
||||
</FormItem>
|
||||
<FormItem label="排序值" prop="sortOrder">
|
||||
<Tooltip trigger="hover" placement="right" content="值越小越靠前，支持小数">
|
||||
<InputNumber :max="1000" :min="0" v-model="form.sortOrder"></InputNumber>
|
||||
</Tooltip>
|
||||
</FormItem>
|
||||
<Form-item>
|
||||
<Button
|
||||
style="margin-right: 5px"
|
||||
@click="submitEdit"
|
||||
:loading="submitLoading"
|
||||
<el-tooltip placement="right" content="路由地址，英文唯一，跳转页面，路径展示用 ">
|
||||
<el-input class="menu-input" v-model="form.path" />
|
||||
</el-tooltip>
|
||||
</el-form-item>
|
||||
<el-form-item label="路由名称" prop="name" class="block-tool">
|
||||
<el-tooltip placement="right" content="路由name，需英文唯一，跳转页面用">
|
||||
<el-input class="menu-input" v-model="form.name" />
|
||||
</el-tooltip>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.level != 0" label="文件路径" prop="frontRoute">
|
||||
<el-input class="menu-input" v-model="form.frontRoute" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.level != 0" label="权限url" class="block-tool">
|
||||
<el-tooltip placement="right" content="*号模糊匹配，逗号分割">
|
||||
<el-input
|
||||
class="menu-input"
|
||||
v-model="form.permission"
|
||||
type="textarea"
|
||||
maxlength="1000"
|
||||
/>
|
||||
</el-tooltip>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序值" prop="sortOrder">
|
||||
<el-tooltip placement="right" content="值越小越靠前，支持小数">
|
||||
<el-input-number v-model="form.sortOrder" :max="1000" :min="0" />
|
||||
</el-tooltip>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
>保存
|
||||
</Button>
|
||||
<Button @click="handleReset">重置</Button>
|
||||
</Form-item>
|
||||
</Form>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
style="margin-right: 5px"
|
||||
:loading="submitLoading"
|
||||
@click="submitEdit"
|
||||
>
|
||||
保存
|
||||
</el-button>
|
||||
<el-button @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<Modal
|
||||
draggable
|
||||
:title="modalTitle"
|
||||
<el-dialog
|
||||
v-model="menuModalVisible"
|
||||
:mask-closable="false"
|
||||
:width="500"
|
||||
:styles="{ top: '30px' }"
|
||||
:title="modalTitle"
|
||||
width="500px"
|
||||
:close-on-click-modal="false"
|
||||
top="30px"
|
||||
>
|
||||
<Form ref="formAdd" :model="formAdd" :label-width="100" :rules="formValidate">
|
||||
<el-form ref="formAdd" :model="formAdd" label-width="100px" :rules="formValidate">
|
||||
<div v-if="showParent">
|
||||
<FormItem label="上级节点：">{{ parentTitle }}</FormItem>
|
||||
<el-form-item label="上级节点：">{{ parentTitle }}</el-form-item>
|
||||
</div>
|
||||
<FormItem label="类型" prop="type">
|
||||
<el-form-item label="类型" prop="type">
|
||||
<div v-show="formAdd.level == 0">
|
||||
<Icon type="ios-navigate-outline" size="16" style="margin-right: 5px"></Icon>
|
||||
<el-icon :size="16" style="margin-right: 5px"><Menu /></el-icon>
|
||||
<span>顶级菜单</span>
|
||||
</div>
|
||||
<div v-show="formAdd.level != 0">
|
||||
<Icon type="ios-list-box-outline" size="16" style="margin-right: 5px"></Icon>
|
||||
<el-icon :size="16" style="margin-right: 5px"><List /></el-icon>
|
||||
<span>页面菜单</span>
|
||||
</div>
|
||||
</FormItem>
|
||||
<FormItem label="菜单名称" prop="title">
|
||||
<Input class="menu-input" v-model="formAdd.title" />
|
||||
</FormItem>
|
||||
|
||||
<FormItem label="路由地址" prop="path" v-if="formAdd.level != 0">
|
||||
<Input v-model="formAdd.path" />
|
||||
</FormItem>
|
||||
<FormItem label="路由名称" prop="name" class="block-tool">
|
||||
<Tooltip placement="right" content="路由name，需英文唯一，跳转页面用">
|
||||
<Input v-model="formAdd.name" />
|
||||
</Tooltip>
|
||||
</FormItem>
|
||||
<FormItem label="文件路径" prop="frontRoute" v-if="formAdd.level != 0">
|
||||
<Input v-model="formAdd.frontRoute" />
|
||||
</FormItem>
|
||||
<FormItem label="权限url" v-if="formAdd.level != 0">
|
||||
<Input v-model="formAdd.permission" type="textarea" />
|
||||
</el-form-item>
|
||||
<el-form-item label="菜单名称" prop="title">
|
||||
<el-input class="menu-input" v-model="formAdd.title" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="formAdd.level != 0" label="路由地址" prop="path">
|
||||
<el-input v-model="formAdd.path" />
|
||||
</el-form-item>
|
||||
<el-form-item label="路由名称" prop="name" class="block-tool">
|
||||
<el-tooltip placement="right" content="路由name，需英文唯一，跳转页面用">
|
||||
<el-input v-model="formAdd.name" />
|
||||
</el-tooltip>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="formAdd.level != 0" label="文件路径" prop="frontRoute">
|
||||
<el-input v-model="formAdd.frontRoute" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="formAdd.level != 0" label="权限url">
|
||||
<el-input v-model="formAdd.permission" type="textarea" />
|
||||
<div class="desc">*号模糊匹配，逗号分割</div>
|
||||
</FormItem>
|
||||
<FormItem label="排序值" prop="sortOrder">
|
||||
<Tooltip trigger="hover" placement="right" content="值越小越靠前，支持小数">
|
||||
<InputNumber :max="1000" :min="0" v-model="formAdd.sortOrder"></InputNumber>
|
||||
</Tooltip>
|
||||
</FormItem>
|
||||
</Form>
|
||||
<div slot="footer">
|
||||
<Button type="text" @click="menuModalVisible = false">取消</Button>
|
||||
<Button type="primary" :loading="submitLoading" @click="submitAdd">提交</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序值" prop="sortOrder">
|
||||
<el-tooltip placement="right" content="值越小越靠前，支持小数">
|
||||
<el-input-number v-model="formAdd.sortOrder" :max="1000" :min="0" />
|
||||
</el-tooltip>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="menuModalVisible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="submitLoading" @click="submitAdd">提交</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Menu, List, ArrowDown } from "@element-plus/icons-vue";
|
||||
import {
|
||||
getStoreAllPermissionList,
|
||||
addStorePermission,
|
||||
@@ -194,25 +194,36 @@ import {
|
||||
searchStorePermission,
|
||||
} from "@/api/index";
|
||||
import util from "@/libs/util.js";
|
||||
import Cookies from "js-cookie";
|
||||
|
||||
export default {
|
||||
name: "store-menu-manage",
|
||||
components: {
|
||||
Menu,
|
||||
List,
|
||||
ArrowDown,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: true, // 加载状态
|
||||
strict: true, // 级联 单选
|
||||
maxHeight: "500px", // 最大高度
|
||||
expandLevel: 1, // 展开层级
|
||||
menuModalVisible: false, // 添加菜单modal
|
||||
selectList: [], // 已选列表
|
||||
selectCount: 0, // 所选数量
|
||||
showParent: false, // 展示父级
|
||||
searchKey: "", // 搜索关键词
|
||||
parentTitle: "", // 父级标题
|
||||
editTitle: "", // 编辑标题
|
||||
modalTitle: "", // modal标题
|
||||
loading: true,
|
||||
strict: true,
|
||||
maxHeight: "500px",
|
||||
expandLevel: 1,
|
||||
menuModalVisible: false,
|
||||
selectList: [],
|
||||
selectCount: 0,
|
||||
showParent: false,
|
||||
searchKey: "",
|
||||
parentTitle: "",
|
||||
editTitle: "",
|
||||
modalTitle: "",
|
||||
expandedKeys: [],
|
||||
currentNodeKey: null,
|
||||
treeKey: 0,
|
||||
treeProps: {
|
||||
label: "title",
|
||||
children: "children",
|
||||
},
|
||||
form: {
|
||||
// 表单数据
|
||||
id: "",
|
||||
title: "",
|
||||
name: "",
|
||||
@@ -223,11 +234,8 @@ export default {
|
||||
level: 0,
|
||||
permission: "",
|
||||
},
|
||||
formAdd: {
|
||||
// 添加表单
|
||||
},
|
||||
formAdd: {},
|
||||
formValidate: {
|
||||
// 验证规则
|
||||
title: [{ required: true, message: "菜单名称名称不能为空", trigger: "blur" }],
|
||||
name: [{ required: true, message: "路由名称不能为空", trigger: "blur" }],
|
||||
path: [{ required: true, message: "路由地址不能为空", trigger: "blur" }],
|
||||
@@ -241,43 +249,26 @@ export default {
|
||||
},
|
||||
],
|
||||
},
|
||||
submitLoading: false, // 提交状态
|
||||
data: [], // 数据
|
||||
submitLoading: false,
|
||||
data: [],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 初始化数据
|
||||
init() {
|
||||
this.getAllList();
|
||||
},
|
||||
|
||||
renderContent(h, { root, node, data }) {
|
||||
// 渲染树形结构前面图标
|
||||
let icon = "";
|
||||
if (data.level == 0) {
|
||||
icon = "ios-navigate";
|
||||
} else if (data.level == 1) {
|
||||
icon = "md-list-box";
|
||||
} else if (data.level == 2) {
|
||||
icon = "md-list";
|
||||
}
|
||||
return h("span", [
|
||||
h("span", [
|
||||
h("Icon", {
|
||||
props: {
|
||||
type: icon,
|
||||
size: "16",
|
||||
},
|
||||
style: {
|
||||
"margin-right": "8px",
|
||||
"margin-bottom": "3px",
|
||||
},
|
||||
}),
|
||||
h("span", data.title),
|
||||
]),
|
||||
]);
|
||||
collectExpandedKeys(nodes, keys = []) {
|
||||
if (!nodes) return keys;
|
||||
nodes.forEach((node) => {
|
||||
if (node.expand === true) {
|
||||
keys.push(node.id);
|
||||
}
|
||||
if (node.children && node.children.length > 0) {
|
||||
this.collectExpandedKeys(node.children, keys);
|
||||
}
|
||||
});
|
||||
return keys;
|
||||
},
|
||||
// 更多操作
|
||||
handleDropdown(name) {
|
||||
if (name == "expandOne") {
|
||||
this.expandLevel = 1;
|
||||
@@ -296,14 +287,12 @@ export default {
|
||||
this.getAllList();
|
||||
}
|
||||
},
|
||||
// 获取所有菜单
|
||||
getAllList() {
|
||||
this.loading = true;
|
||||
getStoreAllPermissionList().then((res) => {
|
||||
this.loading = false;
|
||||
if (res.success) {
|
||||
// 仅展开指定级数 默认后台已展开所有
|
||||
let expandLevel = this.expandLevel;
|
||||
const expandLevel = this.expandLevel;
|
||||
res.result.forEach(function (e) {
|
||||
if (expandLevel == 1) {
|
||||
if (e.level == 0) {
|
||||
@@ -380,22 +369,25 @@ export default {
|
||||
}
|
||||
});
|
||||
this.data = res.result;
|
||||
this.expandedKeys = this.collectExpandedKeys(res.result);
|
||||
this.treeKey += 1;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 选择菜单
|
||||
selectTree(v) {
|
||||
if (v.length > 0) {
|
||||
let str = JSON.stringify(v);
|
||||
let menu = JSON.parse(str);
|
||||
this.form = menu[0];
|
||||
console.log(this.form);
|
||||
this.editTitle = menu[0].title;
|
||||
onNodeClick(data) {
|
||||
if (data) {
|
||||
const menu = JSON.parse(JSON.stringify(data));
|
||||
this.form = menu;
|
||||
this.editTitle = menu.title;
|
||||
this.currentNodeKey = menu.id;
|
||||
} else {
|
||||
this.cancelEdit();
|
||||
}
|
||||
},
|
||||
// 搜索菜单
|
||||
onCheckChange(_data, { checkedNodes }) {
|
||||
this.selectList = checkedNodes;
|
||||
this.selectCount = checkedNodes.length;
|
||||
},
|
||||
search() {
|
||||
if (this.searchKey) {
|
||||
this.loading = true;
|
||||
@@ -403,28 +395,25 @@ export default {
|
||||
this.loading = false;
|
||||
if (res.success) {
|
||||
this.data = res.result;
|
||||
this.expandedKeys = [];
|
||||
this.treeKey += 1;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.getAllList();
|
||||
}
|
||||
},
|
||||
// 取消选择
|
||||
cancelEdit() {
|
||||
let data = this.$refs.tree.getSelectedNodes()[0];
|
||||
if (data) {
|
||||
data.selected = false;
|
||||
}
|
||||
this.$refs.treeRef?.setCurrentKey(null);
|
||||
this.currentNodeKey = null;
|
||||
this.$refs.form.resetFields();
|
||||
this.form.id = "";
|
||||
this.editTitle = "";
|
||||
},
|
||||
// 重置表单
|
||||
handleReset() {
|
||||
this.$refs.form.resetFields();
|
||||
this.form.frontRoute = "";
|
||||
},
|
||||
// 保存
|
||||
submitEdit() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
@@ -436,7 +425,6 @@ export default {
|
||||
if (this.form.sortOrder == null) {
|
||||
this.form.sortOrder = 0;
|
||||
}
|
||||
// 删除一些之前添加的无用字段
|
||||
delete this.form.icon;
|
||||
delete this.form.frontComponent;
|
||||
delete this.form.buttonType;
|
||||
@@ -444,13 +432,11 @@ export default {
|
||||
delete this.form.selected;
|
||||
delete this.form.description;
|
||||
delete this.form.children;
|
||||
delete this.form.children;
|
||||
|
||||
editStorePermission(this.form).then((res) => {
|
||||
this.submitLoading = false;
|
||||
if (res.success) {
|
||||
this.$Message.success("编辑成功");
|
||||
// 标记重新获取菜单数据
|
||||
this.$store.commit("setAdded", false);
|
||||
util.initRouter(this);
|
||||
this.init();
|
||||
@@ -460,7 +446,6 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
// 添加
|
||||
submitAdd() {
|
||||
this.$refs.formAdd.validate((valid) => {
|
||||
if (valid) {
|
||||
@@ -470,7 +455,6 @@ export default {
|
||||
this.submitLoading = false;
|
||||
if (res.success) {
|
||||
this.$Message.success("添加成功");
|
||||
// 标记重新获取菜单数据
|
||||
this.$store.commit("setAdded", false);
|
||||
util.initRouter(this);
|
||||
this.init();
|
||||
@@ -480,7 +464,6 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
// 添加子菜单
|
||||
addMenu() {
|
||||
if (!this.form.id) {
|
||||
this.$Message.warning("请先点击选择一个菜单权限节点");
|
||||
@@ -500,7 +483,7 @@ export default {
|
||||
parentId: this.form.id,
|
||||
level: Number(this.form.level) + 1,
|
||||
sortOrder: 0,
|
||||
permission: "", // 权限url
|
||||
permission: "",
|
||||
};
|
||||
if (this.form.level == 0) {
|
||||
this.formAdd.path = "/";
|
||||
@@ -508,7 +491,6 @@ export default {
|
||||
}
|
||||
this.menuModalVisible = true;
|
||||
},
|
||||
// 添加顶级菜单
|
||||
addRootMenu() {
|
||||
this.modalTitle = "添加顶级菜单";
|
||||
this.showParent = false;
|
||||
@@ -518,12 +500,6 @@ export default {
|
||||
};
|
||||
this.menuModalVisible = true;
|
||||
},
|
||||
// 选中菜单赋值
|
||||
changeSelect(v) {
|
||||
this.selectCount = v.length;
|
||||
this.selectList = v;
|
||||
},
|
||||
// 批量删除菜单
|
||||
delAll() {
|
||||
if (this.selectCount <= 0) {
|
||||
this.$Message.warning("您还未勾选要删除的数据");
|
||||
@@ -543,7 +519,6 @@ export default {
|
||||
this.$Modal.remove();
|
||||
if (res.success) {
|
||||
this.$Message.success("删除成功");
|
||||
// 标记重新获取菜单数据
|
||||
this.$store.commit("setAdded", false);
|
||||
util.initRouter(this);
|
||||
this.selectList = [];
|
||||
@@ -557,13 +532,13 @@ export default {
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// 计算高度
|
||||
let height = document.documentElement.clientHeight;
|
||||
const height = document.documentElement.clientHeight;
|
||||
this.maxHeight = Number(height - 287) + "px";
|
||||
this.init();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/styles/tree-common.scss";
|
||||
.desc {
|
||||
@@ -573,4 +548,12 @@ export default {
|
||||
.menu-input {
|
||||
width: 362px;
|
||||
}
|
||||
.tree-node-icon {
|
||||
margin-right: 8px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.tree-node-label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,181 +1,179 @@
|
||||
<template>
|
||||
<Card>
|
||||
<div style="margin-top: 0px">
|
||||
<div class="sign-name">
|
||||
{{id ? '修改签名' : '新增签名'}}
|
||||
</div>
|
||||
<Form ref="form" :model="form" :label-width="100" :rules="formValidate">
|
||||
<FormItem label="签名" prop="signName">
|
||||
<Input v-model="form.signName" maxlength="12" clearable style="width: 28%"
|
||||
placeholder="仅限2-12个字符，建议使用App应用名称或是网站名/公司名"/>
|
||||
</FormItem>
|
||||
<FormItem label="签名来源" prop="signSource">
|
||||
<Select v-model="form.signSource" placeholder="请选择签名来源" style="width: 28%">
|
||||
<Option :value="0">企事业单位的全称或简称</Option>
|
||||
<Option :value="1">工信部备案网站的全称或简称</Option>
|
||||
<Option :value="2">App应用的全称或简称</Option>
|
||||
<Option :value="3">公众号或小程序的全称或简称</Option>
|
||||
<Option :value="4">电商平台店铺名的全称或简称</Option>
|
||||
<Option :value="5">商标名的全称或简称</Option>
|
||||
</Select>
|
||||
</FormItem>
|
||||
<el-card>
|
||||
<div style="margin-top: 0">
|
||||
<div class="sign-name">{{ id ? "修改签名" : "新增签名" }}</div>
|
||||
<el-form ref="form" :model="form" label-width="100px" :rules="formValidate">
|
||||
<el-form-item label="签名" prop="signName">
|
||||
<el-input
|
||||
v-model="form.signName"
|
||||
maxlength="12"
|
||||
clearable
|
||||
style="width: 28%"
|
||||
placeholder="仅限2-12个字符，建议使用App应用名称或是网站名/公司名"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="签名来源" prop="signSource">
|
||||
<el-select v-model="form.signSource" placeholder="请选择签名来源" style="width: 28%">
|
||||
<el-option label="企事业单位的全称或简称" :value="0" />
|
||||
<el-option label="工信部备案网站的全称或简称" :value="1" />
|
||||
<el-option label="App应用的全称或简称" :value="2" />
|
||||
<el-option label="公众号或小程序的全称或简称" :value="3" />
|
||||
<el-option label="电商平台店铺名的全称或简称" :value="4" />
|
||||
<el-option label="商标名的全称或简称" :value="5" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<div class="div-remark div-remark-first">
|
||||
签名来源选择工信部备案网站的全称或简称时，请在说明中添加网站域名，加快审核速度；
|
||||
</div>
|
||||
<div class="div-remark div-remark-bottom">
|
||||
如果选择APP应用的全称或简称或公众号或小程序的全称或简称，则网站、APP、小程序或公众号必须已上线；
|
||||
</div>
|
||||
<FormItem label="证明文件">
|
||||
<el-form-item label="证明文件">
|
||||
<div style="float: left">
|
||||
<upload-pic-thumb
|
||||
v-model="form.businessLicense"
|
||||
:multiple="false"
|
||||
:max-size="2048"
|
||||
>
|
||||
</upload-pic-thumb>
|
||||
<upload-pic-thumb v-model="form.businessLicense" :multiple="false" :max-size="2048" />
|
||||
</div>
|
||||
<div style="float: left;margin-left: 20px">
|
||||
<upload-pic-thumb
|
||||
v-model="form.license"
|
||||
:max-size="2048"
|
||||
:multiple="false"
|
||||
></upload-pic-thumb>
|
||||
<div style="float: left; margin-left: 20px">
|
||||
<upload-pic-thumb v-model="form.license" :max-size="2048" :multiple="false" />
|
||||
</div>
|
||||
</FormItem>
|
||||
</el-form-item>
|
||||
<div class="div-remark div-remark-first">
|
||||
第一张为营业执照，第二张为授权委托书，请上传签名归属方的企事业单位的企业营业执照、组织机构代码证、税务登记证三证合一的证件及授权委托书
|
||||
</div>
|
||||
<div class="div-remark div-remark-bottom">
|
||||
支持jpg、png、gif、jpeg格式的图片，每张图片不大于2MB
|
||||
</div>
|
||||
<FormItem label="申请说明" prop="remark">
|
||||
<Input v-model="form.remark" clearable type="textarea" style="width: 50%" maxlength="100"
|
||||
:autosize="{maxRows:4,minRows: 4}" show-word-limit
|
||||
placeholder="请描述您的业务使用场景，不超过100字符；如：验证码、双十一大促营销"/>
|
||||
</FormItem>
|
||||
</Form>
|
||||
<div class="div-remark div-remark-bottom">支持jpg、png、gif、jpeg格式的图片，每张图片不大于2MB</div>
|
||||
<el-form-item label="申请说明" prop="remark">
|
||||
<el-input
|
||||
v-model="form.remark"
|
||||
clearable
|
||||
type="textarea"
|
||||
style="width: 50%"
|
||||
maxlength="100"
|
||||
:autosize="{ maxRows: 4, minRows: 4 }"
|
||||
show-word-limit
|
||||
placeholder="请描述您的业务使用场景，不超过100字符；如：验证码、双十一大促营销"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="footer">
|
||||
<Button type="primary" :loading="submitLoading" @click="addSignSubmit">提交</Button>
|
||||
<el-button type="primary" :loading="submitLoading" @click="addSignSubmit">提交</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as API_Setting from "@/api/setting.js";
|
||||
import uploadPicThumb from "@/components/lili/upload-pic-thumb";
|
||||
import * as API_Setting from "@/api/setting.js";
|
||||
import uploadPicThumb from "@/components/lili/upload-pic-thumb";
|
||||
|
||||
export default {
|
||||
name: "smsSign",
|
||||
components: {
|
||||
uploadPicThumb
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
id: 0, // 签名id
|
||||
form: { // 表单
|
||||
signName: "",
|
||||
businessLicense: "",
|
||||
license: "",
|
||||
},
|
||||
loading: false, // 加载状态
|
||||
formValidate: { // 验证规则
|
||||
signName: [{required: true, message: "签名名称不能为空", trigger: "blur"}],
|
||||
remark: [{required: true, message: "申请说明不能为空", trigger: "blur"}],
|
||||
businessLicense: [{required: true, message: " ", trigger: "blur"}],
|
||||
},
|
||||
submitLoading: false //提交加载状态
|
||||
}
|
||||
|
||||
},
|
||||
methods: {
|
||||
// 初始化数据
|
||||
init() {
|
||||
this.id = this.$route.query.id;
|
||||
if (this.id != undefined) {
|
||||
this.getSmsSignDetail();
|
||||
}
|
||||
export default {
|
||||
name: "smsSign",
|
||||
components: {
|
||||
uploadPicThumb,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
id: 0,
|
||||
form: {
|
||||
signName: "",
|
||||
businessLicense: "",
|
||||
license: "",
|
||||
signSource: "",
|
||||
remark: "",
|
||||
},
|
||||
//添加短信模板
|
||||
addSignSubmit() {
|
||||
//校验证件信息
|
||||
if (this.form.businessLicense == "" || this.form.license == "") {
|
||||
this.$Message.error("请完善证件信息");
|
||||
return
|
||||
}
|
||||
//校验签名来源
|
||||
if (this.form.signSource == "") {
|
||||
this.$Message.error("请选择签名来源");
|
||||
return
|
||||
}
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true;
|
||||
//新增
|
||||
if (this.id == undefined) {
|
||||
API_Setting.addSmsSign(this.form).then(res => {
|
||||
this.loading = false;
|
||||
if (res.success) {
|
||||
this.$Message.success('添加成功');
|
||||
this.$router.back()
|
||||
}
|
||||
}).catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
} else {
|
||||
API_Setting.editSmsSign(this.form).then(res => {
|
||||
this.loading = false;
|
||||
if (res.success) {
|
||||
this.$Message.success('修改成功');
|
||||
this.$router.back()
|
||||
}
|
||||
}).catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
loading: false,
|
||||
formValidate: {
|
||||
signName: [{ required: true, message: "签名名称不能为空", trigger: "blur" }],
|
||||
remark: [{ required: true, message: "申请说明不能为空", trigger: "blur" }],
|
||||
businessLicense: [{ required: true, message: " ", trigger: "blur" }],
|
||||
},
|
||||
//查询短信签名详细
|
||||
getSmsSignDetail() {
|
||||
API_Setting.smsSignDetail(this.id).then(res => {
|
||||
this.loading = false;
|
||||
if (res.success) {
|
||||
this.form = res.result
|
||||
}
|
||||
})
|
||||
submitLoading: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.id = this.$route.query.id;
|
||||
if (this.id != undefined) {
|
||||
this.getSmsSignDetail();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
addSignSubmit() {
|
||||
if (this.form.businessLicense == "" || this.form.license == "") {
|
||||
this.$Message.error("请完善证件信息");
|
||||
return;
|
||||
}
|
||||
if (this.form.signSource === "" || this.form.signSource === null || this.form.signSource === undefined) {
|
||||
this.$Message.error("请选择签名来源");
|
||||
return;
|
||||
}
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true;
|
||||
if (this.id == undefined) {
|
||||
API_Setting.addSmsSign(this.form)
|
||||
.then((res) => {
|
||||
this.loading = false;
|
||||
if (res.success) {
|
||||
this.$Message.success("添加成功");
|
||||
this.$router.back();
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
} else {
|
||||
API_Setting.editSmsSign(this.form)
|
||||
.then((res) => {
|
||||
this.loading = false;
|
||||
if (res.success) {
|
||||
this.$Message.success("修改成功");
|
||||
this.$router.back();
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
};
|
||||
getSmsSignDetail() {
|
||||
API_Setting.smsSignDetail(this.id).then((res) => {
|
||||
this.loading = false;
|
||||
if (res.success) {
|
||||
this.form = res.result;
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.sign-name {
|
||||
margin-top: 5px;
|
||||
margin-left: 20px;
|
||||
font-size: 16px;
|
||||
margin-bottom: 30px;
|
||||
color: #333;
|
||||
}
|
||||
.sign-name {
|
||||
margin-top: 5px;
|
||||
margin-left: 20px;
|
||||
font-size: 16px;
|
||||
margin-bottom: 30px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.div-remark {
|
||||
margin-left: 100px;
|
||||
margin-bottom: 2px;
|
||||
color: #999;
|
||||
}
|
||||
.div-remark {
|
||||
margin-left: 100px;
|
||||
margin-bottom: 2px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.div-remark-first {
|
||||
margin-top: -17px;
|
||||
}
|
||||
.div-remark-first {
|
||||
margin-top: -17px;
|
||||
}
|
||||
|
||||
.div-remark-bottom {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.div-remark-bottom {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-left: 100px;
|
||||
}
|
||||
.footer {
|
||||
margin-left: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
flex: 11;
|
||||
}
|
||||
|
||||
.ivu-card {
|
||||
.el-card {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -45,134 +45,174 @@
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.oss-tree-node {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.oss-tree-more {
|
||||
cursor: pointer;
|
||||
color: #909399;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
</style>
|
||||
<template>
|
||||
<div class="search">
|
||||
<Card class="tabs-card">
|
||||
<Tabs v-model="activeRoleTab" @on-click="handleRoleTabChange">
|
||||
<TabPane label="管理员" name="MANAGER"></TabPane>
|
||||
<TabPane label="商家" name="STORE"></TabPane>
|
||||
<TabPane label="用户" name="MEMBER"></TabPane>
|
||||
<TabPane label="客服" name="CUSTOMER"></TabPane>
|
||||
</Tabs>
|
||||
</Card>
|
||||
<Row>
|
||||
<Card>
|
||||
<el-card class="tabs-card">
|
||||
<el-tabs v-model="activeRoleTab" @tab-change="handleRoleTabChange">
|
||||
<el-tab-pane label="管理员" name="MANAGER" />
|
||||
<el-tab-pane label="商家" name="STORE" />
|
||||
<el-tab-pane label="用户" name="MEMBER" />
|
||||
<el-tab-pane label="客服" name="CUSTOMER" />
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
<el-row>
|
||||
<el-card>
|
||||
<div>
|
||||
<div class="operation">
|
||||
<Row @keydown.enter.native="handleSearch">
|
||||
<Form
|
||||
<el-row @keyup.enter="handleSearch">
|
||||
<el-form
|
||||
ref="searchForm"
|
||||
:label-width="85"
|
||||
label-width="85px"
|
||||
:model="searchForm"
|
||||
class="search-form"
|
||||
inline
|
||||
>
|
||||
<Form-item label="上传时间">
|
||||
<DatePicker
|
||||
<el-form-item label="上传时间">
|
||||
<el-date-picker
|
||||
v-model="selectDate"
|
||||
clearable
|
||||
format="yyyy-MM-dd"
|
||||
placeholder="选择起始时间"
|
||||
value-format="YYYY-MM-DD"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
style="width: 240px"
|
||||
type="daterange"
|
||||
@on-change="selectDateRange"
|
||||
></DatePicker>
|
||||
</Form-item>
|
||||
<Button
|
||||
class="search-btn"
|
||||
icon="ios-search"
|
||||
type="primary"
|
||||
@click="handleSearch"
|
||||
>搜索
|
||||
</Button>
|
||||
</Form>
|
||||
</Row>
|
||||
@change="selectDateRange"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button class="search-btn" type="primary" @click="handleSearch">搜索</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</div>
|
||||
<Row class="oss-manage-box">
|
||||
<Col v-if="canShowGroups" :span="isComponent?5:4">
|
||||
<el-row class="oss-manage-box">
|
||||
<el-col v-if="canShowGroups" :span="isComponent ? 5 : 4">
|
||||
<div class="file-list">
|
||||
<div class="article-category mr_10">
|
||||
<Tree :data="treeData" :render="renderContent" @on-select-change.self="handleCateChange"
|
||||
class="demo-tree-render"></Tree>
|
||||
<div class="group-row flex" v-if="!isComponent">
|
||||
<Button @click="handleClickAddGroup">添加分组</Button>
|
||||
<el-tree
|
||||
:data="treeData"
|
||||
node-key="value"
|
||||
:props="{ label: 'title', children: 'children' }"
|
||||
highlight-current
|
||||
class="demo-tree-render"
|
||||
@node-click="handleTreeNodeClick"
|
||||
>
|
||||
<template #default="{ data }">
|
||||
<span v-if="data" class="oss-tree-node">
|
||||
<span>{{ data.title }}</span>
|
||||
<el-dropdown
|
||||
v-if="data.value !== '0' && !isComponent"
|
||||
trigger="click"
|
||||
@command="(cmd) => onTreeDropdownCommand(cmd, data)"
|
||||
>
|
||||
<span class="oss-tree-more" @click.stop>···</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item command="edit">编辑</el-dropdown-item>
|
||||
<el-dropdown-item command="delete">删除</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</span>
|
||||
</template>
|
||||
</el-tree>
|
||||
<div v-if="!isComponent" class="group-row flex">
|
||||
<el-button @click="handleClickAddGroup">添加分组</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
<Col :span="canShowGroups ? (isComponent ? 19 : 20) : 24">
|
||||
</el-col>
|
||||
<el-col :span="canShowGroups ? (isComponent ? 19 : 20) : 24">
|
||||
<div class="pic-list">
|
||||
<div>
|
||||
<div class="oss-operation padding-row" style="display: flex;flex-direction: row-reverse;">
|
||||
<div class="oss-operation padding-row" style="display: flex; flex-direction: row-reverse">
|
||||
<div>
|
||||
<Upload
|
||||
<el-upload
|
||||
v-if="canUploadImages"
|
||||
ref="up"
|
||||
:action="commonUrl + '/common/common/upload/file'"
|
||||
:data="uploadData"
|
||||
:headers="accessToken"
|
||||
:before-upload="beforeUpload"
|
||||
:max-size="20480"
|
||||
:on-error="handleError"
|
||||
:on-exceeded-size="handleMaxSize"
|
||||
:on-success="handleSuccess"
|
||||
:show-upload-list="false"
|
||||
:show-file-list="false"
|
||||
multiple
|
||||
style="display: inline-block"
|
||||
>
|
||||
<Button>上传图片</Button>
|
||||
</Upload>
|
||||
<Button v-if="!isComponent && showType == 'list'" @click="removeAll">批量删除</Button>
|
||||
<el-button>上传图片</el-button>
|
||||
</el-upload>
|
||||
<el-button v-if="!isComponent && showType == 'list'" @click="removeAll">批量删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<CheckboxGroup v-model="selectedOss" @on-change="selectOssChange">
|
||||
<el-checkbox-group v-model="selectedOss" @change="selectOssChange">
|
||||
<div class="img-box">
|
||||
<div v-for="(item, index) in data" :key="index" class="img-item">
|
||||
<Checkbox :label="item.id+','+item.url" class="check-box">
|
||||
<template>
|
||||
<div class="card" @mouseenter.active="onMouseOver(item, index)"
|
||||
@mouseleave.active="onMouseOut(item, index)">
|
||||
<!--<div class="custom-checkbox-card-mask"><div class="custom-checkbox-card-mask-dot"/></div>-->
|
||||
<img :src="item.url" alt=""/>
|
||||
<div v-if="item.isShowPreview" class="preview">
|
||||
<div @click.prevent="download(item)">
|
||||
<Tooltip content="下载">
|
||||
<Icon type="md-cloud-download" size="18"/>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div @click.prevent="remove(item)">
|
||||
<Tooltip content="删除">
|
||||
<Icon type="md-trash" size="18"/>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div @click.prevent="showPic(item)">
|
||||
<Tooltip content="预览">
|
||||
<Icon type="ios-eye" size="22"/>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<el-checkbox :value="item.id + ',' + item.url" class="check-box">
|
||||
<div
|
||||
class="card"
|
||||
@mouseenter="onMouseOver(item, index)"
|
||||
@mouseleave="onMouseOut(item, index)"
|
||||
>
|
||||
<img :src="item.url" alt="" />
|
||||
<div v-if="item.isShowPreview" class="preview">
|
||||
<div @click.prevent="download(item)">
|
||||
<el-tooltip content="下载" placement="top">
|
||||
<el-icon :size="18"><Download /></el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div @click.prevent="remove(item)">
|
||||
<el-tooltip content="删除" placement="top">
|
||||
<el-icon :size="18"><Delete /></el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div @click.prevent="showPic(item)">
|
||||
<el-tooltip content="预览" placement="top">
|
||||
<el-icon :size="22"><View /></el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Checkbox>
|
||||
</div>
|
||||
</el-checkbox>
|
||||
<div>
|
||||
<Tooltip :content="item.name" placement="bottom">
|
||||
<el-tooltip :content="item.name" placement="bottom">
|
||||
<div class="text">{{ item.name }}</div>
|
||||
</Tooltip>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CheckboxGroup>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
<div class="page-box">
|
||||
<Page :total="total" :page-size="searchForm.pageSize" show-elevator @on-change="pageChange"
|
||||
size="small"/>
|
||||
<el-pagination
|
||||
v-model:current-page="searchForm.pageNumber"
|
||||
v-model:page-size="searchForm.pageSize"
|
||||
:total="total"
|
||||
layout="prev, pager, next, jumper"
|
||||
size="small"
|
||||
@current-change="pageChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
<!--<div class="oss-operation padding-row">-->
|
||||
@@ -334,97 +374,89 @@
|
||||
<!--@on-page-size-change="changePageSize"-->
|
||||
<!--></Page>-->
|
||||
<!--</Row>-->
|
||||
</Card>
|
||||
</Row>
|
||||
<Modal
|
||||
</el-card>
|
||||
</el-row>
|
||||
<el-dialog
|
||||
v-model="modalVisible"
|
||||
:mask-closable="false"
|
||||
:close-on-click-modal="false"
|
||||
:title="modalTitle"
|
||||
:width="500"
|
||||
width="500px"
|
||||
destroy-on-close
|
||||
>
|
||||
<Form ref="form" :label-width="95" :model="form" :rules="formValidate">
|
||||
<FormItem label="原文件名" prop="name">
|
||||
<Input v-model="form.name"/>
|
||||
</FormItem>
|
||||
<FormItem label="存储文件名" prop="fileKey">
|
||||
<Input v-model="form.fileKey" disabled/>
|
||||
</FormItem>
|
||||
</Form>
|
||||
<div slot="footer">
|
||||
<Button type="text" @click="handleCancel">取消</Button>
|
||||
<Button :loading="submitLoading" type="primary" @click="handleSubmit"
|
||||
>提交
|
||||
</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
<el-form ref="form" label-width="95px" :model="form" :rules="formValidate">
|
||||
<el-form-item label="原文件名" prop="name">
|
||||
<el-input v-model="form.name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="存储文件名" prop="fileKey">
|
||||
<el-input v-model="form.fileKey" disabled />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="handleCancel">取消</el-button>
|
||||
<el-button :loading="submitLoading" type="primary" @click="handleSubmit">提交</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<Modal v-model="picVisible" :title="picTitle" draggable>
|
||||
<el-dialog v-model="picVisible" :title="picTitle" width="600px">
|
||||
<img
|
||||
:src="file.url"
|
||||
alt="无效的图片链接"
|
||||
style="width: 100%; margin: 0 auto; display: block"
|
||||
/>
|
||||
<div slot="footer">
|
||||
<span
|
||||
>文件类型：{{ file.fileType }} 文件大小：{{ file.msize }} 创建时间：{{
|
||||
file.createTime
|
||||
}}</span
|
||||
>
|
||||
</div>
|
||||
</Modal>
|
||||
<template #footer>
|
||||
<span>文件类型：{{ file.fileType }} 文件大小：{{ file.msize }} 创建时间：{{ file.createTime }}</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<Modal
|
||||
<el-dialog
|
||||
v-model="videoVisible"
|
||||
:title="videoTitle"
|
||||
:width="800"
|
||||
draggable
|
||||
@on-cancel="closeVideo"
|
||||
width="800px"
|
||||
destroy-on-close
|
||||
@close="closeVideo"
|
||||
>
|
||||
<div id="dplayer"></div>
|
||||
<div slot="footer">
|
||||
<span
|
||||
>文件类型：{{ file.fileType }} 文件大小：{{ file.msize }} 创建时间：{{
|
||||
file.createTime
|
||||
}}</span
|
||||
>
|
||||
</div>
|
||||
</Modal>
|
||||
<template #footer>
|
||||
<span>文件类型：{{ file.fileType }} 文件大小：{{ file.msize }} 创建时间：{{ file.createTime }}</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 添加分组修改分组编辑框 -->
|
||||
<Modal
|
||||
<el-dialog
|
||||
v-model="enableGroup"
|
||||
:title="insertOrUpdate === 'insert' ? '添加分组' : '修改分组'"
|
||||
:loading="groupLoading"
|
||||
@on-ok="submitAddGroup"
|
||||
footer-hide
|
||||
width="500px"
|
||||
:close-on-click-modal="false"
|
||||
destroy-on-close
|
||||
>
|
||||
<Form
|
||||
<el-form
|
||||
ref="formValidate"
|
||||
:label-width="80"
|
||||
label-width="80px"
|
||||
:model="groupFormValidate"
|
||||
:rules="groupRuleValidate"
|
||||
>
|
||||
<FormItem label="所在分组" prop="id">
|
||||
<Cascader
|
||||
<el-form-item label="所在分组" prop="id">
|
||||
<el-cascader
|
||||
v-model="defaultValue"
|
||||
:data="treeData"
|
||||
change-on-select
|
||||
@on-change="treeDataChange"
|
||||
></Cascader>
|
||||
</FormItem>
|
||||
<FormItem label="分组名称" prop="directoryName">
|
||||
<Input v-model="groupFormValidate.directoryName"/>
|
||||
</FormItem>
|
||||
</Form>
|
||||
:options="treeData"
|
||||
:props="{ value: 'value', label: 'label', children: 'children', checkStrictly: true }"
|
||||
style="width: 100%"
|
||||
@change="treeDataChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="分组名称" prop="directoryName">
|
||||
<el-input v-model="groupFormValidate.directoryName" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="modal-footer">
|
||||
<Button @click="enableGroup = false">取消</Button>
|
||||
<Button type="primary" @click="submitAddGroup">确定</Button>
|
||||
<el-button @click="enableGroup = false">取消</el-button>
|
||||
<el-button type="primary" :loading="groupLoading" @click="submitAddGroup">确定</el-button>
|
||||
</div>
|
||||
</Modal>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Delete, Download, View } from "@element-plus/icons-vue";
|
||||
import {
|
||||
addFileDirectory,
|
||||
deleteFile,
|
||||
@@ -442,6 +474,7 @@ const config = require("@/config/index");
|
||||
let dp;
|
||||
export default {
|
||||
name: "oss-manage",
|
||||
components: { Delete, Download, View },
|
||||
props: {
|
||||
isComponent: {
|
||||
default: false,
|
||||
@@ -954,19 +987,37 @@ export default {
|
||||
},
|
||||
|
||||
methods: {
|
||||
beforeUpload() {
|
||||
beforeUpload(file) {
|
||||
if (!this.canUploadImages) {
|
||||
this.$Message.warning("仅管理员模块支持上传图片");
|
||||
return false;
|
||||
}
|
||||
const maxSize = 20480 * 1024;
|
||||
if (file && file.size > maxSize) {
|
||||
this.handleMaxSize(file);
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
handleTreeNodeClick(data) {
|
||||
if (data) {
|
||||
this.handleCateChange([data]);
|
||||
}
|
||||
},
|
||||
onTreeDropdownCommand(cmd, data) {
|
||||
this.selectedGroupData = data;
|
||||
if (cmd === "edit") {
|
||||
this.handleContextMenuEdit(null, null, data);
|
||||
} else if (cmd === "delete") {
|
||||
this.handleContextMenuDelete();
|
||||
}
|
||||
},
|
||||
onMouseOver(item, index) {
|
||||
this.$set(this.data[index], 'isShowPreview', true);
|
||||
this.data[index].isShowPreview = true;
|
||||
this.$forceUpdate();
|
||||
},
|
||||
onMouseOut(item, index) {
|
||||
this.$set(this.data[index], 'isShowPreview', false);
|
||||
this.data[index].isShowPreview = false;
|
||||
},
|
||||
handleRoleTabChange(name) {
|
||||
this.activeRoleTab = name;
|
||||
@@ -977,7 +1028,7 @@ export default {
|
||||
this.defaultValue = [];
|
||||
this.groupFormValidate.id = [];
|
||||
this.groupFormValidate.level = 0;
|
||||
this.$set(this, "selectedOss", []);
|
||||
this.selectedOss = [];
|
||||
this.updateTreeDataByRole();
|
||||
this.getDataList();
|
||||
},
|
||||
@@ -1024,7 +1075,7 @@ export default {
|
||||
},
|
||||
// 页码改变时回调
|
||||
pageChange(value) {
|
||||
this.$set(this, 'selectedOss', []);
|
||||
this.selectedOss = [];
|
||||
this.searchForm.pageNumber = value;
|
||||
this.getDataList();
|
||||
},
|
||||
@@ -1109,15 +1160,26 @@ export default {
|
||||
},
|
||||
});
|
||||
},
|
||||
treeDataChange(value, selectedData) {
|
||||
treeDataChange(value) {
|
||||
if (value && value.length) {
|
||||
if (value[value.length - 1] == '0') {
|
||||
this.groupFormValidate.id = value;
|
||||
if (value[value.length - 1] == "0") {
|
||||
this.groupFormValidate.level = 0;
|
||||
} else {
|
||||
this.groupFormValidate.level = Number(selectedData[selectedData.length - 1].level) + 1;
|
||||
const node = this.findTreeNodeByValue(this.treeData, value[value.length - 1]);
|
||||
this.groupFormValidate.level = node ? Number(node.level) + 1 : 0;
|
||||
}
|
||||
}
|
||||
},
|
||||
findTreeNodeByValue(nodes, value) {
|
||||
if (!nodes || !nodes.length) return null;
|
||||
for (const node of nodes) {
|
||||
if (String(node.value) === String(value)) return node;
|
||||
const found = this.findTreeNodeByValue(node.children, value);
|
||||
if (found) return found;
|
||||
}
|
||||
return null;
|
||||
},
|
||||
// 保存/修改分组
|
||||
async submitAddGroup() {
|
||||
this.$refs["formValidate"].validate(async (valid) => {
|
||||
@@ -1220,7 +1282,7 @@ export default {
|
||||
}
|
||||
this.searchForm.userEnums = type || this.activeRoleTab;
|
||||
this.getDataList();
|
||||
this.$set(this, 'selectedOss', []);
|
||||
this.selectedOss = [];
|
||||
}
|
||||
},
|
||||
/**
|
||||
@@ -1287,9 +1349,12 @@ export default {
|
||||
},
|
||||
// 起止时间从新赋值
|
||||
selectDateRange(v) {
|
||||
if (v) {
|
||||
if (v && v.length === 2) {
|
||||
this.searchForm.startDate = v[0];
|
||||
this.searchForm.endDate = v[1];
|
||||
} else {
|
||||
this.searchForm.startDate = "";
|
||||
this.searchForm.endDate = "";
|
||||
}
|
||||
},
|
||||
// 改变查看方式
|
||||
@@ -1341,11 +1406,8 @@ export default {
|
||||
this.handleSearch();
|
||||
},
|
||||
// 上传文件超过大小限制
|
||||
handleMaxSize(file) {
|
||||
this.$Notice.warning({
|
||||
title: "文件大小过大",
|
||||
desc: "所选文件大小过大, 不得超过 1M.",
|
||||
});
|
||||
handleMaxSize() {
|
||||
this.$Message.warning("所选文件大小过大，不得超过 20MB");
|
||||
},
|
||||
// 上传成功回调
|
||||
handleSuccess(res, file) {
|
||||
@@ -1397,7 +1459,7 @@ export default {
|
||||
deleteFile(ids).then((res) => {
|
||||
this.$Modal.remove();
|
||||
if (res.success) {
|
||||
this.$set(this, 'selectedOss', []);
|
||||
this.selectedOss = [];
|
||||
// this.clearSelectAll();
|
||||
this.init();
|
||||
this.$Message.success("批量删除文件成功");
|
||||
|
||||
@@ -1,76 +1,141 @@
|
||||
<template>
|
||||
<div class="search">
|
||||
<Card>
|
||||
<Row class="operation">
|
||||
<Button @click="addRole" type="primary">添加角色</Button>
|
||||
<Button @click="delAll">批量删除</Button>
|
||||
</Row>
|
||||
<Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom" @on-sort-change="changeSort" @on-selection-change="changeSelect"></Table>
|
||||
<Row type="flex" justify="end" class="mt_10">
|
||||
<Page :current="pageNumber" :total="total" :page-size="pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[20, 50, 100]" size="small" show-total
|
||||
show-elevator show-sizer></Page>
|
||||
</Row>
|
||||
</Card>
|
||||
<el-card>
|
||||
<div class="operation padding-row">
|
||||
<el-button type="primary" @click="addRole">添加角色</el-button>
|
||||
<el-button @click="delAll">批量删除</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 编辑 -->
|
||||
<Modal :title="modalTitle" v-model="roleModalVisible" :mask-closable="false" :width="500">
|
||||
<Form ref="roleForm" :model="roleForm" :label-width="80" :rules="roleFormValidate">
|
||||
<FormItem label="角色名称" prop="name">
|
||||
<Input v-model="roleForm.name" />
|
||||
</FormItem>
|
||||
<FormItem label="备注" prop="description">
|
||||
<Input v-model="roleForm.description" />
|
||||
</FormItem>
|
||||
</Form>
|
||||
<div slot="footer">
|
||||
<Button type="text" @click="roleModalVisible = false">取消</Button>
|
||||
<Button type="primary" :loading="submitLoading" @click="submitRole">提交
|
||||
</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
<!-- 菜单权限 -->
|
||||
<Modal :title="modalTitle" v-model="permModalVisible" :mask-closable="false" :width="500" :styles="{ top: '30px' }" class="permModal">
|
||||
<div style="position: relative">
|
||||
<Tree ref="tree" :data="permData" show-checkbox :render="renderContent">
|
||||
</Tree>
|
||||
<Spin size="large" fix v-if="treeLoading"></Spin>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<Button type="text" @click="permModalVisible = false">取消</Button>
|
||||
<Select v-model="openLevel" @on-change="changeOpen" style="width: 110px; text-align: left; margin-right: 10px">
|
||||
<Option value="0">展开所有</Option>
|
||||
<Option value="1">收合所有</Option>
|
||||
<Option value="2">仅展开一级</Option>
|
||||
<Option value="3">仅展开两级</Option>
|
||||
</Select>
|
||||
<Button type="primary" :loading="submitPermLoading" @click="submitPermEdit()">编辑
|
||||
</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
<el-table
|
||||
ref="table"
|
||||
v-loading="loading"
|
||||
border
|
||||
:data="data"
|
||||
style="width: 100%"
|
||||
row-key="id"
|
||||
@selection-change="changeSelect"
|
||||
@sort-change="changeSort"
|
||||
>
|
||||
<el-table-column type="selection" width="60" align="center" />
|
||||
<el-table-column prop="name" label="角色名称" min-width="150" />
|
||||
<el-table-column prop="description" label="备注" min-width="150" show-overflow-tooltip />
|
||||
<el-table-column prop="createTime" label="创建时间" width="170" sortable="custom" />
|
||||
<el-table-column prop="updateTime" label="更新时间" width="170" sortable="custom" />
|
||||
<el-table-column prop="createBy" label="最后操作人" width="150" />
|
||||
<el-table-column label="操作" width="230" align="center" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<div v-if="row" class="ops">
|
||||
<a class="link-text" @click="editPerm(row)">菜单权限</a>
|
||||
<span class="op-split">|</span>
|
||||
<a class="link-text" @click="edit(row)">编辑</a>
|
||||
<span class="op-split">|</span>
|
||||
<a class="link-text" @click="remove(row)">删除</a>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 保存权限弹出选择权限 -->
|
||||
<Modal width="800" v-model="selectIsSuperModel" title="选择菜单权限" :loading="superModelLoading" @on-ok="saveRole">
|
||||
<div class="mt_10" style="display: flex; justify-content: flex-end">
|
||||
<el-pagination
|
||||
v-model:current-page="pageNumber"
|
||||
v-model:page-size="pageSize"
|
||||
:page-sizes="[20, 50, 100]"
|
||||
:total="total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
size="small"
|
||||
@current-change="changePage"
|
||||
@size-change="changePageSize"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-dialog
|
||||
v-model="roleModalVisible"
|
||||
:title="modalTitle"
|
||||
width="500px"
|
||||
:close-on-click-modal="false"
|
||||
destroy-on-close
|
||||
>
|
||||
<el-form ref="roleForm" :model="roleForm" label-width="80px" :rules="roleFormValidate">
|
||||
<el-form-item label="角色名称" prop="name">
|
||||
<el-input v-model="roleForm.name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="description">
|
||||
<el-input v-model="roleForm.description" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="roleModalVisible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="submitLoading" @click="submitRole">提交</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog
|
||||
v-model="permModalVisible"
|
||||
:title="modalTitle"
|
||||
width="500px"
|
||||
:close-on-click-modal="false"
|
||||
class="permModal"
|
||||
top="30px"
|
||||
>
|
||||
<div v-loading="treeLoading" style="position: relative; max-height: 560px; overflow: auto">
|
||||
<el-tree
|
||||
ref="permTree"
|
||||
:key="permTreeKey"
|
||||
:data="permData"
|
||||
:props="{ label: 'title', children: 'children', disabled: 'disabled' }"
|
||||
node-key="id"
|
||||
show-checkbox
|
||||
:default-expand-all="openLevel === '0'"
|
||||
:default-expanded-keys="permExpandedKeys"
|
||||
:default-checked-keys="permCheckedKeys"
|
||||
>
|
||||
<template #default="{ data }">
|
||||
<span>{{ data.title }}</span>
|
||||
<el-tag
|
||||
v-if="data.isSuper == 1 || data.isSuper == 0"
|
||||
:type="data.isSuper == 1 ? 'danger' : 'info'"
|
||||
size="small"
|
||||
style="margin-left: 10px"
|
||||
>
|
||||
{{ data.isSuper == 1 ? "操作权限" : "查看权限" }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-tree>
|
||||
</div>
|
||||
<template #footer>
|
||||
<el-button @click="permModalVisible = false">取消</el-button>
|
||||
<el-select v-model="openLevel" style="width: 110px; margin-right: 10px" @change="changeOpen">
|
||||
<el-option value="0" label="展开所有" />
|
||||
<el-option value="1" label="收合所有" />
|
||||
<el-option value="2" label="仅展开一级" />
|
||||
<el-option value="3" label="仅展开两级" />
|
||||
</el-select>
|
||||
<el-button type="primary" :loading="submitPermLoading" @click="submitPermEdit()">编辑</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog v-model="selectIsSuperModel" title="选择菜单权限" width="800px">
|
||||
<div class="btns">
|
||||
<Button type="primary" @click="setRole()" class="btn-item">一键选中·数据权限</Button>
|
||||
<Button class="btn-item" @click="setRole('onlyView')">一键选中·查看权限</Button>
|
||||
<el-button type="primary" class="btn-item" @click="setRole()">一键选中·数据权限</el-button>
|
||||
<el-button class="btn-item" @click="setRole('onlyView')">一键选中·查看权限</el-button>
|
||||
</div>
|
||||
<div class="role-list">
|
||||
<div class="role-item" v-for="(item, index) in saveRoleWay" :key="index">
|
||||
<div class="title">{{ item.title }}</div>
|
||||
<div class="content">
|
||||
<RadioGroup type="button" button-style="solid" v-model="item.isSuper">
|
||||
<Radio :label="1">
|
||||
<span>操作数据权限</span>
|
||||
</Radio>
|
||||
<Radio :label="0">
|
||||
<span>查看权限</span>
|
||||
</Radio>
|
||||
</RadioGroup>
|
||||
<el-radio-group v-model="item.isSuper">
|
||||
<el-radio-button :value="1">操作数据权限</el-radio-button>
|
||||
<el-radio-button :value="0">查看权限</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
<template #footer>
|
||||
<el-button @click="selectIsSuperModel = false">取消</el-button>
|
||||
<el-button type="primary" :loading="superModelLoading" @click="saveRole">确定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -86,258 +151,74 @@ import {
|
||||
saveRoleMenu,
|
||||
} from "@/api/index";
|
||||
import util from "@/libs/util.js";
|
||||
|
||||
export default {
|
||||
name: "role-manage",
|
||||
data() {
|
||||
return {
|
||||
superModelLoading: false, //保存权限弹出选择权限保存
|
||||
selectIsSuperModel: false, //保存权限弹出选择权限
|
||||
rolePermsWay: [], //查询角色权限集合
|
||||
openLevel: "0", // 展开的级别
|
||||
loading: true, // 加载状态
|
||||
treeLoading: true, // 树加载
|
||||
depTreeLoading: true, // 部门树加载
|
||||
submitPermLoading: false, // 权限提交加载
|
||||
submitDepLoading: false, // 部门提交加载
|
||||
sortColumn: "", // 排序
|
||||
sortType: "desc", // 排序类型
|
||||
modalType: 0, // 0 添加 1 编辑
|
||||
roleModalVisible: false, // 角色modal
|
||||
permModalVisible: false, // 菜单权限modal
|
||||
depModalVisible: false, // 部门modal
|
||||
modalTitle: "", // modal标题
|
||||
superModelLoading: false,
|
||||
selectIsSuperModel: false,
|
||||
rolePermsWay: [],
|
||||
openLevel: "0",
|
||||
loading: true,
|
||||
treeLoading: true,
|
||||
depTreeLoading: true,
|
||||
submitPermLoading: false,
|
||||
submitDepLoading: false,
|
||||
sortColumn: "",
|
||||
sortType: "desc",
|
||||
modalType: 0,
|
||||
roleModalVisible: false,
|
||||
permModalVisible: false,
|
||||
depModalVisible: false,
|
||||
modalTitle: "",
|
||||
roleForm: {
|
||||
// 角色表单
|
||||
name: "",
|
||||
description: "",
|
||||
},
|
||||
roleFormValidate: {
|
||||
// 验证规则
|
||||
name: [
|
||||
{ required: true, message: "角色名称不能为空", trigger: "blur" },
|
||||
],
|
||||
name: [{ required: true, message: "角色名称不能为空", trigger: "blur" }],
|
||||
},
|
||||
submitLoading: false, // 提交loading
|
||||
selectList: [], // 已选列表
|
||||
selectCount: 0, // 已选总数
|
||||
columns: [
|
||||
// 表头
|
||||
{
|
||||
type: "selection",
|
||||
width: 60,
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "角色名称",
|
||||
key: "name",
|
||||
minWidth: 150,
|
||||
},
|
||||
{
|
||||
title: "备注",
|
||||
key: "description",
|
||||
minWidth: 150,
|
||||
tooltip: true,
|
||||
},
|
||||
{
|
||||
title: "创建时间",
|
||||
key: "createTime",
|
||||
width: 170,
|
||||
sortable: true,
|
||||
sortType: "desc",
|
||||
},
|
||||
{
|
||||
title: "更新时间",
|
||||
key: "updateTime",
|
||||
width: 170,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
title: "最后操作人",
|
||||
key: "createBy",
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
key: "action",
|
||||
align: "center",
|
||||
fixed: "right",
|
||||
width: 230,
|
||||
render: (h, params) => {
|
||||
return h("div", [
|
||||
h(
|
||||
"a",
|
||||
{
|
||||
style: {
|
||||
color: "#2d8cf0",
|
||||
cursor: "pointer",
|
||||
textDecoration: "none",
|
||||
marginRight: "5px",
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.editPerm(params.row);
|
||||
},
|
||||
},
|
||||
},
|
||||
"菜单权限"
|
||||
),
|
||||
h(
|
||||
"span",
|
||||
{ style: { margin: "0 8px", color: "#dcdee2" } },
|
||||
"|"
|
||||
),
|
||||
h(
|
||||
"a",
|
||||
{
|
||||
style: {
|
||||
color: "#2d8cf0",
|
||||
cursor: "pointer",
|
||||
textDecoration: "none",
|
||||
marginRight: "5px",
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.edit(params.row);
|
||||
},
|
||||
},
|
||||
},
|
||||
"编辑"
|
||||
),
|
||||
h(
|
||||
"span",
|
||||
{ style: { margin: "0 8px", color: "#dcdee2" } },
|
||||
"|"
|
||||
),
|
||||
h(
|
||||
"a",
|
||||
{
|
||||
style: {
|
||||
color: "#2d8cf0",
|
||||
cursor: "pointer",
|
||||
textDecoration: "none",
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.remove(params.row);
|
||||
},
|
||||
},
|
||||
},
|
||||
"删除"
|
||||
),
|
||||
]);
|
||||
},
|
||||
},
|
||||
],
|
||||
data: [], // 角色数据
|
||||
pageNumber: 1, // 页数
|
||||
pageSize: 20, // 每页数量
|
||||
total: 0, // 总数
|
||||
permData: [], // 菜单权限数据
|
||||
editRolePermId: "", // 编辑权限id
|
||||
selectAllFlag: false, // 全选标识
|
||||
depData: [], // 部门数据
|
||||
dataType: 0, // 数据类型
|
||||
editDepartments: [], // 编辑部门
|
||||
|
||||
saveRoleWay: [], //用户保存用户点击的菜单
|
||||
submitLoading: false,
|
||||
selectList: [],
|
||||
selectCount: 0,
|
||||
data: [],
|
||||
pageNumber: 1,
|
||||
pageSize: 20,
|
||||
total: 0,
|
||||
permData: [],
|
||||
editRolePermId: "",
|
||||
selectAllFlag: false,
|
||||
depData: [],
|
||||
dataType: 0,
|
||||
editDepartments: [],
|
||||
saveRoleWay: [],
|
||||
permTreeKey: 0,
|
||||
permCheckedKeys: [],
|
||||
permExpandedKeys: [],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 初始化数据
|
||||
init() {
|
||||
this.getRoleList();
|
||||
// 获取所有菜单权限树
|
||||
this.getPermList();
|
||||
},
|
||||
// 渲染部门前icon
|
||||
renderContent(h, { root, node, data }) {
|
||||
let icon = "";
|
||||
if (data.level == 0) {
|
||||
icon = "ios-navigate";
|
||||
} else if (data.level == 1) {
|
||||
icon = "md-list-box";
|
||||
} else if (data.level == 2) {
|
||||
icon = "md-list";
|
||||
} else if (data.level == 3) {
|
||||
icon = "md-radio-button-on";
|
||||
} else {
|
||||
icon = "md-radio-button-off";
|
||||
}
|
||||
return h(
|
||||
"span",
|
||||
{
|
||||
style: {
|
||||
display: "inline-block",
|
||||
cursor: "pointer",
|
||||
},
|
||||
},
|
||||
[
|
||||
h("span", [
|
||||
h("Icon", {
|
||||
props: {
|
||||
type: icon,
|
||||
size: "16",
|
||||
},
|
||||
style: {
|
||||
"margin-right": "8px",
|
||||
"margin-bottom": "3px",
|
||||
},
|
||||
}),
|
||||
h("span", data.title),
|
||||
h(
|
||||
"Tag",
|
||||
{
|
||||
props: {
|
||||
color:
|
||||
data.isSuper == 1
|
||||
? "red"
|
||||
: data.isSuper == 0
|
||||
? "default"
|
||||
: "default",
|
||||
},
|
||||
style: {
|
||||
"margin-left": "10px",
|
||||
display:
|
||||
data.isSuper == 1 || data.isSuper == 0
|
||||
? "inline-block"
|
||||
: "none",
|
||||
},
|
||||
},
|
||||
data.isSuper == 1
|
||||
? "操作权限"
|
||||
: data.isSuper == 0
|
||||
? "查看权限"
|
||||
: ""
|
||||
),
|
||||
]),
|
||||
]
|
||||
);
|
||||
},
|
||||
// 分页 修改页码
|
||||
changePage(v) {
|
||||
this.pageNumber = v;
|
||||
changePage() {
|
||||
this.getRoleList();
|
||||
this.clearSelectAll();
|
||||
},
|
||||
// 分页 修改页数
|
||||
changePageSize(v) {
|
||||
changePageSize() {
|
||||
this.pageNumber = 1;
|
||||
this.pageSize = v;
|
||||
this.getRoleList();
|
||||
},
|
||||
// 变更排序方式
|
||||
changeSort(e) {
|
||||
this.sortColumn = e.key;
|
||||
this.sortType = e.order;
|
||||
if (e.order == "normal") {
|
||||
this.sortColumn = e.prop;
|
||||
this.sortType = e.order === "ascending" ? "asc" : e.order === "descending" ? "desc" : "";
|
||||
if (!e.order) {
|
||||
this.sortType = "";
|
||||
}
|
||||
this.getRoleList();
|
||||
},
|
||||
|
||||
/**
|
||||
* 设置权限
|
||||
*/
|
||||
setRole(val) {
|
||||
let enable;
|
||||
val == "onlyView" ? (enable = 0) : (enable = 1);
|
||||
@@ -345,17 +226,13 @@ export default {
|
||||
item.isSuper = enable;
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 查询所有角色
|
||||
*/
|
||||
getRoleList() {
|
||||
this.loading = true;
|
||||
let params = {
|
||||
pageNumber: this.pageNumber,
|
||||
pageSize: this.pageSize,
|
||||
sort: this.sortColumn,
|
||||
order: this.sort,
|
||||
order: this.sortType,
|
||||
};
|
||||
getRoleList(params).then((res) => {
|
||||
this.loading = false;
|
||||
@@ -365,22 +242,16 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 查询菜单
|
||||
*/
|
||||
getPermList() {
|
||||
this.treeLoading = true;
|
||||
getAllPermissionList().then((res) => {
|
||||
if (res.success) {
|
||||
this.deleteDisableNode(res.result);
|
||||
this.permData = res.result;
|
||||
this.treeLoading = false;
|
||||
}
|
||||
this.treeLoading = false;
|
||||
});
|
||||
},
|
||||
// 递归标记禁用节点
|
||||
deleteDisableNode(permData) {
|
||||
let that = this;
|
||||
permData.forEach(function (e) {
|
||||
@@ -393,14 +264,11 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
// 提交
|
||||
submitRole() {
|
||||
this.$refs.roleForm.validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.modalType == 0) {
|
||||
// 添加
|
||||
this.submitLoading = true;
|
||||
|
||||
addRole(this.roleForm).then((res) => {
|
||||
this.submitLoading = false;
|
||||
if (res.success) {
|
||||
@@ -412,7 +280,6 @@ export default {
|
||||
} else {
|
||||
this.submitLoading = true;
|
||||
this.roleForm.roleId = this.roleForm.id;
|
||||
|
||||
editRole(this.roleForm).then((res) => {
|
||||
this.submitLoading = false;
|
||||
if (res.success) {
|
||||
@@ -425,23 +292,17 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 点击添加按钮
|
||||
*/
|
||||
addRole() {
|
||||
this.modalType = 0;
|
||||
this.modalTitle = "添加角色";
|
||||
this.$refs.roleForm.resetFields();
|
||||
this.$refs.roleForm?.resetFields();
|
||||
delete this.roleForm.id;
|
||||
this.roleModalVisible = true;
|
||||
},
|
||||
// 编辑
|
||||
edit(v) {
|
||||
this.modalType = 1;
|
||||
this.modalTitle = "编辑角色";
|
||||
this.$refs.roleForm.resetFields();
|
||||
// 转换null为""
|
||||
this.$refs.roleForm?.resetFields();
|
||||
for (let attr in v) {
|
||||
if (v[attr] == null) {
|
||||
v[attr] = "";
|
||||
@@ -452,7 +313,6 @@ export default {
|
||||
this.roleForm = roleInfo;
|
||||
this.roleModalVisible = true;
|
||||
},
|
||||
// 删除
|
||||
remove(v) {
|
||||
this.$Modal.confirm({
|
||||
title: "确认删除",
|
||||
@@ -469,16 +329,13 @@ export default {
|
||||
},
|
||||
});
|
||||
},
|
||||
// 清除选中
|
||||
clearSelectAll() {
|
||||
this.$refs.table.selectAll(false);
|
||||
this.$refs.table?.clearSelection();
|
||||
},
|
||||
// 选中回调
|
||||
changeSelect(e) {
|
||||
this.selectList = e;
|
||||
this.selectCount = e.length;
|
||||
},
|
||||
// 批量删除
|
||||
delAll() {
|
||||
if (this.selectCount <= 0) {
|
||||
this.$Message.warning("您还未选择要删除的数据");
|
||||
@@ -505,13 +362,7 @@ export default {
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
// 菜单权限
|
||||
async editPerm(v) {
|
||||
|
||||
/**
|
||||
* 点击菜单权限每次将赋值的isSuper数据给清空掉
|
||||
*/
|
||||
this.permData.map((item) => {
|
||||
item.children.length != 0
|
||||
? item.children.map((child) => {
|
||||
@@ -532,98 +383,79 @@ export default {
|
||||
}
|
||||
this.editRolePermId = v.id;
|
||||
this.modalTitle = "分配 " + v.name + " 的菜单权限";
|
||||
// 匹配勾选
|
||||
let rolePerms;
|
||||
// 当前角色的菜单权限
|
||||
let res = await selectRoleMenu(v.id);
|
||||
if (res.result) {
|
||||
rolePerms = res.result;
|
||||
this.rolePermsWay = res.result;
|
||||
}
|
||||
// 递归判断子节点是否可以选中
|
||||
this.checkPermTree(this.permData, rolePerms);
|
||||
this.permCheckedKeys = this.collectCheckedKeys(this.permData, rolePerms);
|
||||
this.permExpandedKeys = this.computeExpandedKeys(this.openLevel);
|
||||
this.permTreeKey += 1;
|
||||
this.permModalVisible = true;
|
||||
},
|
||||
// 递归判断子节点
|
||||
checkPermTree(permData, rolePerms) {
|
||||
let that = this;
|
||||
|
||||
permData.forEach((p) => {
|
||||
if (that.hasPerm(p, rolePerms) && p.status != -1) {
|
||||
if (p.children && p.children.length === 0) {
|
||||
this.$set(p, "checked", true);
|
||||
collectCheckedKeys(permData, rolePerms) {
|
||||
const keys = [];
|
||||
const walk = (nodes) => {
|
||||
nodes.forEach((p) => {
|
||||
if (this.hasPerm(p, rolePerms) && p.status != -1) {
|
||||
if (p.children && p.children.length === 0) {
|
||||
keys.push(p.id);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.$set(p, "checked", false);
|
||||
}
|
||||
if (p.children && p.children.length > 0) {
|
||||
that.checkPermTree(p.children, rolePerms);
|
||||
}
|
||||
});
|
||||
if (p.children && p.children.length > 0) {
|
||||
walk(p.children);
|
||||
}
|
||||
});
|
||||
};
|
||||
walk(permData);
|
||||
return keys;
|
||||
},
|
||||
// 判断角色拥有的权限节点勾选
|
||||
hasPerm(p, rolePerms) {
|
||||
if (!rolePerms) return false;
|
||||
let flag = false;
|
||||
for (let i = 0; i < rolePerms.length; i++) {
|
||||
if (p.id == rolePerms[i].menuId) {
|
||||
this.$set(p, "isSuper", rolePerms[i].isSuper);
|
||||
p.isSuper = rolePerms[i].isSuper;
|
||||
flag = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (flag) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
return flag;
|
||||
},
|
||||
// 递归全选节点
|
||||
selectedTreeAll(permData, select) {
|
||||
let that = this;
|
||||
permData.forEach(function (e) {
|
||||
e.checked = select;
|
||||
if (e.children && e.children.length > 0) {
|
||||
that.selectedTreeAll(e.children, select);
|
||||
}
|
||||
});
|
||||
},
|
||||
/**分配菜单权限 */
|
||||
submitPermEdit() {
|
||||
this.saveRoleWay = [];
|
||||
this.selectIsSuperModel = true; //打开选择权限
|
||||
let selectedNodes = this.$refs.tree.getCheckedAndIndeterminateNodes();
|
||||
this.selectIsSuperModel = true;
|
||||
const tree = this.$refs.permTree;
|
||||
const selectedNodes = [
|
||||
...tree.getCheckedNodes(false, true),
|
||||
];
|
||||
let way = [];
|
||||
selectedNodes.forEach((e) => {
|
||||
console.log(e)
|
||||
let perm = {
|
||||
title: e.title,
|
||||
isSuper: e.isSuper ? e.isSuper = 1 : e.isSuper = 0 || 0,
|
||||
isSuper: e.isSuper ? (e.isSuper = 1) : (e.isSuper = 0) || 0,
|
||||
menuId: e.id,
|
||||
roleId: this.editRolePermId,
|
||||
};
|
||||
way.push(perm);
|
||||
this.$set(this,'saveRoleWay',way)
|
||||
|
||||
this.saveRoleWay = way;
|
||||
});
|
||||
console.log(this.saveRoleWay)
|
||||
},
|
||||
|
||||
/**保存权限 */
|
||||
saveRole() {
|
||||
this.superModelLoading = true;
|
||||
saveRoleMenu(this.editRolePermId, this.saveRoleWay).then((res) => {
|
||||
this.superModelLoading = false;
|
||||
if (res.success) {
|
||||
this.$Message.success("操作成功");
|
||||
// 标记重新获取菜单数据
|
||||
this.$store.commit("setAdded", false);
|
||||
util.initRouter(this);
|
||||
this.getRoleList();
|
||||
this.permModalVisible = false;
|
||||
this.selectIsSuperModel = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 加载数据
|
||||
loadData(item, callback) {
|
||||
loadDepartment(item.id, { openDataFilter: false }).then((res) => {
|
||||
if (res.success) {
|
||||
@@ -642,80 +474,30 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
// 判断展开子节点
|
||||
expandCheckDep(v) {
|
||||
this.checkDepTree(v.children, this.editDepartments);
|
||||
},
|
||||
// 判断子节点
|
||||
checkDepTree(depData, roleDepIds) {
|
||||
let that = this;
|
||||
depData.forEach(function (p) {
|
||||
if (that.hasDepPerm(p, roleDepIds)) {
|
||||
p.checked = true;
|
||||
} else {
|
||||
p.checked = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 树结构展开层级
|
||||
changeOpen(v) {
|
||||
if (v == "0") {
|
||||
this.permData.forEach((e) => {
|
||||
e.expand = true;
|
||||
if (e.children && e.children.length > 0) {
|
||||
e.children.forEach((c) => {
|
||||
c.expand = true;
|
||||
if (c.children && c.children.length > 0) {
|
||||
c.children.forEach(function (b) {
|
||||
b.expand = true;
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
} else if (v == "1") {
|
||||
this.permData.forEach((e) => {
|
||||
e.expand = false;
|
||||
if (e.children && e.children.length > 0) {
|
||||
e.children.forEach((c) => {
|
||||
c.expand = false;
|
||||
if (c.children && c.children.length > 0) {
|
||||
c.children.forEach(function (b) {
|
||||
b.expand = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
} else if (v == "2") {
|
||||
this.permData.forEach((e) => {
|
||||
e.expand = true;
|
||||
if (e.children && e.children.length > 0) {
|
||||
e.children.forEach((c) => {
|
||||
c.expand = false;
|
||||
if (c.children && c.children.length > 0) {
|
||||
c.children.forEach(function (b) {
|
||||
b.expand = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
} else if (v == "3") {
|
||||
this.permData.forEach((e) => {
|
||||
e.expand = true;
|
||||
if (e.children && e.children.length > 0) {
|
||||
e.children.forEach((c) => {
|
||||
c.expand = true;
|
||||
if (c.children && c.children.length > 0) {
|
||||
c.children.forEach(function (b) {
|
||||
b.expand = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
computeExpandedKeys(level) {
|
||||
const keys = [];
|
||||
const walk = (nodes, depth) => {
|
||||
nodes.forEach((n) => {
|
||||
if (level === "0") {
|
||||
keys.push(n.id);
|
||||
} else if (level === "2" && depth < 1) {
|
||||
keys.push(n.id);
|
||||
} else if (level === "3" && depth < 2) {
|
||||
keys.push(n.id);
|
||||
}
|
||||
if (n.children && n.children.length) {
|
||||
walk(n.children, depth + 1);
|
||||
}
|
||||
});
|
||||
};
|
||||
if (level !== "1") {
|
||||
walk(this.permData, 0);
|
||||
}
|
||||
return keys;
|
||||
},
|
||||
changeOpen(v) {
|
||||
this.permExpandedKeys = this.computeExpandedKeys(v);
|
||||
this.permTreeKey += 1;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
@@ -751,18 +533,15 @@ export default {
|
||||
.btn-item {
|
||||
margin-right: 20px;
|
||||
}
|
||||
.permModal {
|
||||
.ivu-modal-body {
|
||||
max-height: 560px;
|
||||
overflow: auto;
|
||||
}
|
||||
.ops a {
|
||||
color: #2d8cf0;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.depModal {
|
||||
.ivu-modal-body {
|
||||
max-height: 500px;
|
||||
overflow: auto;
|
||||
}
|
||||
.ops span {
|
||||
display: inline-block;
|
||||
margin: 0 8px;
|
||||
color: #dcdee2;
|
||||
}
|
||||
.tips {
|
||||
font-size: 12px;
|
||||
|
||||
@@ -1,37 +1,35 @@
|
||||
<template>
|
||||
|
||||
<div class="layout">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<Card :padding="0">
|
||||
<Divider orientation="left">登录设置</Divider>
|
||||
<div class="form-list">
|
||||
<Form
|
||||
ref="formValidate"
|
||||
label-width="120"
|
||||
label-position="right"
|
||||
:model="formValidate"
|
||||
:rules="ruleValidate"
|
||||
>
|
||||
<FormItem label="买家PC端域名" prop="pc">
|
||||
<Input v-model="formValidate.pc" class="w200" />
|
||||
</FormItem>
|
||||
<FormItem label="买家WAP端域名" prop="wap">
|
||||
<Input v-model="formValidate.wap" class="w200" />
|
||||
</FormItem>
|
||||
<FormItem label="登录回调域名" prop="callbackUrl">
|
||||
<Input maxlength="300" v-model="formValidate.callbackUrl" class="w200" />
|
||||
</FormItem>
|
||||
<FormItem label="操作" >
|
||||
<Button @click="setupSetting">保存设置</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
</Card>
|
||||
<el-card shadow="never" :body-style="{ padding: '0 16px' }">
|
||||
<el-divider content-position="left">登录设置</el-divider>
|
||||
<div class="form-list">
|
||||
<el-form
|
||||
ref="formValidate"
|
||||
label-width="120px"
|
||||
label-position="right"
|
||||
:model="formValidate"
|
||||
:rules="ruleValidate"
|
||||
>
|
||||
<el-form-item label="买家PC端域名" prop="pc">
|
||||
<el-input v-model="formValidate.pc" class="w200" />
|
||||
</el-form-item>
|
||||
<el-form-item label="买家WAP端域名" prop="wap">
|
||||
<el-input v-model="formValidate.wap" class="w200" />
|
||||
</el-form-item>
|
||||
<el-form-item label="登录回调域名" prop="callbackUrl">
|
||||
<el-input maxlength="300" v-model="formValidate.callbackUrl" class="w200" />
|
||||
</el-form-item>
|
||||
<el-form-item label="操作">
|
||||
<el-button @click="setupSetting">保存设置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import { setSetting } from "@/api/index";
|
||||
@@ -40,12 +38,12 @@ import { handleSubmit } from "../setting/validate";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
ruleValidate: {}, // 验证规则
|
||||
ruleValidate: {},
|
||||
formValidate: {
|
||||
pc:"",
|
||||
wap:"",
|
||||
callbackUrl:""
|
||||
} // 表单数据
|
||||
pc: "",
|
||||
wap: "",
|
||||
callbackUrl: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
props: ["res", "type"],
|
||||
@@ -54,12 +52,11 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
submit(name) {
|
||||
let that = this;
|
||||
const that = this;
|
||||
if (handleSubmit(that, name)) {
|
||||
this.setupSetting();
|
||||
}
|
||||
},
|
||||
// 保存设置
|
||||
setupSetting() {
|
||||
setSetting(this.type, this.formValidate).then((res) => {
|
||||
if (res.success) {
|
||||
@@ -69,11 +66,9 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
// 实例化数据
|
||||
init() {
|
||||
this.res = JSON.parse(this.res);
|
||||
|
||||
this.$set(this, "formValidate", { ...this.res });
|
||||
this.formValidate = { ...this.res };
|
||||
Object.keys(this.formValidate).forEach((item) => {
|
||||
if (item.indexOf("pId") < 0) {
|
||||
this.ruleValidate[item] = [
|
||||
@@ -97,10 +92,8 @@ export default {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
.form-list{
|
||||
padding: 16px;
|
||||
|
||||
.form-list {
|
||||
padding: 16px;
|
||||
}
|
||||
.pay-title {
|
||||
text-align: center;
|
||||
@@ -123,14 +116,8 @@ export default {
|
||||
margin-right: 10px;
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
::v-deep .ivu-card-body {
|
||||
padding: 0 16px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.label-item {
|
||||
display: flex;
|
||||
}
|
||||
.label-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -144,12 +131,8 @@ export default {
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
.ivu-form-item {
|
||||
.el-form-item {
|
||||
display: flex;
|
||||
|
||||
align-items: center;
|
||||
}
|
||||
.ivu-row {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,52 +1,45 @@
|
||||
<template>
|
||||
|
||||
<div class="layout">
|
||||
|
||||
<div class="row" v-if="client == item.client" v-for="(item,index) in formValidate" :key="index">
|
||||
<div class="row" v-for="(item, index) in formValidate" :key="index">
|
||||
<div class="col">
|
||||
<Card :padding="0">
|
||||
<!-- app -->
|
||||
<div class="icon-item" v-if="item.clientType== 'APP'">
|
||||
<img class="icon" src="../../../../assets/setting/app.svg" alt="" srcset="">
|
||||
<el-card shadow="never" :body-style="{ padding: '0 16px' }">
|
||||
<div class="icon-item" v-if="item.clientType == 'APP'">
|
||||
<img class="icon" src="../../../../assets/setting/app.svg" alt="" />
|
||||
</div>
|
||||
<div class="icon-item" v-if="item.clientType== 'PC'">
|
||||
<!-- pc -->
|
||||
<img class="icon" src="../../../../assets/setting/pc.svg" alt="" srcset="">
|
||||
<div class="icon-item" v-if="item.clientType == 'PC'">
|
||||
<img class="icon" src="../../../../assets/setting/pc.svg" alt="" />
|
||||
</div>
|
||||
<div class="icon-item" v-if="item.clientType== 'WECHAT_MP'">
|
||||
<!-- 小程序 -->
|
||||
<img class="icon" src="../../../../assets/setting/wechat_mp.svg" alt="" srcset="">
|
||||
<div class="icon-item" v-if="item.clientType == 'WECHAT_MP'">
|
||||
<img class="icon" src="../../../../assets/setting/wechat_mp.svg" alt="" />
|
||||
</div>
|
||||
<div class="icon-item" v-if=" item.clientType== 'H5'">
|
||||
<!-- h5 -->
|
||||
<img class="icon" src="../../../../assets/setting/h5.svg" alt="" srcset="">
|
||||
<div class="icon-item" v-if="item.clientType == 'H5'">
|
||||
<img class="icon" src="../../../../assets/setting/h5.svg" alt="" />
|
||||
</div>
|
||||
<div class='pay-title'> {{way[item.clientType]}}</div>
|
||||
<div class="pay-title">{{ way[item.clientType] }}</div>
|
||||
<div>
|
||||
|
||||
<Divider orientation="left">登录设置</Divider>
|
||||
<el-divider content-position="left">登录设置</el-divider>
|
||||
<div class="pay-list">
|
||||
<Form style="width:100%;" ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
|
||||
<FormItem label="appId" prop="appId">
|
||||
<Input @on-enter="setupSetting" class="label-appkey" v-model="item.appId" />
|
||||
</FormItem>
|
||||
<FormItem label="appKey" prop="appKey">
|
||||
<Input @on-enter="setupSetting" v-model="item.appKey" />
|
||||
</FormItem>
|
||||
|
||||
</Form>
|
||||
<Button @click="setupSetting">保存设置</Button>
|
||||
<el-form
|
||||
style="width: 100%"
|
||||
ref="formValidate"
|
||||
:model="formValidate"
|
||||
:rules="ruleValidate"
|
||||
label-width="80px"
|
||||
>
|
||||
<el-form-item label="appId" prop="appId">
|
||||
<el-input @keyup.enter="setupSetting" class="label-appkey" v-model="item.appId" />
|
||||
</el-form-item>
|
||||
<el-form-item label="appKey" prop="appKey">
|
||||
<el-input @keyup.enter="setupSetting" v-model="item.appKey" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-button @click="setupSetting">保存设置</el-button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</Card>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import { setSetting } from "@/api/index";
|
||||
@@ -54,14 +47,14 @@ import { handleSubmit } from "../setting/validate";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
ruleValidate: {}, // 验证规则
|
||||
way: { // 类型
|
||||
ruleValidate: {},
|
||||
way: {
|
||||
APP: "移动应用端",
|
||||
H5: "移动端",
|
||||
WECHAT_MP: "小程序端",
|
||||
PC: "PC端",
|
||||
},
|
||||
formValidate: {} // 表单数据
|
||||
formValidate: {},
|
||||
};
|
||||
},
|
||||
props: ["res", "type"],
|
||||
@@ -70,30 +63,24 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
submit(name) {
|
||||
let that = this;
|
||||
const that = this;
|
||||
if (handleSubmit(that, name)) {
|
||||
this.setupSetting();
|
||||
}
|
||||
},
|
||||
// 保存
|
||||
setupSetting() {
|
||||
this.$Spin.show();
|
||||
setTimeout(() => {
|
||||
this.$Spin.hide();
|
||||
setSetting(this.type, {
|
||||
qqConnectSettingItemList: this.formValidate,
|
||||
}).then((res) => {
|
||||
if (res.success) {
|
||||
this.$Message.success("保存成功!");
|
||||
this.$Modal.remove();
|
||||
} else {
|
||||
this.$Message.error("保存失败!");
|
||||
this.$Modal.remove();
|
||||
}
|
||||
});
|
||||
}, 3000);
|
||||
setSetting(this.type, {
|
||||
qqConnectSettingItemList: this.formValidate,
|
||||
}).then((res) => {
|
||||
if (res.success) {
|
||||
this.$Message.success("保存成功!");
|
||||
this.$Modal.remove();
|
||||
} else {
|
||||
this.$Message.error("保存失败!");
|
||||
this.$Modal.remove();
|
||||
}
|
||||
});
|
||||
},
|
||||
// 实例化数据
|
||||
async init() {
|
||||
this.formValidate = JSON.parse(this.res).qqConnectSettingItemList;
|
||||
Object.keys(this.formValidate).forEach((item) => {
|
||||
@@ -133,14 +120,8 @@ export default {
|
||||
margin-right: 20px;
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
::v-deep .ivu-card-body {
|
||||
padding: 0 16px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.label-item {
|
||||
display: flex;
|
||||
}
|
||||
.label-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -151,7 +132,7 @@ export default {
|
||||
padding-bottom: 10px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
::v-deep .ivu-btn {
|
||||
:deep(.el-button){
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
@@ -163,14 +144,10 @@ export default {
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
.ivu-form-item {
|
||||
.el-form-item {
|
||||
display: flex;
|
||||
|
||||
align-items: center;
|
||||
}
|
||||
.ivu-row {
|
||||
width: 100%;
|
||||
}
|
||||
.icon {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
|
||||
@@ -1,50 +1,45 @@
|
||||
<template>
|
||||
|
||||
<div class="layout">
|
||||
|
||||
<div class="row" v-if="client ==item.client" v-for="(item,index) in formValidate" :key="index">
|
||||
<div class="row" v-for="(item, index) in formValidate" :key="index">
|
||||
<div class="col">
|
||||
<Card :padding="0">
|
||||
<!-- app -->
|
||||
<div class="icon-item" v-if="item.clientType== 'APP'">
|
||||
<img class="icon" src="../../../../assets/setting/app.svg" alt="" srcset="">
|
||||
<el-card shadow="never" :body-style="{ padding: '0 16px' }">
|
||||
<div class="icon-item" v-if="item.clientType == 'APP'">
|
||||
<img class="icon" src="../../../../assets/setting/app.svg" alt="" />
|
||||
</div>
|
||||
<div class="icon-item" v-if="item.clientType== 'PC'">
|
||||
<!-- pc -->
|
||||
<img class="icon" src="../../../../assets/setting/pc.svg" alt="" srcset="">
|
||||
<div class="icon-item" v-if="item.clientType == 'PC'">
|
||||
<img class="icon" src="../../../../assets/setting/pc.svg" alt="" />
|
||||
</div>
|
||||
<div class="icon-item" v-if="item.clientType== 'WECHAT_MP'">
|
||||
<!-- 小程序 -->
|
||||
<img class="icon" src="../../../../assets/setting/wechat_mp.svg" alt="" srcset="">
|
||||
<div class="icon-item" v-if="item.clientType == 'WECHAT_MP'">
|
||||
<img class="icon" src="../../../../assets/setting/wechat_mp.svg" alt="" />
|
||||
</div>
|
||||
<div class="icon-item" v-if=" item.clientType== 'H5'">
|
||||
<!-- h5 -->
|
||||
<img class="icon" src="../../../../assets/setting/h5.svg" alt="" srcset="">
|
||||
<div class="icon-item" v-if="item.clientType == 'H5'">
|
||||
<img class="icon" src="../../../../assets/setting/h5.svg" alt="" />
|
||||
</div>
|
||||
<div class='pay-title'> {{way[item.clientType]}}</div>
|
||||
<div class="pay-title">{{ way[item.clientType] }}</div>
|
||||
<div>
|
||||
|
||||
<Divider orientation="left">登录设置</Divider>
|
||||
<el-divider content-position="left">登录设置</el-divider>
|
||||
<div class="pay-list">
|
||||
<Form style="width:100%;" ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="100">
|
||||
<FormItem label="appId" prop="appId">
|
||||
<Input @on-enter="setupSetting" class="label-appkey" v-model="item.appId" />
|
||||
</FormItem>
|
||||
<FormItem label="appSecret" prop="appSecret">
|
||||
<Input @on-enter="setupSetting" v-model="item.appSecret" />
|
||||
</FormItem>
|
||||
</Form>
|
||||
<Button @click="setupSetting">保存设置</Button>
|
||||
<el-form
|
||||
style="width: 100%"
|
||||
ref="formValidate"
|
||||
:model="formValidate"
|
||||
:rules="ruleValidate"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-form-item label="appId" prop="appId">
|
||||
<el-input @keyup.enter="setupSetting" class="label-appkey" v-model="item.appId" />
|
||||
</el-form-item>
|
||||
<el-form-item label="appSecret" prop="appSecret">
|
||||
<el-input @keyup.enter="setupSetting" v-model="item.appSecret" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-button @click="setupSetting">保存设置</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</Card>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import { setSetting } from "@/api/index";
|
||||
@@ -53,14 +48,14 @@ import { handleSubmit } from "../setting/validate";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
ruleValidate: {}, // 验证规则
|
||||
way: { // 类型
|
||||
ruleValidate: {},
|
||||
way: {
|
||||
APP: "APP",
|
||||
H5: "手机网页（微商城）",
|
||||
WECHAT_MP: "微信小程序",
|
||||
PC: "WEB网页",
|
||||
},
|
||||
formValidate: {} // 表单数据
|
||||
formValidate: {},
|
||||
};
|
||||
},
|
||||
props: ["res", "type"],
|
||||
@@ -69,30 +64,24 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
submit(name) {
|
||||
let that = this;
|
||||
const that = this;
|
||||
if (handleSubmit(that, name)) {
|
||||
this.setupSetting();
|
||||
}
|
||||
},
|
||||
// 保存设置
|
||||
setupSetting() {
|
||||
this.$Spin.show();
|
||||
setTimeout(() => {
|
||||
this.$Spin.hide();
|
||||
setSetting(this.type, {
|
||||
wechatConnectSettingItems: this.formValidate,
|
||||
}).then((res) => {
|
||||
if (res.success) {
|
||||
this.$Message.success("保存成功!");
|
||||
this.$Modal.remove();
|
||||
} else {
|
||||
this.$Message.error("保存失败!");
|
||||
this.$Modal.remove();
|
||||
}
|
||||
});
|
||||
}, 3000);
|
||||
setSetting(this.type, {
|
||||
wechatConnectSettingItems: this.formValidate,
|
||||
}).then((res) => {
|
||||
if (res.success) {
|
||||
this.$Message.success("保存成功!");
|
||||
this.$Modal.remove();
|
||||
} else {
|
||||
this.$Message.error("保存失败!");
|
||||
this.$Modal.remove();
|
||||
}
|
||||
});
|
||||
},
|
||||
// 实例化数据
|
||||
async init() {
|
||||
this.formValidate = JSON.parse(this.res).wechatConnectSettingItems;
|
||||
Object.keys(this.formValidate).forEach((item) => {
|
||||
@@ -132,14 +121,8 @@ export default {
|
||||
margin-right: 20px;
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
::v-deep .ivu-card-body {
|
||||
padding: 0 16px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.label-item {
|
||||
display: flex;
|
||||
}
|
||||
.label-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -150,7 +133,7 @@ export default {
|
||||
padding-bottom: 10px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
::v-deep .ivu-btn {
|
||||
:deep(.el-button){
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
@@ -162,14 +145,10 @@ export default {
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
.ivu-form-item {
|
||||
.el-form-item {
|
||||
display: flex;
|
||||
|
||||
align-items: center;
|
||||
}
|
||||
.ivu-row {
|
||||
width: 100%;
|
||||
}
|
||||
.icon {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
|
||||
@@ -1,29 +1,29 @@
|
||||
<template>
|
||||
<div class="layout">
|
||||
<Form ref="formValidate" :label-width="160" label-position="right" :model="formValidate" :rules="ruleValidate">
|
||||
<FormItem label="appId" prop="appId">
|
||||
<Input maxlength="300" class="w200" v-model="formValidate.appId" />
|
||||
</FormItem>
|
||||
<FormItem label="certPath" prop="certPath">
|
||||
<Input maxlength="300" v-model="formValidate.certPath" />
|
||||
</FormItem>
|
||||
<FormItem label="alipayPublicCertPath" prop="alipayPublicCertPath">
|
||||
<Input maxlength="300" v-model="formValidate.alipayPublicCertPath" />
|
||||
</FormItem>
|
||||
<FormItem label="privateKey" class="label-item" prop="privateKey">
|
||||
<Input maxlength="3000" v-model="formValidate.privateKey" />
|
||||
</FormItem>
|
||||
<FormItem label="rootCertPath" prop="rootCertPath">
|
||||
<Input maxlength="300" v-model="formValidate.rootCertPath" />
|
||||
</FormItem>
|
||||
<FormItem label="支付回调域名" prop="callbackUrl">
|
||||
<Input maxlength="300" v-model="formValidate.callbackUrl" />
|
||||
</FormItem>
|
||||
<el-form ref="formValidate" label-width="160px" label-position="right" :model="formValidate" :rules="ruleValidate">
|
||||
<el-form-item label="appId" prop="appId">
|
||||
<el-input maxlength="300" class="w200" v-model="formValidate.appId" />
|
||||
</el-form-item>
|
||||
<el-form-item label="certPath" prop="certPath">
|
||||
<el-input maxlength="300" v-model="formValidate.certPath" />
|
||||
</el-form-item>
|
||||
<el-form-item label="alipayPublicCertPath" prop="alipayPublicCertPath">
|
||||
<el-input maxlength="300" v-model="formValidate.alipayPublicCertPath" />
|
||||
</el-form-item>
|
||||
<el-form-item label="privateKey" class="label-item" prop="privateKey">
|
||||
<el-input maxlength="3000" v-model="formValidate.privateKey" />
|
||||
</el-form-item>
|
||||
<el-form-item label="rootCertPath" prop="rootCertPath">
|
||||
<el-input maxlength="300" v-model="formValidate.rootCertPath" />
|
||||
</el-form-item>
|
||||
<el-form-item label="支付回调域名" prop="callbackUrl">
|
||||
<el-input maxlength="300" v-model="formValidate.callbackUrl" />
|
||||
</el-form-item>
|
||||
<div class="label-btns">
|
||||
<Button type="primary" @click="submit('formValidate')">保存</Button>
|
||||
<el-button type="primary" @click="submit('formValidate')">保存</el-button>
|
||||
|
||||
</div>
|
||||
</Form>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
@@ -68,7 +68,7 @@ export default {
|
||||
init() {
|
||||
this.res = JSON.parse(this.res);
|
||||
|
||||
this.$set(this, "formValidate", { ...this.res });
|
||||
this.formValidate = { ...this.res };
|
||||
Object.keys(this.formValidate).forEach((item) => {
|
||||
this.ruleValidate[item] = [
|
||||
{
|
||||
@@ -90,16 +90,16 @@ export default {
|
||||
display: flex;
|
||||
}
|
||||
.w200 {
|
||||
::v-deep .ivu-input {
|
||||
:deep(.el-input){
|
||||
width: 250px !important;
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
::v-deep .ivu-input {
|
||||
:deep(.el-input){
|
||||
width: 450px !important;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.ivu-input-wrapper {
|
||||
.el-input {
|
||||
width: 450px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
@@ -1,53 +1,39 @@
|
||||
<template>
|
||||
<div class="layout">
|
||||
<div class="row" v-for="(client,clientIndex) in supportForm.clients" :key="clientIndex">
|
||||
|
||||
<div class="col" v-if="client ==item.client" v-for="(item,index) in formValidate" :key="index">
|
||||
<Card :padding="0">
|
||||
<div>
|
||||
|
||||
<!-- app -->
|
||||
<div class="icon-item" v-if="client ==item.client &&item.client== 'APP'">
|
||||
<img class="icon" src="../../../../assets/setting/app.svg" alt="" srcset="">
|
||||
</div>
|
||||
<div class="icon-item" v-if=" client ==item.client && item.client== 'PC'">
|
||||
<!-- pc -->
|
||||
<img class="icon" src="../../../../assets/setting/pc.svg" alt="" srcset="">
|
||||
|
||||
</div>
|
||||
<div class="icon-item" v-if=" client ==item.client && item.client== 'WECHAT_MP'">
|
||||
<!-- 小程序 -->
|
||||
|
||||
<img class="icon" src="../../../../assets/setting/wechat_mp.svg" alt="" srcset="">
|
||||
</div>
|
||||
|
||||
<div class="icon-item" v-if=" client ==item.client && item.client== 'H5'">
|
||||
<!-- h5 -->
|
||||
|
||||
<img class="icon" src="../../../../assets/setting/h5.svg" alt="" srcset="">
|
||||
</div>
|
||||
<div class='pay-title' v-if=" client ==item.client "> {{way[item.client]}}</div>
|
||||
|
||||
<div v-if=" client ==item.client ">
|
||||
<Divider orientation="left">支付设置</Divider>
|
||||
|
||||
<div class="pay-list">
|
||||
<CheckboxGroup @on-change="handleChangePayType" v-model="item.supports">
|
||||
|
||||
<Checkbox v-for="(support,i) in supportForm.payments" :key="i" :label="support">
|
||||
|
||||
{{payWay[support] || support}}
|
||||
|
||||
</Checkbox>
|
||||
</CheckboxGroup>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" v-for="(item, index) in formValidate" :key="index">
|
||||
<div class="col">
|
||||
<el-card shadow="never" :body-style="{ padding: '0 16px' }">
|
||||
<div class="icon-item" v-if="item.client == 'APP'">
|
||||
<img class="icon" src="../../../../assets/setting/app.svg" alt="" />
|
||||
</div>
|
||||
</Card>
|
||||
<div class="icon-item" v-if="item.client == 'PC'">
|
||||
<img class="icon" src="../../../../assets/setting/pc.svg" alt="" />
|
||||
</div>
|
||||
<div class="icon-item" v-if="item.client == 'WECHAT_MP'">
|
||||
<img class="icon" src="../../../../assets/setting/wechat_mp.svg" alt="" />
|
||||
</div>
|
||||
<div class="icon-item" v-if="item.client == 'H5'">
|
||||
<img class="icon" src="../../../../assets/setting/h5.svg" alt="" />
|
||||
</div>
|
||||
<div class="pay-title">{{ way[item.client] }}</div>
|
||||
|
||||
<div>
|
||||
<el-divider content-position="left">支付设置</el-divider>
|
||||
|
||||
<div class="pay-list">
|
||||
<el-checkbox-group v-model="item.supports" @change="handleChangePayType">
|
||||
<el-checkbox
|
||||
v-for="(support, i) in supportForm.payments"
|
||||
:key="i"
|
||||
:value="support"
|
||||
>
|
||||
{{ payWay[support] || support }}
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -58,21 +44,20 @@ import { getPaymentSupportForm } from "@/api/setting";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
ruleValidate: {}, // 验证规则
|
||||
way: { // 类型
|
||||
ruleValidate: {},
|
||||
way: {
|
||||
APP: "移动应用端",
|
||||
H5: "移动端",
|
||||
WECHAT_MP: "小程序端",
|
||||
PC: "PC端",
|
||||
},
|
||||
formValidate: {}, // 表单数据
|
||||
// key obj
|
||||
payWay: { // 支付方式
|
||||
formValidate: {},
|
||||
payWay: {
|
||||
ALIPAY: "支付宝支付",
|
||||
WECHAT: "微信支付",
|
||||
WALLET: "余额支付",
|
||||
},
|
||||
supportForm: "", // 支持的支付方式
|
||||
supportForm: "",
|
||||
checkSupport: {},
|
||||
};
|
||||
},
|
||||
@@ -82,12 +67,11 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
submit(name) {
|
||||
let that = this;
|
||||
const that = this;
|
||||
if (handleSubmit(that, name)) {
|
||||
this.setupSetting();
|
||||
}
|
||||
},
|
||||
// 修改支付设置
|
||||
handleChangePayType(val) {
|
||||
this.$Modal.confirm({
|
||||
title: "修改支付设置",
|
||||
@@ -101,31 +85,25 @@ export default {
|
||||
},
|
||||
});
|
||||
},
|
||||
// 保存设置
|
||||
setupSetting() {
|
||||
setSetting(this.type, { paymentSupportItems: this.formValidate }).then(
|
||||
(res) => {
|
||||
if (res.success) {
|
||||
this.checkSupport = JSON.parse(JSON.stringify(this.formValidate));
|
||||
this.$Message.success("保存成功!");
|
||||
this.$Modal.remove();
|
||||
} else {
|
||||
this.$Message.error("保存失败!");
|
||||
this.$Modal.remove();
|
||||
}
|
||||
setSetting(this.type, { paymentSupportItems: this.formValidate }).then((res) => {
|
||||
if (res.success) {
|
||||
this.checkSupport = JSON.parse(JSON.stringify(this.formValidate));
|
||||
this.$Message.success("保存成功!");
|
||||
this.$Modal.remove();
|
||||
} else {
|
||||
this.$Message.error("保存失败!");
|
||||
this.$Modal.remove();
|
||||
}
|
||||
);
|
||||
});
|
||||
},
|
||||
// 实例化数据
|
||||
async init() {
|
||||
this.formValidate = JSON.parse(this.res).paymentSupportItems;
|
||||
this.checkSupport = JSON.parse(JSON.stringify(this.formValidate));
|
||||
this.checkSupport = JSON.parse(JSON.stringify(this.formValidate));
|
||||
console.log(this.formValidate);
|
||||
|
||||
await getPaymentSupportForm().then((res) => {
|
||||
// res.result.payments = ["H5", "PC"];
|
||||
this.supportForm = res.result;
|
||||
|
||||
});
|
||||
},
|
||||
},
|
||||
@@ -151,14 +129,8 @@ export default {
|
||||
margin-right: 20px;
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
::v-deep .ivu-card-body {
|
||||
padding: 0 16px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.label-item {
|
||||
display: flex;
|
||||
}
|
||||
.label-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -176,14 +148,10 @@ export default {
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
.ivu-form-item {
|
||||
.el-form-item {
|
||||
display: flex;
|
||||
|
||||
align-items: center;
|
||||
}
|
||||
.ivu-row {
|
||||
width: 100%;
|
||||
}
|
||||
.icon {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
|
||||
@@ -1,60 +1,60 @@
|
||||
<template>
|
||||
<div class="layout">
|
||||
<Form
|
||||
<el-form
|
||||
ref="formValidate"
|
||||
:label-width="150"
|
||||
label-width="150px"
|
||||
label-position="right"
|
||||
:model="formValidate"
|
||||
:rules="ruleValidate"
|
||||
>
|
||||
<FormItem label="JSAPI支付应用ID" prop="jsapiAppId">
|
||||
<Input maxlength="300" class="w200" v-model="formValidate.jsapiAppId" />
|
||||
</FormItem>
|
||||
<FormItem label="Native支付应用ID" prop="nativeAppId">
|
||||
<Input maxlength="300" class="w200" v-model="formValidate.nativeAppId" />
|
||||
</FormItem>
|
||||
<FormItem label="小程序支付应用id" prop="mpAppId">
|
||||
<Input maxlength="300" class="w200" v-model="formValidate.mpAppId" />
|
||||
</FormItem>
|
||||
<FormItem label="H5支付应用ID" prop="h5AppId">
|
||||
<Input maxlength="300" class="w200" v-model="formValidate.h5AppId" />
|
||||
</FormItem>
|
||||
<FormItem label="APP支付应用ID" prop="appAppId">
|
||||
<Input maxlength="300" class="w200" v-model="formValidate.appAppId" />
|
||||
</FormItem>
|
||||
<FormItem label="商户号" prop="mchId">
|
||||
<Input maxlength="300" class="w200" v-model="formValidate.mchId" />
|
||||
</FormItem>
|
||||
<FormItem label="APIv3密钥" prop="apiKey3">
|
||||
<Input maxlength="300" v-model="formValidate.apiKey3" />
|
||||
</FormItem>
|
||||
<FormItem label="API证书-证书序列号" prop="serialNumber">
|
||||
<Input maxlength="300" v-model="formValidate.serialNumber" />
|
||||
</FormItem>
|
||||
<FormItem class="form-item-view-el" label="apiclient_key" prop="apiclient_key">
|
||||
<Input v-model="formValidate.apiclientKey" :rows="6" maxlength="2500" show-word-limit type="textarea" placeholder="Enter something..." />
|
||||
</FormItem>
|
||||
<FormItem label="加签方式" prop="publicType">
|
||||
<RadioGroup type="button" button-style="solid" v-model="formValidate.publicType" @change="handlePublicTypeChange">
|
||||
<Radio label="CERT">平台证书</Radio>
|
||||
<Radio label="KEY">微信支付公钥</Radio>
|
||||
</RadioGroup>
|
||||
<el-form-item label="JSAPI支付应用ID" prop="jsapiAppId">
|
||||
<el-input maxlength="300" class="w200" v-model="formValidate.jsapiAppId" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Native支付应用ID" prop="nativeAppId">
|
||||
<el-input maxlength="300" class="w200" v-model="formValidate.nativeAppId" />
|
||||
</el-form-item>
|
||||
<el-form-item label="小程序支付应用id" prop="mpAppId">
|
||||
<el-input maxlength="300" class="w200" v-model="formValidate.mpAppId" />
|
||||
</el-form-item>
|
||||
<el-form-item label="H5支付应用ID" prop="h5AppId">
|
||||
<el-input maxlength="300" class="w200" v-model="formValidate.h5AppId" />
|
||||
</el-form-item>
|
||||
<el-form-item label="APP支付应用ID" prop="appAppId">
|
||||
<el-input maxlength="300" class="w200" v-model="formValidate.appAppId" />
|
||||
</el-form-item>
|
||||
<el-form-item label="商户号" prop="mchId">
|
||||
<el-input maxlength="300" class="w200" v-model="formValidate.mchId" />
|
||||
</el-form-item>
|
||||
<el-form-item label="APIv3密钥" prop="apiKey3">
|
||||
<el-input maxlength="300" v-model="formValidate.apiKey3" />
|
||||
</el-form-item>
|
||||
<el-form-item label="API证书-证书序列号" prop="serialNumber">
|
||||
<el-input maxlength="300" v-model="formValidate.serialNumber" />
|
||||
</el-form-item>
|
||||
<el-form-item class="form-item-view-el" label="apiclient_key" prop="apiclient_key">
|
||||
<el-input v-model="formValidate.apiclientKey" :rows="6" maxlength="2500" show-word-limit type="textarea" placeholder="Enter something..." />
|
||||
</el-form-item>
|
||||
<el-form-item label="加签方式" prop="publicType">
|
||||
<el-radio-group v-model="formValidate.publicType" @change="handlePublicTypeChange">
|
||||
<el-radio-button value="CERT">平台证书</el-radio-button>
|
||||
<el-radio-button value="KEY">微信支付公钥</el-radio-button>
|
||||
</el-radio-group>
|
||||
<span class="desc">商户接收APIv3的请求应答、回调时验签使用，以下两种方式只能使用一种</span>
|
||||
</FormItem>
|
||||
</el-form-item>
|
||||
<!-- 当加签方式选择“KEY”时展示 -->
|
||||
<FormItem v-if="formValidate.publicType === 'KEY'" label="公钥证书ID" prop="publicId">
|
||||
<Input maxlength="300" v-model="formValidate.publicId" />
|
||||
</FormItem>
|
||||
<FormItem v-if="formValidate.publicType === 'KEY'" class="form-item-view-el" label="公钥证书" prop="publicKey">
|
||||
<Input v-model="formValidate.publicKey" :rows="6" maxlength="2500" show-word-limit type="textarea" placeholder="Enter something..." />
|
||||
</FormItem>
|
||||
<FormItem label="支付回调域名" prop="callbackUrl">
|
||||
<Input maxlength="300" v-model="formValidate.callbackUrl" />
|
||||
</FormItem>
|
||||
<el-form-item v-if="formValidate.publicType === 'KEY'" label="公钥证书ID" prop="publicId">
|
||||
<el-input maxlength="300" v-model="formValidate.publicId" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="formValidate.publicType === 'KEY'" class="form-item-view-el" label="公钥证书" prop="publicKey">
|
||||
<el-input v-model="formValidate.publicKey" :rows="6" maxlength="2500" show-word-limit type="textarea" placeholder="Enter something..." />
|
||||
</el-form-item>
|
||||
<el-form-item label="支付回调域名" prop="callbackUrl">
|
||||
<el-input maxlength="300" v-model="formValidate.callbackUrl" />
|
||||
</el-form-item>
|
||||
<div class="label-btns">
|
||||
<Button type="primary" @click="submit('formValidate')">保存</Button>
|
||||
<el-button type="primary" @click="submit('formValidate')">保存</el-button>
|
||||
</div>
|
||||
</Form>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
@@ -93,7 +93,7 @@ export default {
|
||||
init() {
|
||||
this.res = JSON.parse(this.res);
|
||||
|
||||
this.$set(this, "formValidate", { ...this.res });
|
||||
this.formValidate = { ...this.res };
|
||||
Object.keys(this.formValidate).forEach((item) => {
|
||||
if (item.indexOf("pId") < 0) {
|
||||
this.ruleValidate[item] = [
|
||||
@@ -118,18 +118,18 @@ export default {
|
||||
}
|
||||
|
||||
.w200 {
|
||||
::v-deep .ivu-input {
|
||||
:deep(.el-input){
|
||||
width: 250px !important;
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .ivu-input {
|
||||
:deep(.el-input){
|
||||
width: 450px !important;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.ivu-input-wrapper {
|
||||
.el-input {
|
||||
width: 450px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,83 +1,81 @@
|
||||
<template>
|
||||
<div class="layout">
|
||||
<Form ref="formValidate" :label-width="150" label-position="right" :model="formValidate" :rules="ruleValidate">
|
||||
|
||||
<FormItem label="站点名称" prop="siteName">
|
||||
<Input style="width:200px;" v-model="formValidate.siteName" />
|
||||
<el-form ref="formValidate" label-width="150px" label-position="right" :model="formValidate" :rules="ruleValidate">
|
||||
<el-form-item label="站点名称" prop="siteName">
|
||||
<el-input style="width:200px;" v-model="formValidate.siteName" />
|
||||
<span class="desc">配置买家端站点名称</span>
|
||||
</FormItem>
|
||||
<FormItem label="icp" prop="icp">
|
||||
</el-form-item>
|
||||
<el-form-item label="icp" prop="icp">
|
||||
<el-input v-model="formValidate.icp" />
|
||||
</el-form-item>
|
||||
|
||||
<Input v-model="formValidate.icp" />
|
||||
</FormItem>
|
||||
|
||||
<FormItem label="后台Logo" prop="domainLogo">
|
||||
<el-form-item label="后台Logo" prop="domainLogo">
|
||||
<div class="label-item-upload">
|
||||
|
||||
<img v-if="formValidate.domainLogo" class="img" :src="formValidate.domainLogo" />
|
||||
<img v-else class="img" src="../../../../assets/emptyImg.png" alt="">
|
||||
<Button @click="onClickImg('domainLogo')">选择图片</Button>
|
||||
<span class="desc">后台管理左上角logo展示 17∶6</span>
|
||||
<img v-else class="img" src="../../../../assets/emptyImg.png" alt="" />
|
||||
<el-button @click="onClickImg('domainLogo')">选择图片</el-button>
|
||||
<span class="desc">后台管理左上角logo展示 17∶6</span>
|
||||
</div>
|
||||
</FormItem>
|
||||
<FormItem label="后台Icon" prop="domainIcon">
|
||||
</el-form-item>
|
||||
<el-form-item label="后台Icon" prop="domainIcon">
|
||||
<div class="label-item-upload">
|
||||
|
||||
<img v-if="formValidate.domainIcon" class="img" :src="formValidate.domainIcon" />
|
||||
<img v-else class="img" src="../../../../assets/emptyImg.png" alt="">
|
||||
<Button @click="onClickImg('domainIcon')">选择图片</Button>
|
||||
<span class="desc">后台管理网站icon展示 1∶1</span>
|
||||
<img v-else class="img" src="../../../../assets/emptyImg.png" alt="" />
|
||||
<el-button @click="onClickImg('domainIcon')">选择图片</el-button>
|
||||
<span class="desc">后台管理网站icon展示 1∶1</span>
|
||||
</div>
|
||||
</FormItem>
|
||||
<FormItem label="买家端Logo" prop="buyerSideLogo">
|
||||
</el-form-item>
|
||||
<el-form-item label="买家端Logo" prop="buyerSideLogo">
|
||||
<div class="label-item-upload">
|
||||
<img v-if="formValidate.buyerSideLogo" class="img" :src="formValidate.buyerSideLogo" />
|
||||
<img v-else class="img" src="../../../../assets/emptyImg.png" alt="">
|
||||
<Button @click="onClickImg('buyerSideLogo')">选择图片</Button>
|
||||
<span class="desc">买家端logo展示 17∶6</span>
|
||||
<img v-else class="img" src="../../../../assets/emptyImg.png" alt="" />
|
||||
<el-button @click="onClickImg('buyerSideLogo')">选择图片</el-button>
|
||||
<span class="desc">买家端logo展示 17∶6</span>
|
||||
</div>
|
||||
</FormItem>
|
||||
<FormItem label="买家端Icon" prop="buyerSideIcon">
|
||||
</el-form-item>
|
||||
<el-form-item label="买家端Icon" prop="buyerSideIcon">
|
||||
<div class="label-item-upload">
|
||||
<img v-if="formValidate.buyerSideIcon" class="img" :src="formValidate.buyerSideIcon" />
|
||||
<img v-else class="img" src="../../../../assets/emptyImg.png" alt="">
|
||||
<Button @click="onClickImg('buyerSideIcon')">选择图片</Button>
|
||||
<span class="desc">买家端网站icon展示 1∶1</span>
|
||||
<img v-else class="img" src="../../../../assets/emptyImg.png" alt="" />
|
||||
<el-button @click="onClickImg('buyerSideIcon')">选择图片</el-button>
|
||||
<span class="desc">买家端网站icon展示 1∶1</span>
|
||||
</div>
|
||||
</FormItem>
|
||||
<FormItem label="商家端Logo" prop="storeSideLogo">
|
||||
</el-form-item>
|
||||
<el-form-item label="商家端Logo" prop="storeSideLogo">
|
||||
<div class="label-item-upload">
|
||||
<img v-if="formValidate.storeSideLogo" class="img" :src="formValidate.storeSideLogo" />
|
||||
<img v-else class="img" src="../../../../assets/emptyImg.png" alt="">
|
||||
<Button @click="onClickImg('storeSideLogo')">选择图片</Button>
|
||||
<img v-else class="img" src="../../../../assets/emptyImg.png" alt="" />
|
||||
<el-button @click="onClickImg('storeSideLogo')">选择图片</el-button>
|
||||
<span class="desc">商家端logo展示 17∶6</span>
|
||||
</div>
|
||||
</FormItem>
|
||||
<FormItem label="商家端Icon" prop="storeSideIcon">
|
||||
</el-form-item>
|
||||
<el-form-item label="商家端Icon" prop="storeSideIcon">
|
||||
<div class="label-item-upload">
|
||||
<img v-if="formValidate.storeSideIcon" class="img" :src="formValidate.storeSideIcon" />
|
||||
<img v-else class="img" src="../../../../assets/emptyImg.png" alt="">
|
||||
<Button @click="onClickImg('storeSideIcon')">选择图片</Button>
|
||||
<span class="desc">商家端icon展示 1∶1</span>
|
||||
<img v-else class="img" src="../../../../assets/emptyImg.png" alt="" />
|
||||
<el-button @click="onClickImg('storeSideIcon')">选择图片</el-button>
|
||||
<span class="desc">商家端icon展示 1∶1</span>
|
||||
</div>
|
||||
</FormItem>
|
||||
</el-form-item>
|
||||
|
||||
<FormItem label="站点地址" prop="staticPageAddress">
|
||||
<Input style="width:200px;" v-model="formValidate.staticPageAddress" />
|
||||
|
||||
</FormItem>
|
||||
<FormItem label="wap站点地址" prop="staticPageWapAddress">
|
||||
<Input v-model="formValidate.staticPageWapAddress" />
|
||||
</FormItem>
|
||||
<el-form-item label="站点地址" prop="staticPageAddress">
|
||||
<el-input style="width:200px;" v-model="formValidate.staticPageAddress" />
|
||||
</el-form-item>
|
||||
<el-form-item label="wap站点地址" prop="staticPageWapAddress">
|
||||
<el-input v-model="formValidate.staticPageWapAddress" />
|
||||
</el-form-item>
|
||||
<div class="label-btns">
|
||||
<Button type="primary" @click="submit('formValidate')">保存</Button>
|
||||
|
||||
<el-button type="primary" @click="submit('formValidate')">保存</el-button>
|
||||
</div>
|
||||
</Form>
|
||||
<Modal width="1200px" v-model="picModelFlag">
|
||||
<ossManage @callback="callbackSelected" :isComponent="true" :initialize="picModelFlag" ref="ossManage" />
|
||||
</Modal>
|
||||
|
||||
</el-form>
|
||||
<el-dialog v-model="picModelFlag" width="1200px" append-to-body destroy-on-close :show-close="true">
|
||||
<ossManage
|
||||
@callback="callbackSelected"
|
||||
:isComponent="true"
|
||||
:initialize="picModelFlag"
|
||||
ref="ossManage"
|
||||
/>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
@@ -87,21 +85,20 @@ import ossManage from "@/views/sys/oss-manage/ossManage";
|
||||
export default {
|
||||
title: "基础设置",
|
||||
props: {
|
||||
res:{
|
||||
type:null,
|
||||
default:""
|
||||
res: {
|
||||
type: null,
|
||||
default: "",
|
||||
},
|
||||
type:''
|
||||
type: "",
|
||||
},
|
||||
components: {
|
||||
ossManage,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
handleSubmit, // 验证规则
|
||||
|
||||
picModelFlag: false, // 预览图片显隐
|
||||
formValidate: { // 表单数据
|
||||
handleSubmit,
|
||||
picModelFlag: false,
|
||||
formValidate: {
|
||||
buyerSideLogo: "",
|
||||
domainLogo: "",
|
||||
icp: "",
|
||||
@@ -110,33 +107,34 @@ export default {
|
||||
staticPageAddress: "",
|
||||
staticPageWapAddress: "",
|
||||
},
|
||||
selected: "", // 已选数据
|
||||
ruleValidate: {}, // 验证规则
|
||||
result:""
|
||||
selected: "",
|
||||
ruleValidate: {},
|
||||
result: "",
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
// 点击图片
|
||||
onClickImg(item) {
|
||||
this.selected = item;
|
||||
this.$refs.ossManage.selectImage = true;
|
||||
this.picModelFlag = true;
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.ossManage) {
|
||||
this.$refs.ossManage.selectImage = true;
|
||||
}
|
||||
});
|
||||
},
|
||||
submit(name) {
|
||||
let that = this;
|
||||
const that = this;
|
||||
if (handleSubmit(that, name)) {
|
||||
this.setupSetting();
|
||||
}
|
||||
},
|
||||
// 选择回显
|
||||
callbackSelected(val) {
|
||||
this.picModelFlag = false;
|
||||
this.formValidate[this.selected] = val.url;
|
||||
},
|
||||
// 保存设置
|
||||
setupSetting() {
|
||||
setSetting(this.type, this.formValidate).then((res) => {
|
||||
if (res.success) {
|
||||
@@ -149,10 +147,9 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
/**添加必填项 */
|
||||
init() {
|
||||
this.result = JSON.parse(this.res);
|
||||
this.$set(this, "formValidate", { ...this.result });
|
||||
this.formValidate = { ...this.result };
|
||||
Object.keys(this.result).forEach((item) => {
|
||||
this.ruleValidate[item] = [
|
||||
{
|
||||
@@ -170,7 +167,7 @@ export default {
|
||||
@import "./style.scss";
|
||||
.label-item {
|
||||
display: flex;
|
||||
> .ivu-input {
|
||||
> .el-input {
|
||||
width: 200px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
@@ -1,72 +1,68 @@
|
||||
<template>
|
||||
<div class="layout">
|
||||
<Form ref="formValidate" :label-width="150" label-position="right" :model="formValidate" :rules="ruleValidate">
|
||||
<FormItem label="商品审核" prop="goodsCheck">
|
||||
<RadioGroup type="button" button-style="solid" v-model="formValidate.goodsCheck">
|
||||
<Radio label="true">开启</Radio>
|
||||
<Radio label="false">关闭</Radio>
|
||||
|
||||
</RadioGroup>
|
||||
<span class="desc">商品审核关闭后，商家添加商品则无需审核直接上架</span>
|
||||
</FormItem>
|
||||
<el-form ref="formValidate" label-width="150px" label-position="right" :model="formValidate" :rules="ruleValidate">
|
||||
<el-form-item label="商品审核" prop="goodsCheck">
|
||||
<el-radio-group v-model="formValidate.goodsCheck">
|
||||
<el-radio-button value="true">开启</el-radio-button>
|
||||
<el-radio-button value="false">关闭</el-radio-button>
|
||||
</el-radio-group>
|
||||
<span class="desc">商品审核关闭后，商家添加商品则无需审核直接上架</span>
|
||||
</el-form-item>
|
||||
<div class="label-item">
|
||||
<FormItem class="label-item" label="缩略图宽" prop="abbreviationPictureWidth">
|
||||
<Input type="number" v-model="formValidate.abbreviationPictureWidth">
|
||||
<span slot="prepend">宽</span>
|
||||
<span slot="append">px</span>
|
||||
</Input>
|
||||
|
||||
</FormItem>
|
||||
<FormItem class="label-item" label="缩略图高" prop="abbreviationPictureHeight">
|
||||
<Input type="number" v-model="formValidate.abbreviationPictureHeight">
|
||||
<span slot="prepend">高</span>
|
||||
<span slot="append">px</span>
|
||||
</Input>
|
||||
</FormItem>
|
||||
<el-form-item class="label-item" label="缩略图宽" prop="abbreviationPictureWidth">
|
||||
<el-input type="number" v-model="formValidate.abbreviationPictureWidth">
|
||||
<template #prepend>宽</template>
|
||||
<template #append>px</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item class="label-item" label="缩略图高" prop="abbreviationPictureHeight">
|
||||
<el-input type="number" v-model="formValidate.abbreviationPictureHeight">
|
||||
<template #prepend>高</template>
|
||||
<template #append>px</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="label-item">
|
||||
<FormItem label="小图宽" prop="smallPictureWidth">
|
||||
<Input type="number" v-model="formValidate.smallPictureWidth">
|
||||
<span slot="prepend">宽</span>
|
||||
<span slot="append">px</span>
|
||||
</Input>
|
||||
|
||||
</FormItem>
|
||||
<FormItem label="小图高" class="label-item" prop="smallPictureHeight">
|
||||
<Input type="number" v-model="formValidate.smallPictureHeight">
|
||||
<span slot="prepend">高</span>
|
||||
<span slot="append">px</span>
|
||||
</Input>
|
||||
</FormItem>
|
||||
<el-form-item label="小图宽" prop="smallPictureWidth">
|
||||
<el-input type="number" v-model="formValidate.smallPictureWidth">
|
||||
<template #prepend>宽</template>
|
||||
<template #append>px</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="小图高" class="label-item" prop="smallPictureHeight">
|
||||
<el-input type="number" v-model="formValidate.smallPictureHeight">
|
||||
<template #prepend>高</template>
|
||||
<template #append>px</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="label-item">
|
||||
<FormItem class="label-item" label="原图宽高" prop="originalPictureWidth">
|
||||
<Input type="number" v-model="formValidate.originalPictureWidth">
|
||||
<span slot="prepend">宽</span>
|
||||
<span slot="append">px</span>
|
||||
</Input>
|
||||
|
||||
</FormItem>
|
||||
<FormItem class="label-item" label="原图宽高" prop="originalPictureHeight">
|
||||
<Input type="number" v-model="formValidate.originalPictureHeight">
|
||||
<span slot="prepend">高</span>
|
||||
<span slot="append">px</span>
|
||||
</Input>
|
||||
</FormItem>
|
||||
<el-form-item class="label-item" label="原图宽高" prop="originalPictureWidth">
|
||||
<el-input type="number" v-model="formValidate.originalPictureWidth">
|
||||
<template #prepend>宽</template>
|
||||
<template #append>px</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item class="label-item" label="原图宽高" prop="originalPictureHeight">
|
||||
<el-input type="number" v-model="formValidate.originalPictureHeight">
|
||||
<template #prepend>高</template>
|
||||
<template #append>px</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="label-btns">
|
||||
<Button type="primary" @click="submit('formValidate')">保存</Button>
|
||||
<div class="label-btns">
|
||||
<el-button type="primary" @click="submit('formValidate')">保存</el-button>
|
||||
<div class="es-buttons">
|
||||
<Button type="success" @click="createIndex()">重新生成所有商品索引</Button>
|
||||
<Button type="info" @click="deleteDownGoods()">删除ES中下架的商品</Button>
|
||||
<Button type="warning" @click="generateCache()">生成所有商品的缓存</Button>
|
||||
<Button type="error" @click="deleteNotExistIndex()">删除不存在的索引</Button>
|
||||
<el-button type="success" @click="createIndex()">重新生成所有商品索引</el-button>
|
||||
<el-button type="info" @click="deleteDownGoods()">删除ES中下架的商品</el-button>
|
||||
<el-button type="warning" @click="generateCache()">生成所有商品的缓存</el-button>
|
||||
<el-button type="danger" @click="deleteNotExistIndex()">删除不存在的索引</el-button>
|
||||
</div>
|
||||
<div class="progress-item" v-if="showProgress">
|
||||
<i-progress :percent="progressVal"></i-progress>
|
||||
<el-progress :percentage="progressVal" />
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
@@ -77,7 +73,6 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
formValidate: {
|
||||
// 表单数据
|
||||
goodsCheck: 1,
|
||||
smallPictureHeight: "0",
|
||||
smallPictureWidth: "0",
|
||||
@@ -89,22 +84,20 @@ export default {
|
||||
progressVal: 0,
|
||||
showProgress: false,
|
||||
intervalProgress: null,
|
||||
ruleValidate: {}, // 验证规则
|
||||
result:""
|
||||
ruleValidate: {},
|
||||
result: "",
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
//保存
|
||||
submit(name) {
|
||||
let that = this;
|
||||
const that = this;
|
||||
if (handleSubmit(that, name)) {
|
||||
this.setupSetting();
|
||||
}
|
||||
},
|
||||
//重新生成所有商品索引
|
||||
createIndex() {
|
||||
createIndex().then((res) => {
|
||||
if (res.success) {
|
||||
@@ -113,15 +106,13 @@ export default {
|
||||
setTimeout(() => {
|
||||
this.intervalProgress = setInterval(() => {
|
||||
getProgress().then((resp) => {
|
||||
let progressResult = resp.result;
|
||||
const progressResult = resp.result;
|
||||
if (progressResult != null && progressResult.flag === 0) {
|
||||
clearInterval(this.intervalProgress);
|
||||
this.showProgress = false;
|
||||
this.$Message.success("生成成功!");
|
||||
} else {
|
||||
this.progressVal = Math.floor(
|
||||
(progressResult.processed / progressResult.total) * 100
|
||||
);
|
||||
this.progressVal = Math.floor((progressResult.processed / progressResult.total) * 100);
|
||||
}
|
||||
});
|
||||
}, 1000);
|
||||
@@ -130,22 +121,19 @@ export default {
|
||||
this.showProgress = true;
|
||||
this.intervalProgress = setInterval(() => {
|
||||
getProgress().then((resp) => {
|
||||
let progressResult = resp.result;
|
||||
const progressResult = resp.result;
|
||||
if (progressResult != null && progressResult.flag === 0) {
|
||||
clearInterval(this.intervalProgress);
|
||||
this.showProgress = false;
|
||||
this.$Message.success("生成成功!");
|
||||
} else {
|
||||
this.progressVal = Math.floor(
|
||||
(progressResult.processed / progressResult.total) * 100
|
||||
);
|
||||
this.progressVal = Math.floor((progressResult.processed / progressResult.total) * 100);
|
||||
}
|
||||
});
|
||||
}, 1000);
|
||||
}
|
||||
});
|
||||
},
|
||||
//删除ES中下架的商品
|
||||
deleteDownGoods() {
|
||||
deleteGoodsDown().then((res) => {
|
||||
if (res.success) {
|
||||
@@ -155,7 +143,6 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
//生成所有商品的缓存
|
||||
generateCache() {
|
||||
generateGoodsCache().then((res) => {
|
||||
if (res.success) {
|
||||
@@ -165,7 +152,6 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
//删除不存在的索引
|
||||
deleteNotExistIndex() {
|
||||
delSkuIndex().then((res) => {
|
||||
if (res.success) {
|
||||
@@ -175,7 +161,6 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
// 保存设置
|
||||
setupSetting() {
|
||||
setSetting(this.type, this.formValidate).then((res) => {
|
||||
if (res.success) {
|
||||
@@ -185,15 +170,12 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 实例化数据
|
||||
init() {
|
||||
this.result = JSON.parse(this.res);
|
||||
|
||||
Object.keys(this.result).map((item) => {
|
||||
this.result[item] += "";
|
||||
});
|
||||
this.$set(this, "formValidate", { ...this.result });
|
||||
this.formValidate = { ...this.result };
|
||||
Object.keys(this.formValidate).forEach((item) => {
|
||||
this.ruleValidate[item] = [
|
||||
{
|
||||
@@ -223,7 +205,7 @@ export default {
|
||||
.label-item {
|
||||
display: flex;
|
||||
}
|
||||
::v-deep .ivu-input {
|
||||
:deep(.el-input){
|
||||
width: 100px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
<template>
|
||||
<div class="layout">
|
||||
<Form ref="formValidate" :label-width="150" label-position="right" :model="formValidate" :rules="ruleValidate">
|
||||
<FormItem label="云IM地址" prop="httpUrl">
|
||||
<Input v-model="formValidate.httpUrl"/>
|
||||
<el-form ref="formValidate" label-width="150px" label-position="right" :model="formValidate" :rules="ruleValidate">
|
||||
<el-form-item label="云IM地址" prop="httpUrl">
|
||||
<el-input v-model="formValidate.httpUrl"/>
|
||||
<span class="desc">配置买家端联系客服以及商家端登录客服跳转的路径</span>
|
||||
</FormItem>
|
||||
</el-form-item>
|
||||
|
||||
<div class="label-btns">
|
||||
<Button type="primary" @click="submit('formValidate')">保存</Button>
|
||||
<el-button type="primary" @click="submit('formValidate')">保存</el-button>
|
||||
</div>
|
||||
</Form>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
@@ -52,7 +52,7 @@ export default {
|
||||
init() {
|
||||
this.result = JSON.parse(this.res);
|
||||
|
||||
this.$set(this, "formValidate", {...this.result});
|
||||
this.formValidate = { ...this.result };
|
||||
Object.keys(this.formValidate).forEach((item) => {
|
||||
this.ruleValidate[item] = [
|
||||
{
|
||||
@@ -74,12 +74,12 @@ export default {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
::v-deep .ivu-input {
|
||||
:deep(.el-input){
|
||||
width: 300px !important;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.ivu-input-wrapper {
|
||||
.el-input {
|
||||
width: 300px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
@@ -1,51 +1,50 @@
|
||||
<template>
|
||||
<div class="layout">
|
||||
<Form ref="formValidate" :label-width="150" label-position="right" :model="formValidate" :rules="ruleValidate">
|
||||
<FormItem label="平台 " prop="endPoint">
|
||||
<RadioGroup v-model="formValidate.type" type="button">
|
||||
<Radio label="KDNIAO">快递鸟</Radio>
|
||||
<Radio label="KUAIDI100">快递100</Radio>
|
||||
<Radio label="SHUNFENG">顺丰</Radio>
|
||||
</RadioGroup>
|
||||
</FormItem>
|
||||
<FormItem v-if="formValidate.type === 'KDNIAO'" label="快递鸟 商户ID" prop="kdniaoEbusinessID">
|
||||
<Input v-model="formValidate.kdniaoEbusinessID" />
|
||||
</FormItem>
|
||||
<FormItem v-if="formValidate.type === 'KDNIAO'" label="快递鸟 AppKey" prop="kdniaoAppKey">
|
||||
<Input class="label-appkey" v-model="formValidate.kdniaoAppKey" />
|
||||
</FormItem>
|
||||
<FormItem v-if="formValidate.type === 'KDNIAO'" label="快递鸟 requestType" prop="requestType">
|
||||
<Input class="label-appkey" v-model="formValidate.requestType" />
|
||||
</FormItem>
|
||||
<el-form ref="formValidate" label-width="150px" label-position="right" :model="formValidate" :rules="ruleValidate">
|
||||
<el-form-item label="平台 " prop="endPoint">
|
||||
<el-radio-group v-model="formValidate.type">
|
||||
<el-radio-button value="KDNIAO">快递鸟</el-radio-button>
|
||||
<el-radio-button value="KUAIDI100">快递100</el-radio-button>
|
||||
<el-radio-button value="SHUNFENG">顺丰</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="formValidate.type === 'KDNIAO'" label="快递鸟 商户ID" prop="kdniaoEbusinessID">
|
||||
<el-input v-model="formValidate.kdniaoEbusinessID" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="formValidate.type === 'KDNIAO'" label="快递鸟 AppKey" prop="kdniaoAppKey">
|
||||
<el-input class="label-appkey" v-model="formValidate.kdniaoAppKey" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="formValidate.type === 'KDNIAO'" label="快递鸟 requestType" prop="requestType">
|
||||
<el-input class="label-appkey" v-model="formValidate.requestType" />
|
||||
</el-form-item>
|
||||
|
||||
<FormItem v-if="formValidate.type === 'KUAIDI100'" label="快递100 授权码" prop="kuaidi100Customer">
|
||||
<Input class="label-appkey" v-model="formValidate.kuaidi100Customer" />
|
||||
</FormItem>
|
||||
<FormItem v-if="formValidate.type === 'KUAIDI100'" label="快递100 Key" prop="kuaidi100Key">
|
||||
<Input class="label-appkey" v-model="formValidate.kuaidi100Key" />
|
||||
</FormItem>
|
||||
<div v-if="formValidate.type === 'SHUNFENG'">
|
||||
<FormItem label="顾客编码" prop="clientCode">
|
||||
<Input v-model="formValidate.clientCode" />
|
||||
</FormItem>
|
||||
<FormItem label="校验码" prop="checkWord">
|
||||
<Input v-model="formValidate.checkWord" />
|
||||
</FormItem>
|
||||
<FormItem label="请求地址" prop="callUrl">
|
||||
<Input class="label-appkey" v-model="formValidate.callUrl" />
|
||||
</FormItem>
|
||||
|
||||
<FormItem label="打印模板" prop="templateCode">
|
||||
<Input class="label-appkey" v-model="formValidate.templateCode" />
|
||||
</FormItem>
|
||||
<FormItem label="月结号" prop="monthlyCardNo">
|
||||
<Input class="label-appkey" v-model="formValidate.monthlyCardNo" />
|
||||
</FormItem>
|
||||
</div>
|
||||
<el-form-item v-if="formValidate.type === 'KUAIDI100'" label="快递100 授权码" prop="kuaidi100Customer">
|
||||
<el-input class="label-appkey" v-model="formValidate.kuaidi100Customer" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="formValidate.type === 'KUAIDI100'" label="快递100 Key" prop="kuaidi100Key">
|
||||
<el-input class="label-appkey" v-model="formValidate.kuaidi100Key" />
|
||||
</el-form-item>
|
||||
<template v-if="formValidate.type === 'SHUNFENG'">
|
||||
<el-form-item label="顾客编码" prop="clientCode">
|
||||
<el-input v-model="formValidate.clientCode" />
|
||||
</el-form-item>
|
||||
<el-form-item label="校验码" prop="checkWord">
|
||||
<el-input v-model="formValidate.checkWord" />
|
||||
</el-form-item>
|
||||
<el-form-item label="请求地址" prop="callUrl">
|
||||
<el-input class="label-appkey" v-model="formValidate.callUrl" />
|
||||
</el-form-item>
|
||||
<el-form-item label="打印模板" prop="templateCode">
|
||||
<el-input class="label-appkey" v-model="formValidate.templateCode" />
|
||||
</el-form-item>
|
||||
<el-form-item label="月结号" prop="monthlyCardNo">
|
||||
<el-input class="label-appkey" v-model="formValidate.monthlyCardNo" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
<div class="label-btns">
|
||||
<Button type="primary" @click="submit('formValidate')">保存</Button>
|
||||
<el-button type="primary" @click="submit('formValidate')">保存</el-button>
|
||||
</div>
|
||||
</Form>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
@@ -54,31 +53,29 @@ import { handleSubmit } from "./validate";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
ruleValidate: {}, // 验证规则
|
||||
result:"",
|
||||
formValidate: { // 表单数据
|
||||
ruleValidate: {},
|
||||
result: "",
|
||||
formValidate: {
|
||||
type: "",
|
||||
kdniaoEbusinessID: "",
|
||||
kdniaoAppKey: "",
|
||||
requestType:"",
|
||||
requestType: "",
|
||||
kuaidi100Customer: "",
|
||||
kuaidi100Key: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
props: ["res", 'type'],
|
||||
props: ["res", "type"],
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
// 验证
|
||||
submit(name) {
|
||||
let that = this;
|
||||
const that = this;
|
||||
if (handleSubmit(that, name)) {
|
||||
this.setupSetting()
|
||||
this.setupSetting();
|
||||
}
|
||||
},
|
||||
// 保存设置
|
||||
setupSetting() {
|
||||
setSetting(this.type, this.formValidate).then((res) => {
|
||||
if (res.success) {
|
||||
@@ -88,10 +85,9 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
// 实例化数据
|
||||
init() {
|
||||
this.result = JSON.parse(this.res);
|
||||
this.$set(this, "formValidate", { ...this.result });
|
||||
this.formValidate = { ...this.result };
|
||||
Object.keys(this.formValidate).forEach((item) => {
|
||||
this.ruleValidate[item] = [
|
||||
{
|
||||
@@ -113,12 +109,13 @@ export default {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
::v-deep .ivu-input {
|
||||
:deep(.el-input){
|
||||
width: 300px !important;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.ivu-input-wrapper {
|
||||
.el-input {
|
||||
width: 300px;
|
||||
margin-right: 10px;
|
||||
}</style>
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,45 +1,43 @@
|
||||
<template>
|
||||
<div class="layout">
|
||||
<Form ref="formValidate" :label-width="150" label-position="right" :model="formValidate" :rules="ruleValidate">
|
||||
|
||||
<FormItem label="订单自动取消" prop="autoCancel">
|
||||
<Input type='number' v-model="formValidate.autoCancel">
|
||||
<span slot="append">分</span>
|
||||
</Input>
|
||||
<el-form ref="formValidate" label-width="150px" label-position="right" :model="formValidate" :rules="ruleValidate">
|
||||
<el-form-item label="订单自动取消" prop="autoCancel">
|
||||
<el-input type="number" v-model="formValidate.autoCancel">
|
||||
<template #append>分</template>
|
||||
</el-input>
|
||||
<span class="desc">发起订单后，多少分钟未操作取消订单</span>
|
||||
</FormItem>
|
||||
</el-form-item>
|
||||
|
||||
<FormItem label="订单自动收货" class="label-item" prop="autoReceive">
|
||||
<Input type='number' v-model="formValidate.autoReceive">
|
||||
<span slot="append">天</span>
|
||||
</Input>
|
||||
<el-form-item label="订单自动收货" class="label-item" prop="autoReceive">
|
||||
<el-input type="number" v-model="formValidate.autoReceive">
|
||||
<template #append>天</template>
|
||||
</el-input>
|
||||
<span class="desc">发货后多少天自动完成收货</span>
|
||||
</FormItem>
|
||||
</el-form-item>
|
||||
|
||||
<FormItem label="自动好评" prop="autoEvaluation">
|
||||
<Input type='number' v-model="formValidate.autoEvaluation">
|
||||
<span slot="append">天</span>
|
||||
</Input>
|
||||
<el-form-item label="自动好评" prop="autoEvaluation">
|
||||
<el-input type="number" v-model="formValidate.autoEvaluation">
|
||||
<template #append>天</template>
|
||||
</el-input>
|
||||
<span class="desc">订单发货后，多少天后自动好评</span>
|
||||
</FormItem>
|
||||
<FormItem label="已完成订单允许退单" prop="closeAfterSale">
|
||||
<Input type='number' v-model="formValidate.closeAfterSale">
|
||||
<span slot="append">天</span>
|
||||
</Input>
|
||||
</el-form-item>
|
||||
<el-form-item label="已完成订单允许退单" prop="closeAfterSale">
|
||||
<el-input type="number" v-model="formValidate.closeAfterSale">
|
||||
<template #append>天</template>
|
||||
</el-input>
|
||||
<span class="desc">订单完成后，多少天内允许退单，如果天数为0,则完成订单当天可以退单，之后就不再允许。</span>
|
||||
</FormItem>
|
||||
<FormItem label="已完成订单允许投诉" prop="closeComplaint">
|
||||
<Input type='number' v-model="formValidate.closeComplaint">
|
||||
<span slot="append">天</span>
|
||||
</Input>
|
||||
</el-form-item>
|
||||
<el-form-item label="已完成订单允许投诉" prop="closeComplaint">
|
||||
<el-input type="number" v-model="formValidate.closeComplaint">
|
||||
<template #append>天</template>
|
||||
</el-input>
|
||||
<span class="desc">订单完成后，多少天内允许投诉，如果天数为0,则不允许投诉</span>
|
||||
</FormItem>
|
||||
</el-form-item>
|
||||
|
||||
<div class="label-btns">
|
||||
<Button type="primary" @click="submit('formValidate')">保存</Button>
|
||||
|
||||
<el-button type="primary" @click="submit('formValidate')">保存</el-button>
|
||||
</div>
|
||||
</Form>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
@@ -48,15 +46,15 @@ import { handleSubmit } from "./validate";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
ruleValidate: {}, // 验证规则
|
||||
formValidate: { // 表单数据
|
||||
ruleValidate: {},
|
||||
formValidate: {
|
||||
autoCancel: "",
|
||||
autoEvaluation: "",
|
||||
autoReceive: "",
|
||||
closeAfterSale: "",
|
||||
closeComplaint: ""
|
||||
closeComplaint: "",
|
||||
},
|
||||
result: ""
|
||||
result: "",
|
||||
};
|
||||
},
|
||||
props: ["res", "type"],
|
||||
@@ -64,14 +62,12 @@ export default {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
// 保存
|
||||
submit(name) {
|
||||
let that = this;
|
||||
const that = this;
|
||||
if (handleSubmit(that, name)) {
|
||||
this.setupSetting();
|
||||
}
|
||||
},
|
||||
// 保存设置
|
||||
setupSetting() {
|
||||
setSetting(this.type, this.formValidate).then((res) => {
|
||||
if (res.success) {
|
||||
@@ -81,13 +77,12 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
// 实例化数据
|
||||
init() {
|
||||
this.result = JSON.parse(this.res);
|
||||
Object.keys(this.result).map((item) => {
|
||||
this.result[item] += "";
|
||||
});
|
||||
this.$set(this, "formValidate", { ...this.result });
|
||||
this.formValidate = { ...this.result };
|
||||
Object.keys(this.formValidate).forEach((item) => {
|
||||
this.ruleValidate[item] = [
|
||||
{
|
||||
@@ -119,12 +114,12 @@ export default {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.ivu-input-wrapper {
|
||||
.el-input {
|
||||
width: 100px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
::v-deep .ivu-input {
|
||||
:deep(.el-input){
|
||||
width: 100px !important;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,84 +1,84 @@
|
||||
<template>
|
||||
<div class="layout">
|
||||
<Form ref="formValidate" :label-width="150" label-position="right" :model="formValidate" :rules="ruleValidate">
|
||||
<el-form ref="formValidate" label-width="150px" label-position="right" :model="formValidate" :rules="ruleValidate">
|
||||
|
||||
<FormItem label="平台" >
|
||||
<RadioGroup v-model="formValidate.type" type="button">
|
||||
<Radio label="ALI_OSS">阿里OSS</Radio>
|
||||
<Radio label="MINIO">MINIO</Radio>
|
||||
<Radio label="HUAWEI_OBS">华为云OBS</Radio>
|
||||
<Radio label="TENCENT_COS">腾讯云COS</Radio>
|
||||
</RadioGroup>
|
||||
</FormItem>
|
||||
<el-form-item label="平台" >
|
||||
<el-radio-group v-model="formValidate.type">
|
||||
<el-radio-button value="ALI_OSS">阿里OSS</el-radio-button>
|
||||
<el-radio-button value="MINIO">MINIO</el-radio-button>
|
||||
<el-radio-button value="HUAWEI_OBS">华为云OBS</el-radio-button>
|
||||
<el-radio-button value="TENCENT_COS">腾讯云COS</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<!-- 阿里云存储-->
|
||||
<FormItem v-if="formValidate.type==='ALI_OSS'" key="aliyunOSSEndPoint" label="节点" prop="aliyunOSSEndPoint">
|
||||
<Input v-model="formValidate.aliyunOSSEndPoint"/>
|
||||
</FormItem>
|
||||
<FormItem v-if="formValidate.type==='ALI_OSS'" key="aliyunOSSBucketName" label="储存空间" class="label-item" prop="aliyunOSSBucketName">
|
||||
<Input v-model="formValidate.aliyunOSSBucketName"/>
|
||||
</FormItem>
|
||||
<FormItem v-if="formValidate.type==='ALI_OSS'" key="aliyunOSSAccessKeyId" label="密钥id" prop="aliyunOSSAccessKeyId">
|
||||
<Input v-model="formValidate.aliyunOSSAccessKeyId"/>
|
||||
</FormItem>
|
||||
<FormItem v-if="formValidate.type==='ALI_OSS'" key="aliyunOSSAccessKeySecret" label="密钥" prop="aliyunOSSAccessKeySecret">
|
||||
<Input v-model="formValidate.aliyunOSSAccessKeySecret"/>
|
||||
</FormItem>
|
||||
<el-form-item v-if="formValidate.type==='ALI_OSS'" key="aliyunOSSEndPoint" label="节点" prop="aliyunOSSEndPoint">
|
||||
<el-input v-model="formValidate.aliyunOSSEndPoint"/>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="formValidate.type==='ALI_OSS'" key="aliyunOSSBucketName" label="储存空间" class="label-item" prop="aliyunOSSBucketName">
|
||||
<el-input v-model="formValidate.aliyunOSSBucketName"/>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="formValidate.type==='ALI_OSS'" key="aliyunOSSAccessKeyId" label="密钥id" prop="aliyunOSSAccessKeyId">
|
||||
<el-input v-model="formValidate.aliyunOSSAccessKeyId"/>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="formValidate.type==='ALI_OSS'" key="aliyunOSSAccessKeySecret" label="密钥" prop="aliyunOSSAccessKeySecret">
|
||||
<el-input v-model="formValidate.aliyunOSSAccessKeySecret"/>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<!-- MINIO存储-->
|
||||
|
||||
<FormItem v-if="formValidate.type==='MINIO'" label="访问地址" key="m_frontUrl" prop="m_frontUrl">
|
||||
<Input v-model="formValidate.m_frontUrl"/>
|
||||
<el-form-item v-if="formValidate.type==='MINIO'" label="访问地址" key="m_frontUrl" prop="m_frontUrl">
|
||||
<el-input v-model="formValidate.m_frontUrl"/>
|
||||
<span class="desc">配置MINIO nginx前端访问转发地址，一般为完整域名，例如：https://minio.pickmall.cn</span>
|
||||
</FormItem>
|
||||
<FormItem v-if="formValidate.type==='MINIO'" label="endpoint" key="m_endpoint" prop="m_endpoint">
|
||||
<Input v-model="formValidate.m_endpoint"/>
|
||||
</FormItem>
|
||||
<FormItem v-if="formValidate.type==='MINIO'" label="accessKey" key="m_accessKey" class="label-item" prop="m_accessKey">
|
||||
<Input v-model="formValidate.m_accessKey"/>
|
||||
</FormItem>
|
||||
<FormItem v-if="formValidate.type==='MINIO'" label="secretKey" key="m_secretKey" prop="m_secretKey">
|
||||
<Input v-model="formValidate.m_secretKey"/>
|
||||
</FormItem>
|
||||
<FormItem v-if="formValidate.type==='MINIO'" label="bucketName" key="m_bucketName" prop="m_bucketName">
|
||||
<Input v-model="formValidate.m_bucketName"/>
|
||||
</FormItem>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="formValidate.type==='MINIO'" label="endpoint" key="m_endpoint" prop="m_endpoint">
|
||||
<el-input v-model="formValidate.m_endpoint"/>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="formValidate.type==='MINIO'" label="accessKey" key="m_accessKey" class="label-item" prop="m_accessKey">
|
||||
<el-input v-model="formValidate.m_accessKey"/>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="formValidate.type==='MINIO'" label="secretKey" key="m_secretKey" prop="m_secretKey">
|
||||
<el-input v-model="formValidate.m_secretKey"/>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="formValidate.type==='MINIO'" label="bucketName" key="m_bucketName" prop="m_bucketName">
|
||||
<el-input v-model="formValidate.m_bucketName"/>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<!-- 华为云存储-->
|
||||
<FormItem v-if="formValidate.type==='HUAWEI_OBS'" label="发起者的Access Key" key="huaweicloudOBSAccessKey" prop="huaweicloudOBSAccessKey">
|
||||
<Input v-model="formValidate.huaweicloudOBSAccessKey"/>
|
||||
</FormItem>
|
||||
<FormItem v-if="formValidate.type==='HUAWEI_OBS'" label="密钥" class="label-item" key="huaweicloudOBSSecretKey" prop="huaweicloudOBSSecretKey">
|
||||
<Input v-model="formValidate.huaweicloudOBSSecretKey"/>
|
||||
</FormItem>
|
||||
<FormItem v-if="formValidate.type==='HUAWEI_OBS'" label="节点" key="huaweicloudOBSEndPoint" prop="huaweicloudOBSEndPoint">
|
||||
<Input v-model="formValidate.huaweicloudOBSEndPoint"/>
|
||||
</FormItem>
|
||||
<FormItem v-if="formValidate.type==='HUAWEI_OBS'" label="桶" key="huaweicloudOBSBucketName" prop="huaweicloudOBSBucketName">
|
||||
<Input v-model="formValidate.huaweicloudOBSBucketName"/>
|
||||
</FormItem>
|
||||
<el-form-item v-if="formValidate.type==='HUAWEI_OBS'" label="发起者的Access Key" key="huaweicloudOBSAccessKey" prop="huaweicloudOBSAccessKey">
|
||||
<el-input v-model="formValidate.huaweicloudOBSAccessKey"/>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="formValidate.type==='HUAWEI_OBS'" label="密钥" class="label-item" key="huaweicloudOBSSecretKey" prop="huaweicloudOBSSecretKey">
|
||||
<el-input v-model="formValidate.huaweicloudOBSSecretKey"/>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="formValidate.type==='HUAWEI_OBS'" label="节点" key="huaweicloudOBSEndPoint" prop="huaweicloudOBSEndPoint">
|
||||
<el-input v-model="formValidate.huaweicloudOBSEndPoint"/>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="formValidate.type==='HUAWEI_OBS'" label="桶" key="huaweicloudOBSBucketName" prop="huaweicloudOBSBucketName">
|
||||
<el-input v-model="formValidate.huaweicloudOBSBucketName"/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 腾讯云存储-->
|
||||
<FormItem v-if="formValidate.type==='TENCENT_COS'" label="用户的SecretId" key="tencentCOSSecretId" prop="tencentCOSSecretId">
|
||||
<Input v-model="formValidate.tencentCOSSecretId"/>
|
||||
</FormItem>
|
||||
<FormItem v-if="formValidate.type==='TENCENT_COS'" label="用户的SecretKey" key="tencentCOSSecretKey" class="label-item" prop="tencentCOSSecretKey">
|
||||
<Input v-model="formValidate.tencentCOSSecretKey"/>
|
||||
</FormItem>
|
||||
<FormItem v-if="formValidate.type==='TENCENT_COS'" label="bucket的地域" key="tencentCOSRegion" prop="tencentCOSRegion">
|
||||
<Input v-model="formValidate.tencentCOSRegion"/>
|
||||
</FormItem>
|
||||
<FormItem v-if="formValidate.type==='TENCENT_COS'" label="bucket" key="tencentCOSBucket" prop="tencentCOSBucket">
|
||||
<Input v-model="formValidate.tencentCOSBucket"/>
|
||||
</FormItem>
|
||||
<el-form-item v-if="formValidate.type==='TENCENT_COS'" label="用户的SecretId" key="tencentCOSSecretId" prop="tencentCOSSecretId">
|
||||
<el-input v-model="formValidate.tencentCOSSecretId"/>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="formValidate.type==='TENCENT_COS'" label="用户的SecretKey" key="tencentCOSSecretKey" class="label-item" prop="tencentCOSSecretKey">
|
||||
<el-input v-model="formValidate.tencentCOSSecretKey"/>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="formValidate.type==='TENCENT_COS'" label="bucket的地域" key="tencentCOSRegion" prop="tencentCOSRegion">
|
||||
<el-input v-model="formValidate.tencentCOSRegion"/>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="formValidate.type==='TENCENT_COS'" label="bucket" key="tencentCOSBucket" prop="tencentCOSBucket">
|
||||
<el-input v-model="formValidate.tencentCOSBucket"/>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<div class="label-btns">
|
||||
<Button type="primary" @click="submit('formValidate')">保存</Button>
|
||||
<el-button type="primary" @click="submit('formValidate')">保存</el-button>
|
||||
|
||||
</div>
|
||||
</Form>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
@@ -139,7 +139,7 @@ export default {
|
||||
init() {
|
||||
this.result = JSON.parse(this.res);
|
||||
|
||||
this.$set(this, "formValidate", {...this.result});
|
||||
this.formValidate = { ...this.result };
|
||||
Object.keys(this.formValidate).forEach((item) => {
|
||||
this.ruleValidate[item] = [
|
||||
{
|
||||
@@ -161,12 +161,12 @@ export default {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
::v-deep .ivu-input {
|
||||
:deep(.el-input){
|
||||
width: 300px !important;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.ivu-input-wrapper {
|
||||
.el-input {
|
||||
width: 300px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
@@ -1,79 +1,65 @@
|
||||
<template>
|
||||
<div class="layout">
|
||||
<Form ref="formValidate" :label-width="150" label-position="right" :model="formValidate" :rules="ruleValidate">
|
||||
<FormItem label="消费1元赠送积分" prop="consumer">
|
||||
<Input type="number" v-model="formValidate.consumer">
|
||||
<span slot="append">积分</span>
|
||||
</Input>
|
||||
<el-form ref="formValidate" label-width="150px" label-position="right" :model="formValidate" :rules="ruleValidate">
|
||||
<el-form-item label="消费1元赠送积分" prop="consumer">
|
||||
<el-input type="number" v-model="formValidate.consumer">
|
||||
<template #append>积分</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
</FormItem>
|
||||
<!-- <FormItem label="积分抵扣付款" prop="money">
|
||||
<Input type="number" v-model="formValidate.money">
|
||||
<span slot="prepend">积分</span>
|
||||
<span slot="append"> = 1 人民币</span>
|
||||
</Input>
|
||||
<el-form-item label="注册账号" prop="register">
|
||||
<el-input type="number" v-model="formValidate.register">
|
||||
<template #append>积分</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
</FormItem> -->
|
||||
<el-form-item label="每日签到积分" prop="signIn">
|
||||
<el-input type="number" v-model="formValidate.signIn">
|
||||
<template #append>积分</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="订单评价赠送积分" prop="comment">
|
||||
<el-input type="number" v-model="formValidate.comment">
|
||||
<template #append>积分</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<FormItem label="注册账号" prop="register">
|
||||
<Input type="number" v-model="formValidate.register">
|
||||
<span slot="append">积分</span>
|
||||
</Input>
|
||||
</FormItem>
|
||||
<!-- <FormItem label="登录" class="label-item" prop="login">
|
||||
<Input type="number" v-model="formValidate.login">
|
||||
|
||||
<span slot="append">积分</span>
|
||||
</Input>
|
||||
|
||||
</FormItem> -->
|
||||
|
||||
<FormItem label="每日签到积分" prop="signIn">
|
||||
<Input type="number" v-model="formValidate.signIn">
|
||||
<span slot="append">积分</span>
|
||||
</Input>
|
||||
|
||||
</FormItem>
|
||||
<FormItem label="订单评价赠送积分" prop="comment">
|
||||
<Input type="number" v-model="formValidate.comment">
|
||||
<span slot="append">积分</span>
|
||||
</Input>
|
||||
|
||||
</FormItem>
|
||||
|
||||
<FormItem class="label-item" v-for="(point,index) in formValidate.pointSettingItems" :key="index"
|
||||
:label="'签到设置'+(index+1)">
|
||||
<el-form-item
|
||||
class="label-item"
|
||||
v-for="(point, index) in formValidate.pointSettingItems"
|
||||
:key="index"
|
||||
:label="'签到设置' + (index + 1)"
|
||||
>
|
||||
<div class="label-item">
|
||||
|
||||
<InputNumber :min="1" v-model="point.day"></InputNumber>
|
||||
|
||||
<InputNumber :min="0" v-model="point.point"></InputNumber>
|
||||
|
||||
<Button ghost type="error" @click="delSign(point,index)">删除</Button>
|
||||
<span class="ml_10">签到<span class="theme_color">{{ point.day }}</span>天，赠送<span
|
||||
class="theme_color">{{ point.point }}</span>积分</span>
|
||||
<el-input-number :min="1" v-model="point.day" />
|
||||
<el-input-number :min="0" v-model="point.point" />
|
||||
<el-button plain type="danger" @click="delSign(point, index)">删除</el-button>
|
||||
<span class="ml_10"
|
||||
>签到<span class="theme_color">{{ point.day }}</span
|
||||
>天，赠送<span class="theme_color">{{ point.point }}</span
|
||||
>积分</span
|
||||
>
|
||||
</div>
|
||||
|
||||
</FormItem>
|
||||
<FormItem label="操作：">
|
||||
<Button @click="addSign">新增签到</Button>
|
||||
</FormItem>
|
||||
</el-form-item>
|
||||
<el-form-item label="操作：">
|
||||
<el-button @click="addSign">新增签到</el-button>
|
||||
</el-form-item>
|
||||
<div class="label-btns">
|
||||
<Button type="primary" @click="submit('formValidate')">保存</Button>
|
||||
<el-button type="primary" @click="submit('formValidate')">保存</el-button>
|
||||
</div>
|
||||
</Form>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {setSetting} from "@/api/index";
|
||||
import {handleSubmit} from "./validate";
|
||||
import { setSetting } from "@/api/index";
|
||||
import { handleSubmit } from "./validate";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
ruleValidate: {}, // 验证规则
|
||||
formValidate: {}, // 表单数据
|
||||
ruleValidate: {},
|
||||
formValidate: {},
|
||||
result: "",
|
||||
};
|
||||
},
|
||||
@@ -82,14 +68,12 @@ export default {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
// 保存
|
||||
submit(name) {
|
||||
let that = this;
|
||||
const that = this;
|
||||
if (handleSubmit(that, name)) {
|
||||
this.setupSetting();
|
||||
}
|
||||
},
|
||||
// 保存设置
|
||||
setupSetting() {
|
||||
setSetting(this.type, this.formValidate).then((res) => {
|
||||
if (res.success) {
|
||||
@@ -114,7 +98,6 @@ export default {
|
||||
day: this.formValidate.pointSettingItems.length,
|
||||
});
|
||||
},
|
||||
// 实例化数据
|
||||
init() {
|
||||
this.result = JSON.parse(this.res);
|
||||
Object.keys(this.result).map((item) => {
|
||||
@@ -124,7 +107,7 @@ export default {
|
||||
this.result[item] += "";
|
||||
});
|
||||
|
||||
this.$set(this, "formValidate", {...this.result});
|
||||
this.formValidate = { ...this.result };
|
||||
|
||||
Object.keys(this.formValidate).forEach((item) => {
|
||||
this.ruleValidate[item] = [
|
||||
@@ -156,33 +139,33 @@ export default {
|
||||
.label-item {
|
||||
display: flex;
|
||||
|
||||
> .ivu-input-number {
|
||||
> .el-input-number {
|
||||
width: 100px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
> .ivu-input-number:nth-last-of-type(1) {
|
||||
> .el-input-number:nth-last-of-type(1) {
|
||||
width: 150px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
> .ivu-input {
|
||||
> .el-input {
|
||||
width: 100px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .ivu-input {
|
||||
:deep(.el-input){
|
||||
width: 70px !important;
|
||||
}
|
||||
|
||||
.ivu-input-wrapper {
|
||||
.el-input {
|
||||
width: 70px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.label-btns {
|
||||
::v-deep .ivu-btn {
|
||||
:deep(.el-button){
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,80 +1,80 @@
|
||||
<template>
|
||||
<div class="layout">
|
||||
<Form ref="formValidate" :label-width="150" label-position="right" :model="formValidate" :rules="ruleValidate">
|
||||
<FormItem label="是否测试模式" prop="isTestModel">
|
||||
<RadioGroup type="button" button-style="solid" v-model="formValidate.isTestModel">
|
||||
<Radio label="true">开启</Radio>
|
||||
<Radio label="false">关闭</Radio>
|
||||
</RadioGroup>
|
||||
<el-form ref="formValidate" label-width="150px" label-position="right" :model="formValidate" :rules="ruleValidate">
|
||||
<el-form-item label="是否测试模式" prop="isTestModel">
|
||||
<el-radio-group v-model="formValidate.isTestModel">
|
||||
<el-radio-button value="true">开启</el-radio-button>
|
||||
<el-radio-button value="false">关闭</el-radio-button>
|
||||
</el-radio-group>
|
||||
<span class="desc">测试模式则不实际发送短信，短信验证码为：111111</span>
|
||||
</FormItem>
|
||||
<FormItem label="登录短信模板CODE" prop="loginTemplateCode">
|
||||
<Input v-model="formValidate.loginTemplateCode"/>
|
||||
</FormItem>
|
||||
<FormItem label="注册短信模板CODE" prop="registerTemplateCode">
|
||||
<Input v-model="formValidate.registerTemplateCode"/>
|
||||
</FormItem>
|
||||
<FormItem label="找回密码短信模板CODE" prop="findPasswordTemplateCode">
|
||||
<Input v-model="formValidate.findPasswordTemplateCode"/>
|
||||
</FormItem>
|
||||
<FormItem label="设置密码短信模板CODE" prop="walletPasswordTemplateCode">
|
||||
<Input v-model="formValidate.walletPasswordTemplateCode"/>
|
||||
</FormItem>
|
||||
<FormItem label="支付密码短信模板CODE" prop="payPasswordTemplateCode">
|
||||
<Input v-model="formValidate.payPasswordTemplateCode"/>
|
||||
</FormItem>
|
||||
</el-form-item>
|
||||
<el-form-item label="登录短信模板CODE" prop="loginTemplateCode">
|
||||
<el-input v-model="formValidate.loginTemplateCode"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="注册短信模板CODE" prop="registerTemplateCode">
|
||||
<el-input v-model="formValidate.registerTemplateCode"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="找回密码短信模板CODE" prop="findPasswordTemplateCode">
|
||||
<el-input v-model="formValidate.findPasswordTemplateCode"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="设置密码短信模板CODE" prop="walletPasswordTemplateCode">
|
||||
<el-input v-model="formValidate.walletPasswordTemplateCode"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="支付密码短信模板CODE" prop="payPasswordTemplateCode">
|
||||
<el-input v-model="formValidate.payPasswordTemplateCode"/>
|
||||
</el-form-item>
|
||||
|
||||
<FormItem label="平台" prop="endPoint">
|
||||
<RadioGroup v-model="formValidate.type" type="button">
|
||||
<Radio label="ALI">阿里云</Radio>
|
||||
<Radio label="HUAWEI">华为云</Radio>
|
||||
<Radio label="TENCENT">腾讯云</Radio>
|
||||
</RadioGroup>
|
||||
</FormItem>
|
||||
<el-form-item label="平台" prop="endPoint">
|
||||
<el-radio-group v-model="formValidate.type">
|
||||
<el-radio-button value="ALI">阿里云</el-radio-button>
|
||||
<el-radio-button value="HUAWEI">华为云</el-radio-button>
|
||||
<el-radio-button value="TENCENT">腾讯云</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<!-- 阿里云-->
|
||||
<FormItem v-if="formValidate.type==='ALI'" label="accessKeyId" prop="accessKeyId">
|
||||
<Input v-model="formValidate.accessKeyId"/>
|
||||
</FormItem>
|
||||
<FormItem v-if="formValidate.type==='ALI'" label="accessSecret" prop="accessSecret">
|
||||
<Input v-model="formValidate.accessSecret"/>
|
||||
</FormItem>
|
||||
<FormItem v-if="formValidate.type==='ALI'" label="短信签名" prop="signName">
|
||||
<Input v-model="formValidate.signName"/>
|
||||
</FormItem>
|
||||
<el-form-item v-if="formValidate.type==='ALI'" label="accessKeyId" prop="accessKeyId">
|
||||
<el-input v-model="formValidate.accessKeyId"/>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="formValidate.type==='ALI'" label="accessSecret" prop="accessSecret">
|
||||
<el-input v-model="formValidate.accessSecret"/>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="formValidate.type==='ALI'" label="短信签名" prop="signName">
|
||||
<el-input v-model="formValidate.signName"/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 华为云-->
|
||||
<FormItem v-if="formValidate.type==='HUAWEI'" label="APP_Key" prop="huaweiAppKey">
|
||||
<Input v-model="formValidate.huaweiAppKey"/>
|
||||
</FormItem>
|
||||
<FormItem v-if="formValidate.type==='HUAWEI'" label="APP_Secret" prop="huaweiAppSecret">
|
||||
<Input v-model="formValidate.huaweiAppSecret"/>
|
||||
</FormItem>
|
||||
<FormItem v-if="formValidate.type==='HUAWEI'" label="短信签名通道号" prop="huaweiSender">
|
||||
<Input v-model="formValidate.huaweiSender"/>
|
||||
</FormItem>
|
||||
<FormItem v-if="formValidate.type==='HUAWEI'" label="短信签名" prop="huaweiSignature">
|
||||
<Input v-model="formValidate.huaweiSignature"/>
|
||||
</FormItem>
|
||||
<el-form-item v-if="formValidate.type==='HUAWEI'" label="APP_Key" prop="huaweiAppKey">
|
||||
<el-input v-model="formValidate.huaweiAppKey"/>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="formValidate.type==='HUAWEI'" label="APP_Secret" prop="huaweiAppSecret">
|
||||
<el-input v-model="formValidate.huaweiAppSecret"/>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="formValidate.type==='HUAWEI'" label="短信签名通道号" prop="huaweiSender">
|
||||
<el-input v-model="formValidate.huaweiSender"/>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="formValidate.type==='HUAWEI'" label="短信签名" prop="huaweiSignature">
|
||||
<el-input v-model="formValidate.huaweiSignature"/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 腾讯云-->
|
||||
<FormItem v-if="formValidate.type==='TENCENT'" label="用户的 SecretId" prop="tencentSecretId">
|
||||
<Input v-model="formValidate.tencentSecretId"/>
|
||||
</FormItem>
|
||||
<FormItem v-if="formValidate.type==='TENCENT'" label="用户的 SecretKey" prop="tencentSecretKey">
|
||||
<Input v-model="formValidate.tencentSecretKey"/>
|
||||
</FormItem>
|
||||
<FormItem v-if="formValidate.type==='TENCENT'" label="短信应用ID" prop="tencentSdkAppId">
|
||||
<Input v-model="formValidate.tencentSdkAppId"/>
|
||||
</FormItem>
|
||||
<FormItem v-if="formValidate.type==='TENCENT'" label="短信签名" prop="tencentSignName">
|
||||
<Input v-model="formValidate.tencentSignName"/>
|
||||
</FormItem>
|
||||
<el-form-item v-if="formValidate.type==='TENCENT'" label="用户的 SecretId" prop="tencentSecretId">
|
||||
<el-input v-model="formValidate.tencentSecretId"/>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="formValidate.type==='TENCENT'" label="用户的 SecretKey" prop="tencentSecretKey">
|
||||
<el-input v-model="formValidate.tencentSecretKey"/>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="formValidate.type==='TENCENT'" label="短信应用ID" prop="tencentSdkAppId">
|
||||
<el-input v-model="formValidate.tencentSdkAppId"/>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="formValidate.type==='TENCENT'" label="短信签名" prop="tencentSignName">
|
||||
<el-input v-model="formValidate.tencentSignName"/>
|
||||
</el-form-item>
|
||||
|
||||
<div class="label-btns">
|
||||
<Button type="primary" @click="submit('formValidate')">保存</Button>
|
||||
<el-button type="primary" @click="submit('formValidate')">保存</el-button>
|
||||
|
||||
</div>
|
||||
</Form>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
@@ -138,7 +138,7 @@ export default {
|
||||
this.result[item] += "";
|
||||
});
|
||||
|
||||
this.$set(this, "formValidate", {...this.result});
|
||||
this.formValidate = { ...this.result };
|
||||
Object.keys(this.formValidate).forEach((item) => {
|
||||
this.ruleValidate[item] = [
|
||||
{
|
||||
@@ -160,12 +160,12 @@ export default {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
::v-deep .ivu-input {
|
||||
:deep(.el-input){
|
||||
width: 300px !important;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.ivu-input-wrapper {
|
||||
.el-input {
|
||||
width: 300px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
@@ -1,32 +1,29 @@
|
||||
<template>
|
||||
<div class="layout">
|
||||
<el-form ref="formValidate" label-width="150px" label-position="right" :model="formValidate" :rules="ruleValidate">
|
||||
<el-form-item label="提现审核是否开启">
|
||||
<el-switch v-model="formValidate.apply" active-text="开" inactive-text="关" />
|
||||
</el-form-item>
|
||||
|
||||
<Form ref="formValidate" :label-width="150" label-position="right" :model="formValidate" :rules="ruleValidate">
|
||||
<FormItem label="提现审核是否开启">
|
||||
<i-switch v-model="formValidate.apply" style="margin-top:7px;"><span slot="open">开</span>
|
||||
<span slot="close">关</span>
|
||||
</i-switch>
|
||||
</FormItem>
|
||||
<el-form-item label="最低提现金额" prop="minPrice">
|
||||
￥<el-input class="label-appkey" v-model="formValidate.minPrice" />
|
||||
</el-form-item>
|
||||
|
||||
<FormItem label="最低提现金额" prop="minPrice">
|
||||
￥<Input class="label-appkey" v-model="formValidate.minPrice" />
|
||||
</FormItem>
|
||||
<el-form-item label="提现方式" prop="type">
|
||||
<el-radio-group v-model="formValidate.type">
|
||||
<el-radio value="WECHAT">微信</el-radio>
|
||||
<el-radio value="ALI">支付宝</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<FormItem label="提现方式" prop="type">
|
||||
<RadioGroup v-model="formValidate.type">
|
||||
<Radio label="WECHAT">微信</Radio>
|
||||
<Radio label="ALI">支付宝</Radio>
|
||||
</RadioGroup>
|
||||
</FormItem>
|
||||
|
||||
<FormItem label="微信提现应用ID" prop="wechatAppId">
|
||||
<Input class="label-appkey" v-model="formValidate.wechatAppId" />
|
||||
</FormItem>
|
||||
<el-form-item label="微信提现应用ID" prop="wechatAppId">
|
||||
<el-input class="label-appkey" v-model="formValidate.wechatAppId" />
|
||||
</el-form-item>
|
||||
|
||||
<div class="label-btns">
|
||||
<Button type="primary" @click="submit('formValidate')">保存</Button>
|
||||
<el-button type="primary" @click="submit('formValidate')">保存</el-button>
|
||||
</div>
|
||||
</Form>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
@@ -35,11 +32,10 @@ import { handleSubmit } from "./validate";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
result:"",
|
||||
ruleValidate: {}, // 验证规则
|
||||
formValidate: {},// 表单数据
|
||||
|
||||
switchTitle: "提现审核是否开启", // 切换title
|
||||
result: "",
|
||||
ruleValidate: {},
|
||||
formValidate: {},
|
||||
switchTitle: "提现审核是否开启",
|
||||
};
|
||||
},
|
||||
created() {
|
||||
@@ -47,16 +43,13 @@ export default {
|
||||
},
|
||||
props: ["res", "type"],
|
||||
methods: {
|
||||
// 保存
|
||||
submit(name) {
|
||||
let that = this;
|
||||
if( handleSubmit(that, name )){
|
||||
this.setupSetting()
|
||||
const that = this;
|
||||
if (handleSubmit(that, name)) {
|
||||
this.setupSetting();
|
||||
}
|
||||
},
|
||||
// 保存设置
|
||||
setupSetting() {
|
||||
|
||||
setSetting(this.type, this.formValidate).then((res) => {
|
||||
if (res.success) {
|
||||
this.$Message.success("保存成功!");
|
||||
@@ -65,13 +58,12 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
// 实例化数据
|
||||
init() {
|
||||
this.result = JSON.parse(this.res);
|
||||
Object.keys(this.result).map((item) => {
|
||||
this.result[item] += "";
|
||||
});
|
||||
this.$set(this, "formValidate", { ...this.result });
|
||||
this.formValidate = { ...this.result };
|
||||
Object.keys(this.formValidate).forEach((item) => {
|
||||
this.ruleValidate[item] = [
|
||||
{
|
||||
@@ -98,7 +90,7 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "./style.scss";
|
||||
::v-deep .ivu-form-item-content{
|
||||
:deep(.el-form-item__content){
|
||||
align-items: center;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
::v-deep .ivu-input{
|
||||
:deep(.el-input){
|
||||
width: 200px !important;
|
||||
}
|
||||
|
||||
@@ -15,16 +15,16 @@
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
::v-deep .label-btns > .ivu-btn{
|
||||
:deep(.label-btns > .el-button){
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
::v-deep .es-buttons .ivu-btn{
|
||||
:deep(.es-buttons .el-button){
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.ivu-form-item{
|
||||
.el-form-item{
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
@@ -34,12 +34,12 @@
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.ivu-input-wrapper {
|
||||
.el-input {
|
||||
width: 150px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
::v-deep .ivu-form-item-content {
|
||||
:deep(.el-form-item__content){
|
||||
margin-left: 0 !important;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@@ -1,16 +1,25 @@
|
||||
|
||||
<template>
|
||||
<Card v-if="show">
|
||||
<Tabs v-model="selected" @on-click="clickTab">
|
||||
<TabPane :label="tabItem.name" :name="tabItem.type" v-for="(tabItem, tabIndex) in tabWay" :key="tabIndex">
|
||||
<component v-if="settingData" :res="settingData" :type="selected"
|
||||
:is="templateSetting[tabItem.type]"></component>
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
</Card>
|
||||
<el-card v-if="show">
|
||||
<el-tabs v-model="selected" @tab-change="clickTab">
|
||||
<el-tab-pane
|
||||
v-for="(tabItem, tabIndex) in tabWay"
|
||||
:key="tabIndex"
|
||||
:label="tabItem.name"
|
||||
:name="tabItem.type"
|
||||
>
|
||||
<component
|
||||
v-if="settingData"
|
||||
:is="templateSetting[tabItem.type]"
|
||||
:res="settingData"
|
||||
:type="selected"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</template>
|
||||
<script>
|
||||
import {getSetting} from "@/api/index.js";
|
||||
import { getSetting } from "@/api/index.js";
|
||||
import templateSetting from "./template";
|
||||
|
||||
export default {
|
||||
@@ -37,7 +46,7 @@ export default {
|
||||
name: "订单配置",
|
||||
},
|
||||
//积分设置
|
||||
{type: "POINT_SETTING", name: "积分设置"},
|
||||
{ type: "POINT_SETTING", name: "积分设置" },
|
||||
{
|
||||
type: "WITHDRAWAL_SETTING",
|
||||
name: "提现设置",
|
||||
@@ -65,19 +74,19 @@ export default {
|
||||
],
|
||||
authLogin: [
|
||||
// 登录设置
|
||||
{type: "CONNECT_SETTING", name: "登录设置"},
|
||||
{ type: "CONNECT_SETTING", name: "登录设置" },
|
||||
// 微信设置
|
||||
{type: "WECHAT_CONNECT", name: "微信设置"},
|
||||
{ type: "WECHAT_CONNECT", name: "微信设置" },
|
||||
// QQ设置
|
||||
{type: "QQ_CONNECT", name: "QQ设置"},
|
||||
{ type: "QQ_CONNECT", name: "QQ设置" },
|
||||
],
|
||||
pay: [
|
||||
//支付宝支付设置
|
||||
{type: "PAYMENT_SUPPORT", name: "支付开启/关闭"},
|
||||
{ type: "PAYMENT_SUPPORT", name: "支付开启/关闭" },
|
||||
//支付宝支付设置
|
||||
{type: "ALIPAY_PAYMENT", name: "支付宝支付设置"},
|
||||
{ type: "ALIPAY_PAYMENT", name: "支付宝支付设置" },
|
||||
//微信支付设置
|
||||
{type: "WECHAT_PAYMENT", name: "微信支付设置"},
|
||||
{ type: "WECHAT_PAYMENT", name: "微信支付设置" },
|
||||
],
|
||||
tabWay: [], // tab数据
|
||||
};
|
||||
|
||||
@@ -1,154 +1,141 @@
|
||||
|
||||
<template>
|
||||
<Card class="card">
|
||||
|
||||
<el-card class="card">
|
||||
<div class="cardBox">
|
||||
<div class="methodItem">
|
||||
<img src="../../../assets/aliyun.png" height="172" width="440"/>
|
||||
<h4>阿里云短信</h4></div>
|
||||
<img src="../../../assets/aliyun.png" height="172" width="440" />
|
||||
<h4>阿里云短信</h4>
|
||||
</div>
|
||||
<div class="bar">
|
||||
<div class="status" style="color: rgb(53, 189, 129);">已启用</div>
|
||||
<div class="status" style="color: rgb(53, 189, 129)">已启用</div>
|
||||
<div><a class="links">编辑</a></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 阿里云的短信参数 -->
|
||||
<Modal
|
||||
:title="modalTitle"
|
||||
v-model="modalVisible"
|
||||
:mask-closable="false"
|
||||
:width="500"
|
||||
>
|
||||
<Form ref="form" :model="form" :label-width="100" :rules="formValidate">
|
||||
<FormItem label="accessKeyId" prop="addressName">
|
||||
<Input v-model="form.accessKeyId" clearable style="width: 100%"/>
|
||||
</FormItem>
|
||||
<FormItem label="accessSecret" prop="accessSecret">
|
||||
<Input v-model="form.accessSecret" clearable style="width: 100%"/>
|
||||
</FormItem>
|
||||
<FormItem label="signName" prop="signName">
|
||||
<Input v-model="form.signName" clearable style="width: 100%"/>
|
||||
</FormItem>
|
||||
</Form>
|
||||
<div slot="footer">
|
||||
<Button type="text" @click="modalVisible = false">取消</Button>
|
||||
<Button type="primary" :loading="submitLoading" @click="saveSetting"
|
||||
>提交
|
||||
</Button
|
||||
>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
</Card>
|
||||
<el-dialog v-model="modalVisible" :title="modalTitle" width="500px" :close-on-click-modal="false">
|
||||
<el-form ref="form" :model="form" label-width="100px" :rules="formValidate">
|
||||
<el-form-item label="accessKeyId" prop="addressName">
|
||||
<el-input v-model="form.accessKeyId" clearable style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="accessSecret" prop="accessSecret">
|
||||
<el-input v-model="form.accessSecret" clearable style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="signName" prop="signName">
|
||||
<el-input v-model="form.signName" clearable style="width: 100%" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="modalVisible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="submitLoading" @click="saveSetting">提交</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</el-card>
|
||||
</template>
|
||||
<script>
|
||||
import {getSetting, setSetting} from "@/api/index.js";
|
||||
import template from "./template";
|
||||
export default {
|
||||
name: "smsSettingManage",
|
||||
components: {
|
||||
template
|
||||
},
|
||||
import { getSetting, setSetting } from "@/api/index.js";
|
||||
import template from "./template";
|
||||
export default {
|
||||
name: "smsSettingManage",
|
||||
components: {
|
||||
template,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
submitLoading: false, // 提交状态
|
||||
template, // 模板
|
||||
selected: "", // 已选数据
|
||||
settingData: "", // 设置数据
|
||||
modalTitle: '设置', // modal标题
|
||||
modalVisible: false, // modal显隐
|
||||
form: {}, // 表单数据
|
||||
}
|
||||
data() {
|
||||
return {
|
||||
submitLoading: false,
|
||||
template,
|
||||
selected: "",
|
||||
settingData: "",
|
||||
modalTitle: "设置",
|
||||
modalVisible: false,
|
||||
form: {},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
settingInfo("SMS_SETTING");
|
||||
},
|
||||
methods: {
|
||||
// 初始化数据
|
||||
init() {
|
||||
settingInfo("SMS_SETTING")
|
||||
},
|
||||
// 保存设置
|
||||
saveSetting() {
|
||||
setSetting("SMS_SETTING", this.form).then((res) => {
|
||||
if (res.success) {
|
||||
this.$Message.success("保存成功!");
|
||||
} else {
|
||||
this.$Message.error("保存失败!");
|
||||
}
|
||||
this.modalVisible = false
|
||||
});
|
||||
},
|
||||
// 查看
|
||||
settingInfo(v) {
|
||||
alert()
|
||||
this.selected = v
|
||||
getSetting(v).then((res) => {
|
||||
if (res.result) {
|
||||
console.log(res)
|
||||
this.modalVisible = true
|
||||
this.form = res
|
||||
}
|
||||
});
|
||||
}
|
||||
saveSetting() {
|
||||
setSetting("SMS_SETTING", this.form).then((res) => {
|
||||
if (res.success) {
|
||||
this.$Message.success("保存成功!");
|
||||
} else {
|
||||
this.$Message.error("保存失败!");
|
||||
}
|
||||
this.modalVisible = false;
|
||||
});
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
settingInfo(v) {
|
||||
alert();
|
||||
this.selected = v;
|
||||
getSetting(v).then((res) => {
|
||||
if (res.result) {
|
||||
console.log(res);
|
||||
this.modalVisible = true;
|
||||
this.form = res;
|
||||
}
|
||||
});
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
}
|
||||
.cardBox {
|
||||
display: inline-block;
|
||||
border-radius: 2px;
|
||||
line-height: 1.5;
|
||||
margin-right: 20px;
|
||||
width: 300px;
|
||||
border: 1px solid #eee;
|
||||
padding: 10px;
|
||||
}
|
||||
.card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
}
|
||||
.cardBox {
|
||||
display: inline-block;
|
||||
border-radius: 2px;
|
||||
line-height: 1.5;
|
||||
margin-right: 20px;
|
||||
width: 300px;
|
||||
border: 1px solid #eee;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.methodItem {
|
||||
width: 100%;
|
||||
border: 1px solid #f5f5f5;
|
||||
text-align: center;
|
||||
padding: 20px 0;
|
||||
}
|
||||
.methodItem {
|
||||
width: 100%;
|
||||
border: 1px solid #f5f5f5;
|
||||
text-align: center;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
methodItem img {
|
||||
width: 220px;
|
||||
height: 86px;
|
||||
}
|
||||
methodItem img {
|
||||
width: 220px;
|
||||
height: 86px;
|
||||
}
|
||||
|
||||
methodItem h4 {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
margin-top: 5px;
|
||||
}
|
||||
methodItem h4 {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.methodItem img {
|
||||
width: 220px;
|
||||
height: 86px;
|
||||
}
|
||||
.methodItem img {
|
||||
width: 220px;
|
||||
height: 86px;
|
||||
}
|
||||
|
||||
.bar {
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: justify;
|
||||
-webkit-justify-content: space-between;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
padding: 10px 8px 0;
|
||||
}
|
||||
.bar {
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: justify;
|
||||
-webkit-justify-content: space-between;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
padding: 10px 8px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { markRaw } from "vue";
|
||||
import BASE_SETTING from "./setting/BASE_SETTING";
|
||||
import GOODS_SETTING from "./setting/GOODS_SETTING";
|
||||
import ORDER_SETTING from "./setting/ORDER_SETTING";
|
||||
@@ -15,19 +16,19 @@ import QQ_CONNECT from "./authLogin/QQ_CONNECT";
|
||||
import CONNECT_SETTING from "./authLogin/CONNECT_SETTING";
|
||||
|
||||
export default {
|
||||
BASE_SETTING,
|
||||
GOODS_SETTING,
|
||||
ORDER_SETTING,
|
||||
POINT_SETTING,
|
||||
LOGISTICS_SETTING,
|
||||
OSS_SETTING,
|
||||
SMS_SETTING,
|
||||
IM_SETTING,
|
||||
WITHDRAWAL_SETTING,
|
||||
PAYMENT_SUPPORT,
|
||||
WECHAT_PAYMENT,
|
||||
ALIPAY_PAYMENT,
|
||||
WECHAT_CONNECT,
|
||||
CONNECT_SETTING,
|
||||
QQ_CONNECT
|
||||
BASE_SETTING: markRaw(BASE_SETTING),
|
||||
GOODS_SETTING: markRaw(GOODS_SETTING),
|
||||
ORDER_SETTING: markRaw(ORDER_SETTING),
|
||||
POINT_SETTING: markRaw(POINT_SETTING),
|
||||
LOGISTICS_SETTING: markRaw(LOGISTICS_SETTING),
|
||||
OSS_SETTING: markRaw(OSS_SETTING),
|
||||
SMS_SETTING: markRaw(SMS_SETTING),
|
||||
IM_SETTING: markRaw(IM_SETTING),
|
||||
WITHDRAWAL_SETTING: markRaw(WITHDRAWAL_SETTING),
|
||||
PAYMENT_SUPPORT: markRaw(PAYMENT_SUPPORT),
|
||||
WECHAT_PAYMENT: markRaw(WECHAT_PAYMENT),
|
||||
ALIPAY_PAYMENT: markRaw(ALIPAY_PAYMENT),
|
||||
WECHAT_CONNECT: markRaw(WECHAT_CONNECT),
|
||||
CONNECT_SETTING: markRaw(CONNECT_SETTING),
|
||||
QQ_CONNECT: markRaw(QQ_CONNECT),
|
||||
};
|
||||
|
||||
@@ -1,137 +1,128 @@
|
||||
<template>
|
||||
<div class="search">
|
||||
<Card>
|
||||
<Tabs value="RESOURCE" @on-click="handleClickType">
|
||||
<TabPane label="图片源" name="RESOURCE">
|
||||
<Row class="operation" style="margin-bottom: 10px">
|
||||
<Button @click="add" type="primary">添加</Button>
|
||||
</Row>
|
||||
<Table
|
||||
:loading="loading"
|
||||
border
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
ref="table"
|
||||
sortable="custom"
|
||||
>
|
||||
<!-- 商品栏目格式化 -->
|
||||
<template slot="imageSlot" slot-scope="scope">
|
||||
<div style="">
|
||||
<img
|
||||
:src="scope.row.resource"
|
||||
style="height: 60px; margin-top: 1px; width: 90px"
|
||||
/>
|
||||
</div>
|
||||
<el-card>
|
||||
<el-tabs v-model="searchForm.type" @tab-click="handleClickType">
|
||||
<el-tab-pane label="图片源" name="RESOURCE">
|
||||
<div class="operation" style="margin-bottom: 10px">
|
||||
<el-button type="primary" @click="add">添加</el-button>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="滑块源" name="SLIDER">
|
||||
<div class="operation" style="margin-bottom: 10px">
|
||||
<el-button type="primary" @click="add">添加</el-button>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
<el-table
|
||||
ref="table"
|
||||
v-loading="loading"
|
||||
border
|
||||
:data="data"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column prop="name" label="名称" min-width="80" />
|
||||
<el-table-column label="图片" width="150" align="center">
|
||||
<template #default="{ row }">
|
||||
<img
|
||||
v-if="row && row.resource"
|
||||
:src="row.resource"
|
||||
:style="{
|
||||
height: '60px',
|
||||
marginTop: '1px',
|
||||
width: searchForm.type === 'RESOURCE' ? '90px' : '60px',
|
||||
}"
|
||||
alt=""
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createBy" label="创建人" min-width="80" />
|
||||
<el-table-column prop="createTime" label="创建时间" min-width="120" />
|
||||
<el-table-column prop="updateBy" label="最后修改人" min-width="80" />
|
||||
<el-table-column prop="updateTime" label="更新时间" min-width="120" />
|
||||
<el-table-column label="操作" width="200" align="center">
|
||||
<template #default="{ row }">
|
||||
<template v-if="row">
|
||||
<a class="link-text" @click="edit(row)">编辑</a>
|
||||
<span class="op-split">|</span>|<span class="op-split">|</span>
|
||||
<a class="link-text" @click="remove(row)">删除</a>
|
||||
</template>
|
||||
</Table>
|
||||
<Row type="flex" justify="end" class="mt_10">
|
||||
<Page
|
||||
:current="searchForm.pageNumber"
|
||||
:total="total"
|
||||
:page-size="searchForm.pageSize"
|
||||
@on-change="changePage"
|
||||
@on-page-size-change="changePageSize"
|
||||
:page-size-opts="[20, 50, 100]"
|
||||
size="small"
|
||||
show-total
|
||||
show-elevator
|
||||
show-sizer
|
||||
>
|
||||
</Page>
|
||||
</Row>
|
||||
</TabPane>
|
||||
<TabPane label="滑块源" name="SLIDER">
|
||||
<Row class="operation" style="margin-bottom: 10px">
|
||||
<Button @click="add" type="primary" icon="md-add">添加</Button>
|
||||
</Row>
|
||||
<Table
|
||||
:loading="loading"
|
||||
border
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
ref="table"
|
||||
sortable="custom"
|
||||
>
|
||||
<!-- 商品栏目格式化 -->
|
||||
<template slot="imageSlot" slot-scope="scope">
|
||||
<div style="">
|
||||
<img
|
||||
:src="scope.row.resource"
|
||||
style="height: 60px; margin-top: 1px; width: 60px"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</Table>
|
||||
<Row type="flex" justify="end" class="mt_10">
|
||||
<Page
|
||||
:current="searchForm.pageNumber"
|
||||
:total="total"
|
||||
:page-size="searchForm.pageSize"
|
||||
@on-change="changePage"
|
||||
@on-page-size-change="changePageSize"
|
||||
:page-size-opts="[20, 50, 100]"
|
||||
size="small"
|
||||
show-total
|
||||
show-elevator
|
||||
show-sizer
|
||||
></Page>
|
||||
</Row>
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
</Card>
|
||||
<Modal
|
||||
:title="modalTitle"
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="mt_10" style="display: flex; justify-content: flex-end">
|
||||
<el-pagination
|
||||
v-model:current-page="searchForm.pageNumber"
|
||||
v-model:page-size="searchForm.pageSize"
|
||||
:page-sizes="[20, 50, 100]"
|
||||
:total="total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
size="small"
|
||||
@current-change="changePage"
|
||||
@size-change="changePageSize"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-dialog
|
||||
v-model="modalVisible"
|
||||
:mask-closable="false"
|
||||
:width="500"
|
||||
:title="modalTitle"
|
||||
width="500px"
|
||||
:close-on-click-modal="false"
|
||||
destroy-on-close
|
||||
>
|
||||
<Form ref="form" :model="form" :label-width="100" :rules="formValidate">
|
||||
<FormItem label="名称" prop="name">
|
||||
<Input
|
||||
<el-form ref="form" :model="form" :rules="formValidate" label-width="100px">
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input
|
||||
v-model="form.name"
|
||||
maxlength="20"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem label="图片" prop="resource">
|
||||
<upload-pic-input v-model="form.resource" style="width: 100%"></upload-pic-input>
|
||||
</FormItem>
|
||||
<FormItem label="类型" prop="type">
|
||||
<radio-group v-model="form.type" type="button">
|
||||
<radio label="RESOURCE">图片源</radio>
|
||||
<radio label="SLIDER">滑块源</radio>
|
||||
</radio-group>
|
||||
</FormItem>
|
||||
</Form>
|
||||
<div slot="footer">
|
||||
<Button type="text" @click="modalVisible = false">取消</Button>
|
||||
<Button type="primary" :loading="submitLoading" @click="handleSubmit"
|
||||
>提交
|
||||
</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
</el-form-item>
|
||||
<el-form-item label="图片" prop="resource">
|
||||
<upload-pic-input v-model="form.resource" style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-radio-group v-model="form.type">
|
||||
<el-radio-button value="RESOURCE">图片源</el-radio-button>
|
||||
<el-radio-button value="SLIDER">滑块源</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="modalVisible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="submitLoading" @click="handleSubmit">
|
||||
提交
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as API_Setting from "@/api/setting";
|
||||
import uploadPicInput from "@/components/lili/upload-pic-input";
|
||||
|
||||
const defaultForm = () => ({
|
||||
name: "",
|
||||
resource: "",
|
||||
type: "RESOURCE",
|
||||
});
|
||||
|
||||
export default {
|
||||
components: {
|
||||
uploadPicInput
|
||||
uploadPicInput,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
modalVisible: false, //添加验证码源弹出框
|
||||
modalTitle: "", //添加验证码源弹出框标题
|
||||
loading: true, // 表单加载状态
|
||||
modalType: 0, // 添加或编辑标识
|
||||
submitLoading: false, // 添加或编辑提交状态
|
||||
form: {
|
||||
name: "",
|
||||
resource: "",
|
||||
type: "RESOURCE",
|
||||
}, //添加编辑表单
|
||||
modalVisible: false,
|
||||
modalTitle: "",
|
||||
loading: true,
|
||||
modalType: 0,
|
||||
submitLoading: false,
|
||||
form: defaultForm(),
|
||||
formValidate: {
|
||||
name: [
|
||||
{
|
||||
@@ -149,127 +140,30 @@ export default {
|
||||
],
|
||||
},
|
||||
searchForm: {
|
||||
// 搜索框初始化对象
|
||||
pageNumber: 1, // 当前页数
|
||||
pageSize: 20, // 页面大小
|
||||
sort: "createTime", // 默认排序字段
|
||||
order: "desc", // 默认排序方式
|
||||
pageNumber: 1,
|
||||
pageSize: 20,
|
||||
sort: "createTime",
|
||||
order: "desc",
|
||||
type: "RESOURCE",
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
title: "名称",
|
||||
key: "name",
|
||||
minWidth: 80,
|
||||
},
|
||||
{
|
||||
title: "图片",
|
||||
key: "resource",
|
||||
width: 150,
|
||||
slot: "imageSlot",
|
||||
},
|
||||
{
|
||||
title: "创建人",
|
||||
key: "createBy",
|
||||
minWidth: 80,
|
||||
},
|
||||
{
|
||||
title: "创建时间",
|
||||
key: "createTime",
|
||||
minWidth: 120,
|
||||
},
|
||||
{
|
||||
title: "最后修改人",
|
||||
key: "updateBy",
|
||||
minWidth: 80,
|
||||
},
|
||||
{
|
||||
title: "更新时间",
|
||||
key: "updateTime",
|
||||
minWidth: 120,
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
key: "action",
|
||||
align: "center",
|
||||
width: 200,
|
||||
render: (h, params) => {
|
||||
return h("div", [
|
||||
h(
|
||||
"a",
|
||||
{
|
||||
style: {
|
||||
color: "#2d8cf0",
|
||||
cursor: "pointer",
|
||||
textDecoration: "none",
|
||||
marginRight: "5px",
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.edit(params.row);
|
||||
},
|
||||
},
|
||||
},
|
||||
"编辑"
|
||||
),
|
||||
h(
|
||||
"span",
|
||||
{ style: { margin: "0 8px", color: "#dcdee2" } },
|
||||
"|"
|
||||
),
|
||||
h(
|
||||
"a",
|
||||
{
|
||||
style: {
|
||||
color: "#2d8cf0",
|
||||
cursor: "pointer",
|
||||
textDecoration: "none",
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.remove(params.row);
|
||||
},
|
||||
},
|
||||
},
|
||||
"删除"
|
||||
),
|
||||
]);
|
||||
},
|
||||
},
|
||||
],
|
||||
data: [], // 表单数据
|
||||
total: 0, //条数
|
||||
data: [],
|
||||
total: 0,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 分页 改变页码
|
||||
changePage(v) {
|
||||
this.searchForm.pageNumber = v;
|
||||
changePage() {
|
||||
this.getDataList();
|
||||
this.clearSelectAll();
|
||||
},
|
||||
// 分页 改变页数
|
||||
changePageSize(v) {
|
||||
changePageSize() {
|
||||
this.searchForm.pageNumber = 1;
|
||||
this.searchForm.pageSize = v;
|
||||
this.getDataList();
|
||||
},
|
||||
//切换tab
|
||||
handleClickType(v) {
|
||||
this.searchForm.pageNumber = 1; // 当前页数
|
||||
this.searchForm.pageSize = 20; // 页面大小
|
||||
//图片源
|
||||
if (v == "RESOURCE") {
|
||||
this.searchForm.type = "RESOURCE";
|
||||
}
|
||||
//滑块源
|
||||
if (v == "SLIDER") {
|
||||
this.searchForm.type = "SLIDER";
|
||||
}
|
||||
handleClickType(tab) {
|
||||
this.searchForm.type = tab.paneName;
|
||||
this.searchForm.pageNumber = 1;
|
||||
this.searchForm.pageSize = 20;
|
||||
this.getDataList();
|
||||
},
|
||||
//获取验证码源数据
|
||||
getDataList() {
|
||||
this.loading = true;
|
||||
API_Setting.verificationPage(this.searchForm).then((res) => {
|
||||
@@ -279,71 +173,62 @@ export default {
|
||||
this.total = res.result.total;
|
||||
}
|
||||
});
|
||||
this.loading = false;
|
||||
},
|
||||
//添加验证码源
|
||||
add() {
|
||||
this.$refs.form.resetFields()
|
||||
this.form = defaultForm();
|
||||
this.form.type = this.searchForm.type;
|
||||
this.modalVisible = true;
|
||||
this.modalType = 0;
|
||||
this.modalTitle = "添加验证码源";
|
||||
this.modalVisible = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.form?.resetFields();
|
||||
});
|
||||
},
|
||||
//修改验证码源
|
||||
edit(v) {
|
||||
this.form.name = v.name;
|
||||
this.form.id = v.id;
|
||||
this.form.resource = v.resource;
|
||||
this.form.type = v.type;
|
||||
|
||||
this.form = {
|
||||
id: v.id,
|
||||
name: v.name,
|
||||
resource: v.resource,
|
||||
type: v.type,
|
||||
};
|
||||
this.modalType = 1;
|
||||
this.modalVisible = true;
|
||||
this.modalTitle = "修改验证码源";
|
||||
},
|
||||
//提交表单
|
||||
handleSubmit() {
|
||||
this.form.type = this.searchForm.type;
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
this.submitLoading = true;
|
||||
if (this.modalType == 0) {
|
||||
// 添加
|
||||
delete this.form.id;
|
||||
API_Setting.addVerification(this.form).then((res) => {
|
||||
this.submitLoading = false;
|
||||
if (res.success) {
|
||||
this.$Message.success("添加成功");
|
||||
this.getDataList();
|
||||
this.modalVisible = false;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// 编辑
|
||||
API_Setting.editVerification(this.form.id, this.form).then(
|
||||
(res) => {
|
||||
this.submitLoading = false;
|
||||
if (res.success) {
|
||||
this.$Message.success("修改成功");
|
||||
this.getDataList();
|
||||
this.modalVisible = false;
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
if (!valid) return;
|
||||
this.submitLoading = true;
|
||||
if (this.modalType === 0) {
|
||||
const payload = { ...this.form };
|
||||
delete payload.id;
|
||||
API_Setting.addVerification(payload).then((res) => {
|
||||
this.submitLoading = false;
|
||||
if (res.success) {
|
||||
this.$Message.success("添加成功");
|
||||
this.getDataList();
|
||||
this.modalVisible = false;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
API_Setting.editVerification(this.form.id, this.form).then((res) => {
|
||||
this.submitLoading = false;
|
||||
if (res.success) {
|
||||
this.$Message.success("修改成功");
|
||||
this.getDataList();
|
||||
this.modalVisible = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
//删除验证码源
|
||||
remove(v) {
|
||||
this.$Modal.confirm({
|
||||
title: "确认删除",
|
||||
// 记得确认修改此处
|
||||
content: "确认要删除此验证码源?",
|
||||
loading: true,
|
||||
onOk: () => {
|
||||
// 删除
|
||||
API_Setting.delVerification(v.id).then((res) => {
|
||||
this.$Modal.remove();
|
||||
return API_Setting.delVerification(v.id).then((res) => {
|
||||
if (res.success) {
|
||||
this.$Message.success("验证码源已删除");
|
||||
this.getDataList();
|
||||
@@ -358,3 +243,14 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.link-text {
|
||||
color: #409eff;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
.mt_10 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,105 +1,136 @@
|
||||
<template>
|
||||
<div class="search">
|
||||
<Card>
|
||||
<Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
|
||||
<Form-item label="用户名">
|
||||
<Input
|
||||
type="text"
|
||||
<el-card>
|
||||
<el-form ref="searchForm" :model="searchForm" inline label-width="70px" class="search-form">
|
||||
<el-form-item label="用户名">
|
||||
<el-input
|
||||
v-model="searchForm.username"
|
||||
placeholder="请输入用户名"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
/>
|
||||
</Form-item>
|
||||
<Form-item label="联系方式">
|
||||
<Input
|
||||
type="text"
|
||||
</el-form-item>
|
||||
<el-form-item label="联系方式">
|
||||
<el-input
|
||||
v-model="searchForm.mobile"
|
||||
placeholder="请输入联系方式"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
/>
|
||||
</Form-item>
|
||||
<Form-item label="部门">
|
||||
<department-choose @on-change="handleSelectDep" style="width: 240px;" ref="dep"></department-choose>
|
||||
</Form-item>
|
||||
<Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
|
||||
</Form>
|
||||
</Card>
|
||||
<Card>
|
||||
<Row class="operation padding-row">
|
||||
<Button @click="add" type="primary">添加</Button>
|
||||
<Button @click="delAll">批量删除</Button>
|
||||
<Button @click="resetPass">重置密码</Button>
|
||||
</Row>
|
||||
<Table
|
||||
:loading="loading"
|
||||
border
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
sortable="custom"
|
||||
@on-sort-change="changeSort"
|
||||
@on-selection-change="showSelect"
|
||||
ref="table"
|
||||
></Table>
|
||||
<Row type="flex" justify="end" class="mt_10">
|
||||
<Page
|
||||
:current="searchForm.pageNumber"
|
||||
:total="total"
|
||||
:page-size="searchForm.pageSize"
|
||||
@on-change="changePage"
|
||||
@on-page-size-change="changePageSize"
|
||||
:page-size-opts="[20,50,100]"
|
||||
size="small"
|
||||
show-total
|
||||
show-elevator
|
||||
show-sizer
|
||||
></Page>
|
||||
</Row>
|
||||
</Card>
|
||||
</el-form-item>
|
||||
<el-form-item label="部门">
|
||||
<department-choose @on-change="handleSelectDep" style="width: 240px" ref="dep" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<Modal
|
||||
:title="modalTitle"
|
||||
v-model="userModalVisible"
|
||||
:mask-closable="false"
|
||||
:width="500"
|
||||
:styles="{top: '30px'}"
|
||||
>
|
||||
<Form ref="form" :model="form" :label-width="70" :rules="formValidate">
|
||||
<FormItem label="用户名" prop="username">
|
||||
<Input v-model="form.username" autocomplete="off"/>
|
||||
</FormItem>
|
||||
<FormItem label="昵称" prop="username">
|
||||
<Input v-model="form.nickName" autocomplete="off"/>
|
||||
</FormItem>
|
||||
<FormItem label="密码" prop="password" v-if="modalType==0" :error="errorPass">
|
||||
<Input type="password" password v-model="form.password" autocomplete="off"/>
|
||||
</FormItem>
|
||||
<FormItem label="邮箱" prop="email">
|
||||
<Input v-model="form.email"/>
|
||||
</FormItem>
|
||||
<FormItem label="手机号" prop="mobile">
|
||||
<Input v-model="form.mobile"/>
|
||||
</FormItem>
|
||||
<Form-item label="头像" prop="avatar">
|
||||
<upload-pic-input v-model="form.avatar"></upload-pic-input>
|
||||
</Form-item>
|
||||
<Form-item label="所属部门">
|
||||
<department-tree-choose @on-change="handleSelectDepTree" ref="depTree"></department-tree-choose>
|
||||
</Form-item>
|
||||
<FormItem label="角色" prop="roles">
|
||||
<Select v-model="form.roles" multiple>
|
||||
<Option v-for="item in roleList" :value="item.id" :key="item.id" :label="item.name">
|
||||
|
||||
</Option>
|
||||
</Select>
|
||||
</FormItem>
|
||||
</Form>
|
||||
<div slot="footer">
|
||||
<Button type="text" @click="userModalVisible = false">取消</Button>
|
||||
<Button type="primary" :loading="submitLoading" @click="submitUser">提交</Button>
|
||||
<el-card>
|
||||
<div class="operation padding-row">
|
||||
<el-button type="primary" @click="add">添加</el-button>
|
||||
<el-button @click="delAll">批量删除</el-button>
|
||||
<el-button @click="resetPass">重置密码</el-button>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
<el-table
|
||||
ref="table"
|
||||
v-loading="loading"
|
||||
border
|
||||
:data="data"
|
||||
style="width: 100%"
|
||||
row-key="id"
|
||||
@sort-change="changeSort"
|
||||
@selection-change="showSelect"
|
||||
>
|
||||
<el-table-column type="selection" width="60" align="center" fixed="left" />
|
||||
<el-table-column prop="username" label="用户名" min-width="120" sortable="custom" fixed="left" />
|
||||
<el-table-column label="头像" width="80" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-avatar v-if="row" :src="row.avatar" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="mobile" label="手机" width="125" />
|
||||
<el-table-column prop="email" label="邮箱" min-width="180" sortable="custom" />
|
||||
<el-table-column label="状态" width="110" align="center">
|
||||
<template #default="{ row }">
|
||||
<template v-if="row">
|
||||
<el-tag v-if="row.status == true" type="success">启用</el-tag>
|
||||
<el-tag v-else-if="row.status == false" type="danger">禁用</el-tag>
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" sortable="custom" width="180" />
|
||||
<el-table-column label="操作" width="200" align="center" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<div v-if="row" class="ops">
|
||||
<a class="link-text" @click="edit(row)">编辑</a>
|
||||
<span class="op-split">|</span>
|
||||
<a class="link-text" v-if="row.status == true" @click="disable(row)">禁用</a>
|
||||
<a class="link-text" v-else @click="enable(row)">启用</a>
|
||||
<span class="op-split">|</span>
|
||||
<a class="link-text" @click="remove(row)">删除</a>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="mt_10" style="display: flex; justify-content: flex-end">
|
||||
<el-pagination
|
||||
v-model:current-page="searchForm.pageNumber"
|
||||
v-model:page-size="searchForm.pageSize"
|
||||
:page-sizes="[20, 50, 100]"
|
||||
:total="total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
size="small"
|
||||
@current-change="changePage"
|
||||
@size-change="changePageSize"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-dialog
|
||||
v-model="userModalVisible"
|
||||
:title="modalTitle"
|
||||
width="500px"
|
||||
:close-on-click-modal="false"
|
||||
top="30px"
|
||||
destroy-on-close
|
||||
>
|
||||
<el-form ref="form" :model="form" label-width="70px" :rules="formValidate">
|
||||
<el-form-item label="用户名" prop="username">
|
||||
<el-input v-model="form.username" autocomplete="off" />
|
||||
</el-form-item>
|
||||
<el-form-item label="昵称" prop="username">
|
||||
<el-input v-model="form.nickName" autocomplete="off" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="modalType == 0" label="密码" prop="password" :error="errorPass">
|
||||
<el-input v-model="form.password" type="password" show-password autocomplete="off" />
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
<el-input v-model="form.email" />
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号" prop="mobile">
|
||||
<el-input v-model="form.mobile" />
|
||||
</el-form-item>
|
||||
<el-form-item label="头像" prop="avatar">
|
||||
<upload-pic-input v-model="form.avatar" />
|
||||
</el-form-item>
|
||||
<el-form-item label="所属部门">
|
||||
<department-tree-choose @on-change="handleSelectDepTree" ref="depTree" />
|
||||
</el-form-item>
|
||||
<el-form-item label="角色" prop="roles">
|
||||
<el-select v-model="form.roles" multiple style="width: 100%">
|
||||
<el-option v-for="item in roleList" :key="item.id" :value="item.id" :label="item.name" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="userModalVisible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="submitLoading" @click="submitUser">提交</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -111,9 +142,9 @@ import {
|
||||
editOtherUser,
|
||||
enableUser,
|
||||
deleteUser,
|
||||
resetPassword
|
||||
resetPassword,
|
||||
} from "@/api/index";
|
||||
import {validateMobile} from "@/libs/validate";
|
||||
import { validateMobile } from "@/libs/validate";
|
||||
import departmentChoose from "@/components/lili/department-choose";
|
||||
import departmentTreeChoose from "@/components/lili/department-tree-choose";
|
||||
import uploadPicInput from "@/components/lili/upload-pic-input";
|
||||
@@ -127,239 +158,53 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: true, // 加载状态
|
||||
selectCount: 0, // 已选数量
|
||||
selectList: [], // 已选数据列表
|
||||
searchForm: { // 请求参数
|
||||
loading: true,
|
||||
selectCount: 0,
|
||||
selectList: [],
|
||||
searchForm: {
|
||||
username: "",
|
||||
departmentId: "",
|
||||
mobile: "",
|
||||
pageNumber: 1,
|
||||
pageSize: 20,
|
||||
sort: "createTime",
|
||||
order: "desc"
|
||||
order: "desc",
|
||||
},
|
||||
modalType: 0, // 新增编辑标识
|
||||
userModalVisible: false, // 用户modal显隐
|
||||
modalTitle: "", // modal标题
|
||||
form: { // 表单
|
||||
modalType: 0,
|
||||
userModalVisible: false,
|
||||
modalTitle: "",
|
||||
form: {
|
||||
username: "",
|
||||
mobile: "",
|
||||
email: "",
|
||||
sex: "",
|
||||
roles: [],
|
||||
departmentId: 0,
|
||||
departmentTitle: ""
|
||||
departmentTitle: "",
|
||||
},
|
||||
roleList: [], // 角色列表
|
||||
errorPass: "", // 错误提示
|
||||
formValidate: { // 验证规则
|
||||
username: [
|
||||
{required: true, message: "用户名不能为空", trigger: "blur"}
|
||||
],
|
||||
password: [
|
||||
{required: true, message: "密码不能为空", trigger: "blur"}
|
||||
],
|
||||
roleList: [],
|
||||
errorPass: "",
|
||||
formValidate: {
|
||||
username: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
|
||||
password: [{ required: true, message: "密码不能为空", trigger: "blur" }],
|
||||
mobile: [
|
||||
{required: true, message: "手机号不能为空", trigger: "blur"},
|
||||
{validator: validateMobile, trigger: "blur"}
|
||||
{ required: true, message: "手机号不能为空", trigger: "blur" },
|
||||
{ validator: validateMobile, trigger: "blur" },
|
||||
],
|
||||
email: [
|
||||
{required: true, message: "请输入邮箱地址"},
|
||||
{type: "email", message: "邮箱格式不正确"}
|
||||
]
|
||||
{ required: true, message: "请输入邮箱地址" },
|
||||
{ type: "email", message: "邮箱格式不正确" },
|
||||
],
|
||||
},
|
||||
submitLoading: false, // 提交状态
|
||||
columns: [ // 表头
|
||||
{
|
||||
type: "selection",
|
||||
width: 60,
|
||||
align: "center",
|
||||
fixed: "left"
|
||||
},
|
||||
{
|
||||
title: "用户名",
|
||||
key: "username",
|
||||
minWidth: 120,
|
||||
sortable: true,
|
||||
fixed: "left"
|
||||
},
|
||||
{
|
||||
title: "头像",
|
||||
key: "avatar",
|
||||
width: 80,
|
||||
align: "center",
|
||||
render: (h, params) => {
|
||||
return h("Avatar", {
|
||||
props: {
|
||||
src: params.row.avatar
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "手机",
|
||||
key: "mobile",
|
||||
width: 125
|
||||
},
|
||||
{
|
||||
title: "邮箱",
|
||||
key: "email",
|
||||
minWidth: 180,
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
title: "状态",
|
||||
key: "status",
|
||||
align: "center",
|
||||
width: 110,
|
||||
render: (h, params) => {
|
||||
if (params.row.status == true) {
|
||||
return h("div", [
|
||||
h("Badge", {
|
||||
props: {
|
||||
status: "success",
|
||||
text: "启用"
|
||||
}
|
||||
})
|
||||
]);
|
||||
} else if (params.row.status == false) {
|
||||
return h("div", [
|
||||
h("Badge", {
|
||||
props: {
|
||||
status: "error",
|
||||
text: "禁用"
|
||||
}
|
||||
})
|
||||
]);
|
||||
}
|
||||
},
|
||||
filters: [
|
||||
{
|
||||
label: "启用",
|
||||
value: true
|
||||
},
|
||||
{
|
||||
label: "禁用",
|
||||
value: false
|
||||
}
|
||||
],
|
||||
filterMultiple: false,
|
||||
filterMethod(value, row) {
|
||||
return row.status == value;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "创建时间",
|
||||
key: "createTime",
|
||||
sortable: true,
|
||||
sortType: "desc",
|
||||
width: 180
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
key: "action",
|
||||
width: 200,
|
||||
align: "center",
|
||||
fixed: "right",
|
||||
render: (h, params) => {
|
||||
let enableOrDisable = "";
|
||||
if (params.row.status == true) {
|
||||
enableOrDisable = h(
|
||||
"a",
|
||||
{
|
||||
style: {
|
||||
color: "#2d8cf0",
|
||||
cursor: "pointer",
|
||||
textDecoration: "none",
|
||||
marginRight: "5px"
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.disable(params.row);
|
||||
}
|
||||
}
|
||||
},
|
||||
"禁用"
|
||||
);
|
||||
} else {
|
||||
enableOrDisable = h(
|
||||
"a",
|
||||
{
|
||||
style: {
|
||||
color: "#2d8cf0",
|
||||
cursor: "pointer",
|
||||
textDecoration: "none",
|
||||
marginRight: "5px"
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.enable(params.row);
|
||||
}
|
||||
}
|
||||
},
|
||||
"启用"
|
||||
);
|
||||
}
|
||||
return h("div", [
|
||||
h(
|
||||
"a",
|
||||
{
|
||||
style: {
|
||||
color: "#2d8cf0",
|
||||
cursor: "pointer",
|
||||
textDecoration: "none",
|
||||
marginRight: "5px"
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.edit(params.row);
|
||||
}
|
||||
}
|
||||
},
|
||||
"编辑"
|
||||
),
|
||||
h(
|
||||
"span",
|
||||
{ style: { margin: "0 8px", color: "#dcdee2" } },
|
||||
"|"
|
||||
),
|
||||
enableOrDisable,
|
||||
h(
|
||||
"span",
|
||||
{ style: { margin: "0 8px", color: "#dcdee2" } },
|
||||
"|"
|
||||
),
|
||||
h(
|
||||
"a",
|
||||
{
|
||||
style: {
|
||||
color: "#2d8cf0",
|
||||
cursor: "pointer",
|
||||
textDecoration: "none"
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.remove(params.row);
|
||||
}
|
||||
}
|
||||
},
|
||||
"删除"
|
||||
)
|
||||
]);
|
||||
}
|
||||
}
|
||||
],
|
||||
data: [], // 用户数据
|
||||
total: 0, // 总数
|
||||
submitLoading: false,
|
||||
data: [],
|
||||
total: 0,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 初始化数据
|
||||
init() {
|
||||
this.getUserList();
|
||||
},
|
||||
// 选择部门回调
|
||||
handleSelectDepTree(v) {
|
||||
if (v) {
|
||||
this.form.departmentId = v.departmentId;
|
||||
@@ -369,26 +214,20 @@ export default {
|
||||
this.form.departmentTitle = "";
|
||||
}
|
||||
},
|
||||
// 搜索项部门选择
|
||||
handleSelectDep(v) {
|
||||
this.searchForm.departmentId = v;
|
||||
},
|
||||
// 分页 修改页码
|
||||
changePage(v) {
|
||||
this.searchForm.pageNumber = v;
|
||||
changePage() {
|
||||
this.getUserList();
|
||||
this.clearSelectAll();
|
||||
},
|
||||
// 分页 修改页数
|
||||
changePageSize(v) {
|
||||
this.searchForm.pageSize = v;
|
||||
changePageSize() {
|
||||
this.searchForm.pageNumber = 1;
|
||||
this.getUserList();
|
||||
},
|
||||
getUserList() {
|
||||
// 多条件搜索用户列表
|
||||
this.loading = true;
|
||||
getUserListData(this.searchForm).then(res => {
|
||||
getUserListData(this.searchForm).then((res) => {
|
||||
this.loading = false;
|
||||
if (res.success) {
|
||||
this.data = res.result.records;
|
||||
@@ -396,41 +235,37 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
// 搜索
|
||||
handleSearch() {
|
||||
this.searchForm.pageNumber = 1;
|
||||
this.searchForm.pageSize = 20;
|
||||
this.getUserList();
|
||||
},
|
||||
// 排序
|
||||
changeSort(e) {
|
||||
this.searchForm.sort = e.key;
|
||||
this.searchForm.order = e.order;
|
||||
if (e.order == "normal") {
|
||||
this.searchForm.sort = e.prop;
|
||||
this.searchForm.order = e.order === "ascending" ? "asc" : e.order === "descending" ? "desc" : "";
|
||||
if (!e.order) {
|
||||
this.searchForm.order = "";
|
||||
}
|
||||
this.getUserList();
|
||||
},
|
||||
// 获取角色列表
|
||||
getRoleList() {
|
||||
let params = {
|
||||
pageSize: 100
|
||||
}
|
||||
getAllRoleList(params).then(res => {
|
||||
pageSize: 100,
|
||||
};
|
||||
getAllRoleList(params).then((res) => {
|
||||
if (res.success) {
|
||||
this.roleList = res.result.records;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 重置密码
|
||||
resetPass() {
|
||||
if(this.selectCount==0) {this.$Message.warning('请选中数据后重试!'); return}
|
||||
if (this.selectCount == 0) {
|
||||
this.$Message.warning("请选中数据后重试!");
|
||||
return;
|
||||
}
|
||||
this.$Modal.confirm({
|
||||
title: "确认重置",
|
||||
content:
|
||||
"您确认要重置所选的 " +
|
||||
this.selectCount +
|
||||
" 条用户数据密码为【123456】?",
|
||||
content: "您确认要重置所选的 " + this.selectCount + " 条用户数据密码为【123456】?",
|
||||
loading: true,
|
||||
onOk: () => {
|
||||
let ids = "";
|
||||
@@ -438,7 +273,7 @@ export default {
|
||||
ids += e.id + ",";
|
||||
});
|
||||
ids = ids.substring(0, ids.length - 1);
|
||||
resetPassword(ids).then(res => {
|
||||
resetPassword(ids).then((res) => {
|
||||
this.$Modal.remove();
|
||||
if (res.success) {
|
||||
this.$Message.success("操作成功");
|
||||
@@ -446,16 +281,14 @@ export default {
|
||||
this.getUserList();
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
// 确认提交
|
||||
submitUser() {
|
||||
this.$refs.form.validate(valid => {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.modalType == 0) {
|
||||
// 添加用户 避免编辑后传入id
|
||||
const params = JSON.parse(JSON.stringify(this.form))
|
||||
const params = JSON.parse(JSON.stringify(this.form));
|
||||
delete params.id;
|
||||
delete params.status;
|
||||
if (params.password == "" || params.password == undefined) {
|
||||
@@ -466,10 +299,9 @@ export default {
|
||||
this.errorPass = "密码长度不得少于6位";
|
||||
return;
|
||||
}
|
||||
//todo
|
||||
params.password = this.md5(params.password)
|
||||
params.password = this.md5(params.password);
|
||||
this.submitLoading = true;
|
||||
addUser(params).then(res => {
|
||||
addUser(params).then((res) => {
|
||||
this.submitLoading = false;
|
||||
if (res.success) {
|
||||
this.$Message.success("操作成功");
|
||||
@@ -478,9 +310,8 @@ export default {
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// 编辑
|
||||
this.submitLoading = true;
|
||||
editOtherUser(this.form).then(res => {
|
||||
editOtherUser(this.form).then((res) => {
|
||||
this.submitLoading = false;
|
||||
if (res.success) {
|
||||
this.$Message.success("操作成功");
|
||||
@@ -492,30 +323,27 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
// 添加用户
|
||||
add() {
|
||||
this.modalType = 0;
|
||||
this.modalTitle = "添加用户";
|
||||
this.$refs.form.resetFields();
|
||||
this.form = { // 表单
|
||||
this.$refs.form?.resetFields();
|
||||
this.form = {
|
||||
username: "",
|
||||
mobile: "",
|
||||
email: "",
|
||||
sex: "",
|
||||
roles: [],
|
||||
departmentId: 0,
|
||||
departmentTitle: ""
|
||||
},
|
||||
departmentTitle: "",
|
||||
};
|
||||
this.$refs.depTree.setData("", "");
|
||||
this.userModalVisible = true;
|
||||
},
|
||||
// 编辑用户
|
||||
edit(v) {
|
||||
this.form = JSON.parse(JSON.stringify(v));
|
||||
this.modalType = 1;
|
||||
this.modalTitle = "编辑用户";
|
||||
this.$refs.form.resetFields();
|
||||
// 转换null为""
|
||||
this.$refs.form?.resetFields();
|
||||
for (let attr in this.form) {
|
||||
if (this.form[attr] == null) {
|
||||
this.form[attr] = "";
|
||||
@@ -531,74 +359,64 @@ export default {
|
||||
this.form.roles = selectRolesId;
|
||||
this.userModalVisible = true;
|
||||
},
|
||||
// 启用
|
||||
enable(v) {
|
||||
let params = {
|
||||
status: true
|
||||
}
|
||||
let params = { status: true };
|
||||
this.$Modal.confirm({
|
||||
title: "确认启用",
|
||||
content: "您确认要启用用户 " + v.username + " ?",
|
||||
loading: true,
|
||||
onOk: () => {
|
||||
enableUser(v.id, params).then(res => {
|
||||
enableUser(v.id, params).then((res) => {
|
||||
this.$Modal.remove();
|
||||
if (res.success) {
|
||||
this.$Message.success("操作成功");
|
||||
this.getUserList();
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
// 禁用
|
||||
disable(v) {
|
||||
let params = {
|
||||
status: false
|
||||
}
|
||||
let params = { status: false };
|
||||
this.$Modal.confirm({
|
||||
title: "确认禁用",
|
||||
content: "您确认要禁用用户 " + v.username + " ?",
|
||||
loading: true,
|
||||
onOk: () => {
|
||||
enableUser(v.id, params).then(res => {
|
||||
enableUser(v.id, params).then((res) => {
|
||||
this.$Modal.remove();
|
||||
if (res.success) {
|
||||
this.$Message.success("操作成功");
|
||||
this.getUserList();
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
// 删除用户
|
||||
remove(v) {
|
||||
this.$Modal.confirm({
|
||||
title: "确认删除",
|
||||
content: "您确认要删除用户 " + v.username + " ?",
|
||||
loading: true,
|
||||
onOk: () => {
|
||||
deleteUser(v.id).then(res => {
|
||||
deleteUser(v.id).then((res) => {
|
||||
this.$Modal.remove();
|
||||
if (res.success) {
|
||||
this.$Message.success("删除成功");
|
||||
this.getUserList();
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
// 选中状态
|
||||
showSelect(e) {
|
||||
this.exportData = e;
|
||||
this.selectList = e;
|
||||
this.selectCount = e.length;
|
||||
},
|
||||
// 清除选中状态
|
||||
clearSelectAll() {
|
||||
this.$refs.table.selectAll(false);
|
||||
this.$refs.table?.clearSelection();
|
||||
},
|
||||
// 批量删除
|
||||
delAll() {
|
||||
if (this.selectCount <= 0) {
|
||||
this.$Message.warning("您还未选择要删除的数据");
|
||||
@@ -614,7 +432,7 @@ export default {
|
||||
ids += e.id + ",";
|
||||
});
|
||||
ids = ids.substring(0, ids.length - 1);
|
||||
deleteUser(ids).then(res => {
|
||||
deleteUser(ids).then((res) => {
|
||||
this.$Modal.remove();
|
||||
if (res.success) {
|
||||
this.$Message.success("删除成功");
|
||||
@@ -622,13 +440,25 @@ export default {
|
||||
this.getUserList();
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
this.getRoleList();
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.ops a {
|
||||
color: #2d8cf0;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
.ops span {
|
||||
display: inline-block;
|
||||
margin: 0 8px;
|
||||
color: #dcdee2;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user