对接口：
1、登录接口 2、菜单接口改模拟 3、服务项目管理 完成90%(标题图片上传未处理) 4、服务配置管理，完成90%（界面优化未完成）
This commit is contained in:
@@ -0,0 +1,18 @@
|
||||
import service from "../request.js";
|
||||
const API_BASE_URL = '/config';
|
||||
|
||||
// 客户列表
|
||||
export function getConfigList(query) {
|
||||
return service({
|
||||
method: "get",
|
||||
url: `${API_BASE_URL}/list`,
|
||||
data: query,
|
||||
});
|
||||
}
|
||||
export function updateConfig(query) {
|
||||
return service({
|
||||
method: "put",
|
||||
url: `${API_BASE_URL}`,
|
||||
data: query,
|
||||
});
|
||||
}
|
||||
@@ -10,6 +10,11 @@ const menuTable = [
|
||||
url: "/home",
|
||||
icon: "HomeFilled",
|
||||
},
|
||||
{
|
||||
title: "服务配置",
|
||||
url: "/config",
|
||||
icon: "HomeFilled",
|
||||
},
|
||||
{
|
||||
title: "服务项目",
|
||||
url: "/goods",
|
||||
|
||||
@@ -75,6 +75,26 @@ const routerList = [
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: "/config",
|
||||
component: Layout,
|
||||
redirect: "config",
|
||||
meta: {
|
||||
requiresAuth: true, //有一些页面是否登录才能进去
|
||||
name: "服务配置",
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: "/config",
|
||||
name: "config",
|
||||
component: () => import("../views/config/index.vue"),
|
||||
meta: {
|
||||
requiresAuth: true, //有一些页面是否登录才能进去
|
||||
name: "服务配置",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: "/goods",
|
||||
component: Layout,
|
||||
|
||||
@@ -0,0 +1,259 @@
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
:header-cell-style="{ backgroundColor: '#ecf5ff' }"
|
||||
border
|
||||
stripe
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column
|
||||
v-for="item in options"
|
||||
:key="item.type"
|
||||
:prop="item.props"
|
||||
:label="item.label"
|
||||
:width="item.width"
|
||||
:align="item.align"
|
||||
show-overflow-tooltip
|
||||
:fixed="item.fixed"
|
||||
>
|
||||
<template v-slot:default="scope" v-if="item.props === 'actions'">
|
||||
<el-icon class="icon-view" @click="ItemView(scope.row)"
|
||||
><View
|
||||
/></el-icon>
|
||||
<el-icon class="icon-edit" @click="editorClick(scope.row)"
|
||||
><Edit
|
||||
/></el-icon>
|
||||
<el-popconfirm
|
||||
confirm-button-text="确认"
|
||||
cancel-button-text="取消"
|
||||
:icon="InfoFilled"
|
||||
icon-color="#626AEF"
|
||||
title="确定要除该服务项目?"
|
||||
@confirm="DeleteItem(index)"
|
||||
>
|
||||
<template #reference>
|
||||
<el-icon class="icon-dele"><Delete /></el-icon>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
small
|
||||
background
|
||||
:page-size="queryData.size"
|
||||
layout="prev, pager, next"
|
||||
:total="total"
|
||||
class="mt-4"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</el-card>
|
||||
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
:title="`${dialogData.title}服务配置`"
|
||||
:width="dialogWidth"
|
||||
:hide-required-asterisk="dialogData.isView"
|
||||
draggable
|
||||
>
|
||||
<el-form
|
||||
:model="dialogData.FormData"
|
||||
:rules="rules"
|
||||
ref="FormRef"
|
||||
class="demo-ruleForm"
|
||||
>
|
||||
<el-form-item
|
||||
label="配置项目"
|
||||
:label-width="formLabelWidth"
|
||||
prop="title"
|
||||
>
|
||||
<el-input v-model="dialogData.FormData.title" autocomplete="off" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="配置内容" :label-width="formLabelWidth" prop="content">
|
||||
<el-input v-model="dialogData.FormData.content" autocomplete="off" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="onSubmit()">确认</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
Search,
|
||||
Edit,
|
||||
Delete,
|
||||
UserFilled,
|
||||
InfoFilled,
|
||||
View,
|
||||
} from '@element-plus/icons-vue'
|
||||
import {
|
||||
getConfigList,
|
||||
updateConfig,
|
||||
} from '../../api/modules/config.js'
|
||||
import { options } from './options.js'
|
||||
import { onMounted, reactive, ref } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { getDateTime } from '../../utils'
|
||||
const queryData = ref({
|
||||
keyWord: '',
|
||||
page: 1,
|
||||
size: 10,
|
||||
})
|
||||
const FormRef = ref()
|
||||
const formLabelWidth = '140px'
|
||||
const dialogData = reactive({
|
||||
isView: true,
|
||||
title: '添加',
|
||||
FormData: {
|
||||
title: '',
|
||||
content: '',
|
||||
},
|
||||
})
|
||||
|
||||
const dialogWidth = ref('0')
|
||||
const rules = reactive({
|
||||
content: [{ required: true, message: '请填写配置内容', trigger: 'change' }],
|
||||
})
|
||||
const oldTableData = ref([])
|
||||
const dialogVisible = ref(false)
|
||||
const tableData = ref([])
|
||||
const total = ref(0)
|
||||
|
||||
const initData = () => {
|
||||
getConfigList(queryData.value).then((res) => {
|
||||
total.value = res.total
|
||||
tableData.value = res.data
|
||||
})
|
||||
}
|
||||
|
||||
const dialogVisibleShow = () => {
|
||||
dialogData.FormData = {
|
||||
title: '',
|
||||
content: '',
|
||||
}
|
||||
dialogVisible.value = true
|
||||
}
|
||||
const onSubmit = () => {
|
||||
FormRef.value.validate(async (valid) => {
|
||||
if (!valid) return
|
||||
try {
|
||||
if (dialogData.FormData.id) {
|
||||
updateConfig(dialogData.FormData).then((res) => {
|
||||
console.log('编辑数据成功')
|
||||
console.log(ElMessage)
|
||||
ElMessage({
|
||||
message: '编辑服务项目成功',
|
||||
type: 'success',
|
||||
})
|
||||
// tableData.value = res.data
|
||||
})
|
||||
} else {
|
||||
dialogData.FormData.date = getDateTime('')
|
||||
addGoods(dialogData.FormData)
|
||||
.then((res) => {
|
||||
ElMessage({
|
||||
message: '添加服务项目成功',
|
||||
type: 'success',
|
||||
})
|
||||
dialogData.FormData.id = res.data.data.id
|
||||
tableData.value.unshift(dialogData.FormData)
|
||||
})
|
||||
.catch((err) => {})
|
||||
}
|
||||
dialogVisible.value = false
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
})
|
||||
}
|
||||
const handleCurrentChange = (val) => {
|
||||
queryData.value.page = val
|
||||
initData(queryData.value)
|
||||
}
|
||||
const editorClick = (item) => {
|
||||
dialogVisible.value = true
|
||||
|
||||
dialogData.FormData = item
|
||||
console.log(dialogData.FormData)
|
||||
dialogData.isView = false
|
||||
dialogData.title = '编辑'
|
||||
}
|
||||
|
||||
const ItemView = (item) => {
|
||||
dialogVisible.value = true
|
||||
dialogData.FormData = item
|
||||
dialogData.isView = false
|
||||
dialogData.title = ''
|
||||
}
|
||||
|
||||
const DeleteItem = (index) => {
|
||||
console.log(index)
|
||||
tableData.value.splice(index, 1)
|
||||
}
|
||||
const cancelEvent = () => {
|
||||
console.log('cancel!')
|
||||
}
|
||||
const setDialogWidth = () => {
|
||||
console.log(document.body.clientWidth)
|
||||
var val = document.body.clientWidth
|
||||
const def = 800 // 默认宽度
|
||||
if (val < def) {
|
||||
dialogWidth.value = '100%'
|
||||
} else {
|
||||
dialogWidth.value = def + 'px'
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
setDialogWidth()
|
||||
window.onresize = () => {
|
||||
return (() => {
|
||||
setDialogWidth()
|
||||
})()
|
||||
}
|
||||
initData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.henader-card {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.icon-view {
|
||||
font-size: 20px;
|
||||
color: #673ab7;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.icon-edit {
|
||||
font-size: 20px;
|
||||
color: #2f60c2;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.icon-dele {
|
||||
font-size: 20px;
|
||||
color: #ff5722;
|
||||
}
|
||||
.mt-4 {
|
||||
float: right;
|
||||
text-align: right;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.el-button--text {
|
||||
margin-right: 15px;
|
||||
}
|
||||
.el-select {
|
||||
width: 300px;
|
||||
}
|
||||
.el-input {
|
||||
width: 300px;
|
||||
}
|
||||
.dialog-footer button:first-child {
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,21 @@
|
||||
export const options = [
|
||||
{
|
||||
label: '配置项目',
|
||||
props: 'title',
|
||||
width: 'auto',
|
||||
align: 'left'
|
||||
},
|
||||
{
|
||||
label: '配置内容',
|
||||
props: 'content',
|
||||
width: 'auto',
|
||||
align: 'left'
|
||||
},
|
||||
{
|
||||
label: '操作',
|
||||
props: 'actions',
|
||||
width: '150',
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
}
|
||||
]
|
||||
@@ -2,22 +2,13 @@
|
||||
<el-card shadow="never" class="henader-card">
|
||||
<div class="flx-row">
|
||||
<el-form :inline="true" :model="queryData" style="flex: 1">
|
||||
<el-input placeholder="请输入搜索内容" v-model="queryData.keyWord">
|
||||
</el-input>
|
||||
<el-date-picker
|
||||
class="ml20"
|
||||
v-model="queryData.date"
|
||||
type="datetimerange"
|
||||
:shortcuts="shortcuts"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
/>
|
||||
<!-- <el-input placeholder="请输入搜索内容" v-model="queryData.keyWord">-->
|
||||
<!-- </el-input>-->
|
||||
</el-form>
|
||||
<div class="flex-right">
|
||||
<el-button type="primary" :icon="Search" @click="initData" class="ml20"
|
||||
>搜索</el-button
|
||||
>
|
||||
<!-- <el-button type="primary" :icon="Search" @click="initData" class="ml20"-->
|
||||
<!-- >搜索</el-button-->
|
||||
<!-- >-->
|
||||
<el-button type="primary" @click="dialogVisibleShow">+添加</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user