<template>
<div class="c-spanright">
<h3 class="tit_lv2">咨询服务时间配置</h3>
<div class="flex-wrap">
<el-button class="btn-margin" type="primary" size="medium" @click="addConfig()">
添加
</el-button>
<q-form
inline
:ref-obj.sync="searchForm.ref"
:data="searchForm.data"
:field-list="searchForm.fieldList"
@search="queryConfig"
/>
</div>
<el-table :data="list" border>
<el-table-column label="日期" align="center">
<template slot-scope="scope">
<el-select
v-model="curEdit.week_time"
size="mini"
placeholder="日期"
v-if="scope.row.isEdit"
>
<el-option
v-for="item in dateOptions"
:key="item"
:value="item"
:label="item"
></el-option>
</el-select>
<span v-else>{{scope.row.week_time}}</span>
</template>
</el-table-column>
<el-table-column label="时间段" align="center" width="220">
<template slot-scope="scope">
<div v-if="scope.row.isEdit" class="flex-wrap">
<el-select
v-model="curEdit.start_time"
size="mini"
placeholder="开始时间"
>
<el-option
v-for="item in periodOptions"
:key="item.value"
:value="item.value"
:label="item.label"
></el-option>
</el-select>
<el-select
v-model="curEdit.end_time"
size="mini"
placeholder="结束时间"
>
<el-option
v-for="item in periodOptions"
:key="item.value"
:value="item.value"
:label="item.label"
></el-option>
</el-select>
</div>
<span v-else>{{scope.row.start_time}}点至{{scope.row.end_time}}点</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button
type="text"
@click="modifyConfig(scope.row, scope.$index, false)"
>
{{scope.row.isEdit ? "保存" : "修改"}}
</el-button>
<el-button
type="text"
@click="deleteConfig(scope.row, scope.$index)"
v-if="!scope.row.isEdit"
>
删除
</el-button>
<el-button
type="text"
@click="modifyConfig(scope.row, scope.$index, true)"
v-else
>
取消
</el-button>
</template>
</el-table-column>
</el-table>
<div class="m-pagination">
<el-pagination
@current-change="handlePageNoChange"
:current-page.sync="pageno"
:total="total"
:page-size="pagesize"
layout="prev, pager, next, total"
/>
</div>
</div>
</template>
<script>
import request from 'lib/utils/request';
import QForm from 'view/common/QForm/index.vue';
import {dateOptions, periodOptions, searchFormField} from './config.js';
export default {
components: {
QForm
},
data() {
return {
dateOptions,
periodOptions,
curEdit: null,
list: [],
// 分页
pageno: 1, // 页数
pagesize: 8, // 页大小
total: 0, // 中数
fileList: [],
searchForm: {
ref: null,
data: {
// 周几
week_time: '',
// 开始时间
start_time: '',
// 结束时间
end_time: ''
},
fieldList: searchFormField
}
};
},
created() {
this.queryConfig();
},
methods: {
// 改变页码
handlePageNoChange(val) {
this.pageno = val;
this.queryConfig();
},
queryConfig() {
const param = {
pageno: this.pageno,
pagesize: this.pagesize,
...this.searchForm.data
};
this.clearEmptyParam(param);
let url = '/admin/consultTime/searchConfig.json';
request.get(url, param).then((res) => {
if (res.ret) {
const {content = [], total = 0} = res.data;
if (Array.isArray(content)) {
this.list = content.map((v) => {
v.isEdit = false;
return v;
});
this.total = total;
} else {
this.list = [];
this.total = 0;
}
} else {
this.$message.error(res.msg);
}
});
},
addConfig() {
for (let item of this.list) {
if (item.isEdit) {
this.$message.warning('请先保存当前编辑项');
return;
}
}
const tmp = {
id: 0,
// 周几
week_time: '',
// 开始时间
start_time: '',
// 结束时间
end_time: '',
isEdit: true
};
this.list.push(tmp);
this.curEdit = JSON.parse(JSON.stringify(tmp));
},
modifyConfig(row, index, isCancel) {
// 点击修改，判断是否已保存所有操作
for (let item of this.list) {
if (item.isEdit && item.id !== row.id) {
this.$message.warning('请先保存当前编辑项');
return;
}
}
// 是否取消
if (isCancel) {
// 新增的取消
if (!this.curEdit.id) {
this.list.splice(index, 1);
return (row.isEdit = !row.isEdit);
} else {
return (row.isEdit = false);
}
}
// 提交数据
if (row.isEdit) {
const data = JSON.parse(JSON.stringify(this.curEdit));
const {week_time = '', start_time = '', end_time = ''} = data;
if (!week_time) {
this.$message.error('请选择日期');
return;
}
if (start_time === '') {
this.$message.error('请选择开始日期');
return;
}
if (end_time === '') {
this.$message.error('请选择结束日期');
return;
}
for (let k in data) {
if({}.hasOwnProperty.call(data, k)) {
row[k] = data[k];
}
}
let url = row.id
? '/admin/consultTime/editConfig.json'
: '/admin/consultTime/addConfig.json';
request.post(url, row).then((res) => {
const {ret, msg = '修改失败'} = res;
if (ret) {
row.isEdit = false;
this.queryConfig();
this.$message.success(msg);
} else {
this.$alert(msg);
this.queryConfig();
}
});
} else {
this.curEdit = JSON.parse(JSON.stringify(row));
row.isEdit = true;
}
},
deleteConfig(row, index) {
let url = '/admin/consultTime/deleteConfig.json';
this.$confirm('确认删除当前配置？', {
confirmButtonText: '确定',
cancelButtonText: '取消'
})
.then(() => {
request.get(url, row).then((res) => {
const {ret, msg = '删除失败'} = res;
if (ret) {
this.$message.success(msg);
this.queryConfig();
} else {
this.$alert(msg);
}
});
})
.catch(() => {});
},
// 清除无值参数
clearEmptyParam(params) {
Object.keys(params).forEach((key) => {
if (!params[key]) {
delete params[key];
}
});
}
}
};
</script>
<style scoped>
.flex-wrap {
display: flex;
}
.btn-margin {
margin-right: 30px;
margin-bottom: 20px;
}
.mt50 {
margin-top: 50px;
}
.tip-red {
margin-left: 5px;
color: red;
}
.tip {
background-color: #fbf3e8;
padding: 5px;
color: #ae803b;
font-weight: bold;
}
.align-baseline {
align-items: baseline;
}
.m-pagination {
text-align: center;
}
</style>
export const dateOptions = [
'周一',
'周二',
'周三',
'周四',
'周五',
'周六',
'周日'
];
const weekOption = dateOptions.map((v) => ({
value: v,
label: v
}));
export const periodOptions = new Array(25)
.fill(1)
.map((v, k) => ({label: `${k}点`, value: k}));
export const searchFormField = [
{
label: '日期：',
value: 'week_time',
type: 'select',
options: weekOption
},
{
label: '开始时间：',
value: 'start_time',
type: 'select',
options: periodOptions
},
{
label: '结束时间：',
value: 'end_time',
type: 'select',
options: periodOptions
},
{
type: 'button',
text: '搜索',
event: 'search'
}
];
网友评论