|
|
@@ -16,10 +16,31 @@
|
|
|
</el-date-picker>
|
|
|
</el-form-item>
|
|
|
<el-form-item>
|
|
|
- <el-select v-model="tableFrom.cate" placeholder="请选择时段">
|
|
|
- <el-option label="早安" value="早安"></el-option>
|
|
|
- <el-option label="晚安" value="晚安"></el-option>
|
|
|
- </el-select>
|
|
|
+ <el-select v-model="tableFrom.cate" placeholder="请选择时段" clearable multiple collapse-tags>
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in periodColum"
|
|
|
+ :key="index"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-select v-model="tableFrom.season" placeholder="请选择季节" clearable multiple collapse-tags>
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in seasonColum"
|
|
|
+ :key="index"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-select v-model="tableFrom.weekend" placeholder="请选择周末" clearable>
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in weekendColum"
|
|
|
+ :key="index"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"></el-option>
|
|
|
+ </el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item>
|
|
|
<el-button size="small" type="primary" icon="el-icon-search" @click="onSearch">查询</el-button>
|
|
|
@@ -36,14 +57,13 @@
|
|
|
<el-table-column label="图片" prop="content" min-width="120">
|
|
|
<template slot-scope="scope">
|
|
|
<el-image
|
|
|
- v-if="scope.row.content.indexOf('.png') > -1 ||
|
|
|
- scope.row.content.indexOf('.jpg') > -1"
|
|
|
+ v-if="scope.row.content.indexOf('.png') > -1 || scope.row.content.indexOf('.jpg') > -1"
|
|
|
:src="scope.row.content"
|
|
|
@click.stop
|
|
|
:preview-src-list="[scope.row.content]"
|
|
|
alt="图片"
|
|
|
style="width: 100px; height: 100px; display: block; vertical-align: top;"/>
|
|
|
- <span v-else style="display: flex; align-items: center; justify-content: center; width: 100px; height: 100px;">图片格式异常</span>
|
|
|
+ <span v-else style="display: flex; align-items: center; justify-content: center; width: 100px; height: 100px;">图片格式异常</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="展示日期" prop="parse_date" min-width="120">
|
|
|
@@ -56,8 +76,19 @@
|
|
|
</el-table-column>
|
|
|
<el-table-column label="展示时段" prop="cate" min-width="120">
|
|
|
<template slot-scope="scope">
|
|
|
- <span v-if="scope.row.cate">{{scope.row.cate}}</span>
|
|
|
- <span v-else>全时段</span>
|
|
|
+ <span v-if="isAllPeriodsSelected(scope.row.cate) || !scope.row.cate">全时段</span>
|
|
|
+ <span v-else>{{scope.row.cate}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="展示季节" prop="season" min-width="120">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span v-if="isAllSeasonsSelected(scope.row.season) || !scope.row.season">四季</span>
|
|
|
+ <span v-else>{{scope.row.season}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="周末" prop="weekend" min-width="120">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{scope.row.weekend === '是' ? '是' : '否'}}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="状态" prop="status" min-width="120">
|
|
|
@@ -77,7 +108,7 @@
|
|
|
<el-table-column label="操作" width="120" fixed="right" header-align="center" align="center">
|
|
|
<template slot-scope="scope">
|
|
|
<el-button type="text" size="small" @click.stop="handleEdit(scope.row.id, scope.row)">编辑</el-button>
|
|
|
- <el-button type="text" size="small" @click.stop="handleDelete(scope.row.id, scope.$index)">删除</el-button>
|
|
|
+ <el-button type="text" size="small" @click.stop="handleDelete(scope.row.id)">删除</el-button>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
@@ -112,16 +143,16 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div v-else class="upLoadPicBox" @click="modalPicTap(operate === 'add' ? '2' : '1')">
|
|
|
+ <div v-else class="upLoadPicBox" @click="modalPicTap('2')">
|
|
|
<div class="fc-upload-btn">
|
|
|
<i class="el-icon-upload2" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div v-if="operate === 'edit'">
|
|
|
+ <div v-else>
|
|
|
<div class="upLoadPicBoxSpecial">
|
|
|
<div v-if="images.length" class="pictrue">
|
|
|
- <img :src="images" @click="cropperImg(previewImage)" alt="早晚安" />
|
|
|
+ <img :src="images[0]" @click="cropperImg(previewImage)" alt="早晚安" />
|
|
|
</div>
|
|
|
<div v-else class="upLoad" @click="modalPicTap('1')">
|
|
|
<i class="el-icon-camera cameraIconfont" />
|
|
|
@@ -133,15 +164,50 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="时段：" prop="cate">
|
|
|
- <el-radio-group v-model="formValidate.cate">
|
|
|
- <el-radio label="早安">早安</el-radio>
|
|
|
- <el-radio label="晚安">晚安</el-radio>
|
|
|
+ <el-form-item label="周末：" prop="weekend">
|
|
|
+ <el-radio-group v-model="formValidate.weekend" @change="changeWeekend">
|
|
|
+ <el-radio
|
|
|
+ v-for="(item, index) in weekendColum"
|
|
|
+ :key="index"
|
|
|
+ :label="item.label">{{ item.value }}</el-radio>
|
|
|
</el-radio-group>
|
|
|
</el-form-item>
|
|
|
+ <el-form-item label="时段：" prop="cate">
|
|
|
+ <el-row type="flex" align="middle" justify="space-between" class="checkbox-control">
|
|
|
+ <el-checkbox-group class="centered-checkboxes" v-model="formValidate.cateArray" style="display: flex; align-items: center;">
|
|
|
+ <el-checkbox
|
|
|
+ v-for="(item, index) in periodColum"
|
|
|
+ :key="index"
|
|
|
+ :label="item.value">
|
|
|
+ {{ item.label }}
|
|
|
+ </el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ <div class="checkbox-actions">
|
|
|
+ <el-button type="primary" size="small" @click="selectAllPeriods">全选</el-button>
|
|
|
+ <el-button type="warning" size="small" @click="deselectAllPeriods">全不选</el-button>
|
|
|
+ </div>
|
|
|
+ </el-row>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="季节：" prop="season">
|
|
|
+ <el-row type="flex" align="middle" justify="space-between" class="checkbox-control">
|
|
|
+ <el-checkbox-group v-model="formValidate.seasonArray" style="display: flex; align-items: center;">
|
|
|
+ <el-checkbox
|
|
|
+ v-for="(item, index) in seasonColum"
|
|
|
+ :key="index"
|
|
|
+ :label="item.value">
|
|
|
+ {{ item.label }}
|
|
|
+ </el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ <div class="checkbox-actions">
|
|
|
+ <el-button type="primary" size="small" @click="selectAllSeasons">全选</el-button>
|
|
|
+ <el-button type="warning" size="small" @click="deselectAllSeasons">全不选</el-button>
|
|
|
+ </div>
|
|
|
+ </el-row>
|
|
|
+ </el-form-item>
|
|
|
<el-form-item label="日期：" prop="parse_date">
|
|
|
<el-date-picker
|
|
|
v-model="formValidate.parse_date"
|
|
|
+ :disabled="formValidate.weekend === '是'"
|
|
|
type="date"
|
|
|
placeholder="选择日期"
|
|
|
value-format="yyyy-MM-dd"
|
|
|
@@ -156,7 +222,7 @@
|
|
|
</el-dialog>
|
|
|
<el-dialog :visible.sync="previewVisible">
|
|
|
<div style="padding-top: 10px">
|
|
|
- <img :src="previewImage" style="width: 100%;" alt="预览"/>
|
|
|
+ <img :src="previewImage" style="width: 100%;" alt="预览"/>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
<cropperPic
|
|
|
@@ -201,7 +267,6 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
type: SignTypeEnum.BACKGROUND,
|
|
|
- timeVal: [],
|
|
|
tableData: {
|
|
|
data: [],
|
|
|
total: 0,
|
|
|
@@ -210,7 +275,9 @@ export default {
|
|
|
type: SignTypeEnum.BACKGROUND,
|
|
|
page: 1,
|
|
|
limit: 20,
|
|
|
- cate: '早安',
|
|
|
+ cate: [],
|
|
|
+ season: [],
|
|
|
+ weekend: '',
|
|
|
start_time: '',
|
|
|
end_time: '',
|
|
|
},
|
|
|
@@ -218,8 +285,12 @@ export default {
|
|
|
type: SignTypeEnum.BACKGROUND,
|
|
|
parse_date: '',
|
|
|
content: '',
|
|
|
- cate: '早安',
|
|
|
+ weekend: '否',
|
|
|
status: SignStatusEnum.SHOW,
|
|
|
+ cate: '',
|
|
|
+ season: '',
|
|
|
+ cateArray: [],
|
|
|
+ seasonArray: [],
|
|
|
},
|
|
|
ruleValidate: {
|
|
|
content: [
|
|
|
@@ -228,248 +299,357 @@ export default {
|
|
|
cate: [
|
|
|
{ required: true, message: "请选择时段", trigger: "blur" },
|
|
|
],
|
|
|
+ season: [
|
|
|
+ { required: true, message: "请选择季节", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ weekend: [
|
|
|
+ { required: true, message: "请选择周末", trigger: "blur" },
|
|
|
+ ],
|
|
|
},
|
|
|
pickerOptions: {
|
|
|
disabledDate: (time) => {
|
|
|
return time.getTime() < Date.now() - 8.64e7;
|
|
|
},
|
|
|
},
|
|
|
- multipleSelection: [], // 批量操作
|
|
|
- filterDate: [], // 日期选择
|
|
|
- operate: 'add', // 操作类型
|
|
|
- dialogVisible: false, // 新增图片模态框
|
|
|
- previewVisible: false, // 预览图片模态框
|
|
|
- previewImage: '', // 预览图片
|
|
|
- images: [], // 图片
|
|
|
- editItem: null, // 编辑项
|
|
|
+ weekendColum: [
|
|
|
+ { label: "否", value: "否" },
|
|
|
+ { label: "是", value: "是" },
|
|
|
+ ],
|
|
|
+ periodColum: [
|
|
|
+ { label: "早上", value: "早上" },
|
|
|
+ { label: "中午", value: "中午" },
|
|
|
+ { label: "下午", value: "下午" },
|
|
|
+ { label: "晚上", value: "晚上" },
|
|
|
+ ],
|
|
|
+ seasonColum: [
|
|
|
+ { label: "春", value: "春" },
|
|
|
+ { label: "夏", value: "夏" },
|
|
|
+ { label: "秋", value: "秋" },
|
|
|
+ { label: "冬", value: "冬" },
|
|
|
+ ],
|
|
|
+ multipleSelection: [],
|
|
|
+ filterDate: [],
|
|
|
+ operate: 'add',
|
|
|
+ dialogVisible: false,
|
|
|
+ previewVisible: false,
|
|
|
+ previewImage: '',
|
|
|
+ images: [],
|
|
|
+ editItem: null,
|
|
|
loading: false
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
- this.getList('')
|
|
|
+ this.getList()
|
|
|
},
|
|
|
methods: {
|
|
|
+ // 重置表单
|
|
|
+ resetForm() {
|
|
|
+ this.formValidate.content = this.previewImage = '';
|
|
|
+ this.formValidate.parse_date = '';
|
|
|
+ this.formValidate.cate = '';
|
|
|
+ this.formValidate.season = '';
|
|
|
+ this.formValidate.cateArray = [];
|
|
|
+ this.formValidate.seasonArray = [];
|
|
|
+ this.formValidate.weekend = '否';
|
|
|
+ this.images = [];
|
|
|
+ },
|
|
|
+
|
|
|
+ // 新增
|
|
|
onAdd() {
|
|
|
- this.dialogVisible = true
|
|
|
- this.operate = 'add'
|
|
|
- this.formValidate.content = this.previewImage = ''
|
|
|
- this.formValidate.parse_date = ''
|
|
|
- this.formValidate.cate = '早安'
|
|
|
- this.images = []
|
|
|
+ this.dialogVisible = true;
|
|
|
+ this.operate = 'add';
|
|
|
+ this.resetForm();
|
|
|
+ this.selectAllSeasons();
|
|
|
+ this.selectAllPeriods();
|
|
|
},
|
|
|
- // 搜索
|
|
|
- onSearch() {
|
|
|
+
|
|
|
+ // 格式化请求参数
|
|
|
+ formatParams(params) {
|
|
|
+ const formattedParams = {...params};
|
|
|
+
|
|
|
+ // 处理日期参数
|
|
|
if (this.filterDate && this.filterDate.length > 0) {
|
|
|
- this.tableFrom.start_time = this.filterDate[0]
|
|
|
- this.tableFrom.end_time = this.filterDate[1]
|
|
|
+ formattedParams.start_time = this.filterDate[0];
|
|
|
+ formattedParams.end_time = this.filterDate[1];
|
|
|
} else {
|
|
|
- this.tableFrom.start_time = ''
|
|
|
- this.tableFrom.end_time = ''
|
|
|
+ formattedParams.start_time = '';
|
|
|
+ formattedParams.end_time = '';
|
|
|
+ }
|
|
|
+
|
|
|
+ // 处理数组转逗号分隔字符串
|
|
|
+ if (Array.isArray(formattedParams.cate) && formattedParams.cate.length) {
|
|
|
+ formattedParams.cate = formattedParams.cate.join(',');
|
|
|
}
|
|
|
- this.getList('')
|
|
|
+
|
|
|
+ if (Array.isArray(formattedParams.season) && formattedParams.season.length) {
|
|
|
+ formattedParams.season = formattedParams.season.join(',');
|
|
|
+ }
|
|
|
+
|
|
|
+ return formattedParams;
|
|
|
},
|
|
|
- // 列表
|
|
|
- getList(num) {
|
|
|
- this.loading = true
|
|
|
- this.tableFrom.page = num ? num : this.tableFrom.page
|
|
|
- morningNightLst(this.tableFrom)
|
|
|
- .then(async (res) => {
|
|
|
- this.tableData.data = [...res.data.list]
|
|
|
- this.tableData.total = res.data.count
|
|
|
- this.loading = false
|
|
|
+
|
|
|
+ // 搜索
|
|
|
+ onSearch() {
|
|
|
+ const params = this.formatParams(this.tableFrom);
|
|
|
+ this.fetchList(params);
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取列表数据
|
|
|
+ fetchList(params) {
|
|
|
+ this.loading = true;
|
|
|
+
|
|
|
+ morningNightLst(params)
|
|
|
+ .then(res => {
|
|
|
+ this.tableData.data = res.data.list;
|
|
|
+ this.tableData.total = res.data.count;
|
|
|
+ this.loading = false;
|
|
|
})
|
|
|
- .catch((res) => {
|
|
|
- this.loading = false
|
|
|
- this.$message.error(res.message)
|
|
|
+ .catch(err => {
|
|
|
+ this.loading = false;
|
|
|
+ this.$message.error(err.message || '获取数据失败');
|
|
|
});
|
|
|
},
|
|
|
+
|
|
|
+ // 列表
|
|
|
+ getList(page) {
|
|
|
+ const params = this.formatParams(this.tableFrom);
|
|
|
+ if (page) params.page = page;
|
|
|
+ this.fetchList(params);
|
|
|
+ },
|
|
|
+
|
|
|
+ // 分页切换
|
|
|
pageChange(page) {
|
|
|
- this.tableFrom.page = page
|
|
|
- this.getList('')
|
|
|
+ this.tableFrom.page = page;
|
|
|
+ this.getList(page);
|
|
|
},
|
|
|
+
|
|
|
+ // 每页数量改变
|
|
|
handleSizeChange(val) {
|
|
|
- this.tableFrom.limit = val
|
|
|
- this.getList('')
|
|
|
+ this.tableFrom.limit = val;
|
|
|
+ this.getList();
|
|
|
},
|
|
|
- // 操作新增数据
|
|
|
+
|
|
|
+ // 新增数据
|
|
|
async handleCreate(params, callback) {
|
|
|
- await morningNightCreateApi(params)
|
|
|
- .then(async (res) => {
|
|
|
- callback && callback(res)
|
|
|
- })
|
|
|
- .catch((res) => {
|
|
|
- this.$message.error(res.message)
|
|
|
- });
|
|
|
+ try {
|
|
|
+ const res = await morningNightCreateApi(params);
|
|
|
+ callback && callback(res);
|
|
|
+ } catch (err) {
|
|
|
+ this.$message.error(err.message || '创建失败');
|
|
|
+ }
|
|
|
},
|
|
|
- // 操作取消
|
|
|
+
|
|
|
+ // 取消操作
|
|
|
handleCancel() {
|
|
|
- this.dialogVisible = false
|
|
|
+ this.dialogVisible = false;
|
|
|
+ this.editItem = null;
|
|
|
},
|
|
|
- // 操作新增与编辑
|
|
|
+
|
|
|
+ // 表单提交
|
|
|
async handleSubmit(name) {
|
|
|
- if (this.images.length > 1) {
|
|
|
- // 遍历循环上传
|
|
|
- for (let i = 0; i < this.images.length; i++) {
|
|
|
- this.formValidate.content = this.images[i]
|
|
|
- await this.handleCreate(this.formValidate)
|
|
|
+ // 格式化多选数据
|
|
|
+ this.formValidate.cate = this.formValidate.cateArray.join(',');
|
|
|
+ this.formValidate.season = this.formValidate.seasonArray.join(',');
|
|
|
+
|
|
|
+ // 批量上传图片
|
|
|
+ if (this.images.length > 1 && this.operate === 'add') {
|
|
|
+ try {
|
|
|
+ for (const image of this.images) {
|
|
|
+ await this.handleCreate({...this.formValidate, content: image});
|
|
|
+ }
|
|
|
+ this.$message.success('新增成功');
|
|
|
+ this.dialogVisible = false;
|
|
|
+ this.getList();
|
|
|
+ } catch (err) {
|
|
|
+ this.$message.error(err.message || '批量上传失败');
|
|
|
}
|
|
|
- this.$message.success('新增成功')
|
|
|
- this.dialogVisible = false
|
|
|
- this.getList('')
|
|
|
- return
|
|
|
+ return;
|
|
|
}
|
|
|
- this.$refs[name].validate((valid) => {
|
|
|
- if (valid) {
|
|
|
+
|
|
|
+ // 单个表单提交
|
|
|
+ this.$refs[name].validate(async (valid) => {
|
|
|
+ if (!valid) return;
|
|
|
+
|
|
|
+ try {
|
|
|
if (this.operate === 'add') {
|
|
|
- this.handleCreate(this.formValidate, () => {
|
|
|
- this.$message.success('新增成功')
|
|
|
- this.dialogVisible = false
|
|
|
- this.getList('')
|
|
|
- })
|
|
|
- } else if (this.operate === 'edit') {
|
|
|
- morningNightSaveApi(this.editItem.id,
|
|
|
- { ...this.editItem,
|
|
|
- parse_date: this.formValidate.parse_date,
|
|
|
- content: this.formValidate.content,
|
|
|
- cate: this.formValidate.cate,
|
|
|
- })
|
|
|
- .then(async (res) => {
|
|
|
- this.$message.success('编辑成功')
|
|
|
- this.dialogVisible = false
|
|
|
- this.editItem = null
|
|
|
- this.getList('')
|
|
|
- })
|
|
|
- .catch((res) => {
|
|
|
- this.$message.error(res.message)
|
|
|
+ await this.handleCreate(this.formValidate, () => {
|
|
|
+ this.$message.success('新增成功');
|
|
|
+ this.dialogVisible = false;
|
|
|
+ this.getList();
|
|
|
});
|
|
|
+ } else if (this.operate === 'edit' && this.editItem) {
|
|
|
+ const updateParams = {
|
|
|
+ ...this.editItem,
|
|
|
+ parse_date: this.formValidate.parse_date,
|
|
|
+ content: this.formValidate.content,
|
|
|
+ cate: this.formValidate.cate,
|
|
|
+ season: this.formValidate.season,
|
|
|
+ weekend: this.formValidate.weekend
|
|
|
+ };
|
|
|
+
|
|
|
+ await morningNightSaveApi(this.editItem.id, updateParams);
|
|
|
+ this.$message.success('编辑成功');
|
|
|
+ this.dialogVisible = false;
|
|
|
+ this.editItem = null;
|
|
|
+ this.getList();
|
|
|
}
|
|
|
- } else {
|
|
|
- return false
|
|
|
+ } catch (err) {
|
|
|
+ this.$message.error(err.message || '操作失败');
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
},
|
|
|
- // 上传封面图片
|
|
|
+
|
|
|
+ // 上传图片
|
|
|
modalPicTap(tit) {
|
|
|
- const _this = this
|
|
|
- this.$modalUpload(function (images) {
|
|
|
- _this.images = images
|
|
|
- _this.formValidate.content = images[0]
|
|
|
- }, tit)
|
|
|
+ this.$modalUpload(images => {
|
|
|
+ this.images = images;
|
|
|
+ this.formValidate.content = images[0];
|
|
|
+ }, tit);
|
|
|
},
|
|
|
- // 预览封面
|
|
|
- handlePreview (img) {
|
|
|
- this.previewVisible = true
|
|
|
- this.previewImage = img
|
|
|
+
|
|
|
+ // 预览图片
|
|
|
+ handlePreview(img) {
|
|
|
+ this.previewVisible = true;
|
|
|
+ this.previewImage = img;
|
|
|
},
|
|
|
- // 删除封面
|
|
|
- handleDelThumb (index) {
|
|
|
+
|
|
|
+ // 删除图片
|
|
|
+ handleDelThumb(index) {
|
|
|
if (this.operate === 'add') {
|
|
|
- this.images.splice(index, 1)
|
|
|
+ this.images.splice(index, 1);
|
|
|
} else {
|
|
|
- this.images = []
|
|
|
- this.previewImage = ''
|
|
|
- this.formValidate.content = ''
|
|
|
+ this.images = [];
|
|
|
+ this.previewImage = '';
|
|
|
+ this.formValidate.content = '';
|
|
|
}
|
|
|
},
|
|
|
- // 操作状态
|
|
|
- handleStatus (row) {
|
|
|
- this.loading = true
|
|
|
- const params = { ...row }
|
|
|
- morningNightSaveApi(params.id, Object.assign(params, {
|
|
|
+
|
|
|
+ // 更新状态
|
|
|
+ handleStatus(row) {
|
|
|
+ this.loading = true;
|
|
|
+ const params = {
|
|
|
+ ...row,
|
|
|
type: this.type,
|
|
|
- status: params.status === SignStatusEnum.SHOW ? SignStatusEnum.SHOW : SignStatusEnum.HIDE
|
|
|
- })).then(res => {
|
|
|
- this.loading = false
|
|
|
- this.$message.success(res.message)
|
|
|
- }).catch(err => {
|
|
|
- this.loading = false
|
|
|
- this.$message.error(err.message)
|
|
|
- })
|
|
|
+ status: row.status
|
|
|
+ };
|
|
|
+
|
|
|
+ morningNightSaveApi(params.id, params)
|
|
|
+ .then(res => {
|
|
|
+ this.loading = false;
|
|
|
+ this.$message.success(res.message || '状态更新成功');
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ this.loading = false;
|
|
|
+ this.$message.error(err.message || '操作失败');
|
|
|
+ });
|
|
|
},
|
|
|
- // 操作编辑
|
|
|
- handleEdit (id, item) {
|
|
|
- this.dialogVisible = true
|
|
|
- this.operate = 'edit'
|
|
|
- this.formValidate.content = item.content
|
|
|
- this.formValidate.cate = item.cate
|
|
|
- this.formValidate.parse_date = item.parse_date ? ( item.parse_date.startsWith('0000-00-00') ? '' : item.parse_date) : ''
|
|
|
- this.previewImage = item.content
|
|
|
- this.images = [item.content]
|
|
|
- this.editItem = { ...item }
|
|
|
+
|
|
|
+ // 编辑操作
|
|
|
+ handleEdit(id, item) {
|
|
|
+ this.dialogVisible = true;
|
|
|
+ this.operate = 'edit';
|
|
|
+ this.formValidate.content = item.content;
|
|
|
+ this.formValidate.cate = item.cate;
|
|
|
+ this.formValidate.season = item.season || '';
|
|
|
+ this.formValidate.cateArray = item.cate ? item.cate.split(',') : [];
|
|
|
+ this.formValidate.seasonArray = item.season ? item.season.split(',') : [];
|
|
|
+ this.formValidate.weekend = item.weekend || '否';
|
|
|
+ this.formValidate.parse_date = item.parse_date && !item.parse_date.startsWith('0000-00-00') ? item.parse_date : '';
|
|
|
+ this.previewImage = item.content;
|
|
|
+ this.images = [item.content];
|
|
|
+ this.editItem = {...item};
|
|
|
},
|
|
|
- // 操作删除
|
|
|
- handleDelete (id) {
|
|
|
+
|
|
|
+ // 删除操作
|
|
|
+ handleDelete(id) {
|
|
|
this.$confirm('此操作将永久删除该图片, 是否继续?', '操作提示', {
|
|
|
confirmButtonText: '确定',
|
|
|
cancelButtonText: '取消',
|
|
|
type: 'warning'
|
|
|
}).then(() => {
|
|
|
- this.loading = true
|
|
|
- morningNightDeleteApi(id, {
|
|
|
- type: this.type
|
|
|
- })
|
|
|
- .then(res => {
|
|
|
- this.loading = false
|
|
|
+ this.loading = true;
|
|
|
+
|
|
|
+ morningNightDeleteApi(id, {type: this.type})
|
|
|
+ .then(() => {
|
|
|
+ this.loading = false;
|
|
|
this.$message.success('删除成功');
|
|
|
- this.getList('')
|
|
|
- }).catch(err => {
|
|
|
- this.loading = false
|
|
|
- this.$message.error(err.message)
|
|
|
- })
|
|
|
+ this.getList();
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ this.loading = false;
|
|
|
+ this.$message.error(err.message || '删除失败');
|
|
|
+ });
|
|
|
}).catch(() => {
|
|
|
- this.$message({
|
|
|
- type: 'info',
|
|
|
- message: '已取消删除'
|
|
|
- });
|
|
|
+ this.$message.info('已取消删除');
|
|
|
});
|
|
|
},
|
|
|
+
|
|
|
// 批量删除
|
|
|
async handleBatchDelete() {
|
|
|
if (this.multipleSelection.length === 0) {
|
|
|
- this.$message.warning('请至少选择一项')
|
|
|
- return
|
|
|
+ this.$message.warning('请至少选择一项');
|
|
|
+ return;
|
|
|
}
|
|
|
- this.$confirm('此操作将永久删除该图片, 是否继续?', '操作提示', {
|
|
|
+
|
|
|
+ this.$confirm('此操作将永久删除所选图片, 是否继续?', '操作提示', {
|
|
|
confirmButtonText: '确定',
|
|
|
cancelButtonText: '取消',
|
|
|
type: 'warning'
|
|
|
}).then(async () => {
|
|
|
- this.loading = true
|
|
|
- const ids = this.multipleSelection.map(item => item.id)
|
|
|
- // 遍历异步删除
|
|
|
- for (let i = 0; i < ids.length; i++) {
|
|
|
- this.loading = true
|
|
|
- await morningNightDeleteApi(ids[i], {
|
|
|
- type: this.type
|
|
|
- })
|
|
|
+ this.loading = true;
|
|
|
+ const ids = this.multipleSelection.map(item => item.id);
|
|
|
+
|
|
|
+ try {
|
|
|
+ // 使用Promise.all优化批量删除
|
|
|
+ await Promise.all(
|
|
|
+ ids.map(id => morningNightDeleteApi(id, {type: this.type}))
|
|
|
+ );
|
|
|
+
|
|
|
+ this.loading = false;
|
|
|
+ this.$message.success('批量删除成功');
|
|
|
+ this.getList();
|
|
|
+ } catch (err) {
|
|
|
+ this.loading = false;
|
|
|
+ this.$message.error(err.message || '批量删除失败');
|
|
|
}
|
|
|
- this.loading = false
|
|
|
- this.$message.success('批量删除成功');
|
|
|
- this.getList('')
|
|
|
- })
|
|
|
+ });
|
|
|
},
|
|
|
- // 操作日期筛选变化
|
|
|
+
|
|
|
+ // 日期筛选变化
|
|
|
handleDateChange(date) {
|
|
|
if (date && date.length === 2) {
|
|
|
- const start = this.moment(date[0], 'YYYY-MM-DD').format('YYYY-MM-DD 00:00:00')
|
|
|
- const end = this.moment(date[1], 'YYYY-MM-DD').format('YYYY-MM-DD 23:59:59')
|
|
|
- this.filterDate = [start, end]
|
|
|
+ const start = this.moment(date[0], 'YYYY-MM-DD').format('YYYY-MM-DD 00:00:00');
|
|
|
+ const end = this.moment(date[1], 'YYYY-MM-DD').format('YYYY-MM-DD 23:59:59');
|
|
|
+ this.filterDate = [start, end];
|
|
|
} else {
|
|
|
- this.filterDate = []
|
|
|
+ this.filterDate = [];
|
|
|
}
|
|
|
},
|
|
|
- // 操作行点击
|
|
|
+
|
|
|
+ // 行点击
|
|
|
handleRowClick(row) {
|
|
|
- this.$refs.table.toggleRowSelection(row)
|
|
|
+ this.$refs.table.toggleRowSelection(row);
|
|
|
},
|
|
|
- // 操作选择
|
|
|
+
|
|
|
+ // 选择变化
|
|
|
handleSelectionChange(val) {
|
|
|
- this.multipleSelection = val
|
|
|
+ this.multipleSelection = val;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 周末选择
|
|
|
+ changeWeekend(val) {
|
|
|
+ if (val === '是') {
|
|
|
+ this.formValidate.parse_date = '';
|
|
|
+ }
|
|
|
},
|
|
|
+
|
|
|
+ // 裁剪图片
|
|
|
cropperImg(url) {
|
|
|
this.$refs.cropperPic.imgdialogVisible = true;
|
|
|
- this.$refs.cropperPic.setNewImg(url)
|
|
|
+ this.$refs.cropperPic.setNewImg(url);
|
|
|
},
|
|
|
+
|
|
|
+ // 裁剪完成
|
|
|
cropperEnd(data) {
|
|
|
if (data) {
|
|
|
this.previewImage = data;
|
|
|
@@ -477,10 +657,73 @@ export default {
|
|
|
this.formValidate.content = data;
|
|
|
}
|
|
|
},
|
|
|
+
|
|
|
+ // 全选时段
|
|
|
+ selectAllPeriods() {
|
|
|
+ this.formValidate.cateArray = this.periodColum.map(item => item.value);
|
|
|
+ },
|
|
|
+
|
|
|
+ // 全不选时段
|
|
|
+ deselectAllPeriods() {
|
|
|
+ this.formValidate.cateArray = [];
|
|
|
+ },
|
|
|
+
|
|
|
+ // 全选季节
|
|
|
+ selectAllSeasons() {
|
|
|
+ this.formValidate.seasonArray = this.seasonColum.map(item => item.value);
|
|
|
+ },
|
|
|
+
|
|
|
+ // 全不选季节
|
|
|
+ deselectAllSeasons() {
|
|
|
+ this.formValidate.seasonArray = [];
|
|
|
+ },
|
|
|
+
|
|
|
+ // 判断是否所有时段都被选中
|
|
|
+ isAllPeriodsSelected(cateString) {
|
|
|
+ if (!cateString) return false;
|
|
|
+
|
|
|
+ const allPeriods = this.periodColum.map(item => item.value);
|
|
|
+ const selectedPeriods = cateString.split(',');
|
|
|
+
|
|
|
+ // 检查是否所有时段都被选中
|
|
|
+ return selectedPeriods.length === allPeriods.length &&
|
|
|
+ allPeriods.every(period => selectedPeriods.includes(period));
|
|
|
+ },
|
|
|
+
|
|
|
+ // 判断是否所有季节都被选中
|
|
|
+ isAllSeasonsSelected(seasonString) {
|
|
|
+ if (!seasonString) return false;
|
|
|
+
|
|
|
+ const allSeasons = this.seasonColum.map(item => item.value);
|
|
|
+ const selectedSeasons = seasonString.split(',');
|
|
|
+
|
|
|
+ // 检查是否所有季节都被选中
|
|
|
+ return selectedSeasons.length === allSeasons.length &&
|
|
|
+ allSeasons.every(season => selectedSeasons.includes(season));
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
+.centered-checkboxes {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
|
|
|
+ .el-checkbox {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-right: 15px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.checkbox-control {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .checkbox-actions {
|
|
|
+ margin-left: 15px;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
