菜单路径修改

src/router/index.js

@@ -110,13 +110,13 @@ export const constantRoutes = [
     children: [
       {
         path: 'menuDetail',
-        component: () => import('@/views/dish/menu/detail'),
+        component: () => import('@/views/canteen/dish/menu/detail'),
         name: 'MenuDetail',
         meta: { title: '菜谱详情', icon: '' }
       },
       {
         path: 'menuEdit',
-        component: () => import('@/views/dish/menu/edit'),
+        component: () => import('@/views/canteen/dish/menu/edit'),
         name: 'menuEdit',
         meta: { title: '菜谱编辑', icon: '' }
       },

src/views/canteen/dish/menu/index.vue

@@ -85,12 +85,12 @@
                 <template slot-scope="scope">
                     <div style="display: flex;align-items: center;justify-content: center;"  v-if="activeName=='currentRecipe'">
                         <span v-if="scope.row.recipeId">{{scope.row.recipeName}}</span>
-                        <img v-if="scope.row.recipeId" src="../../../assets/canteen/replace.png" style="width: 16px;height: 16px;margin-left: 10px;cursor: pointer;" alt="" @click="choseMenuRecipe(scope.row)">
+                        <img v-if="scope.row.recipeId" src="@/assets/canteen/replace.png" style="width: 16px;height: 16px;margin-left: 10px;cursor: pointer;" alt="" @click="choseMenuRecipe(scope.row)">
                         <i v-if="scope.row.recipeId" class="el-icon-delete" style="color: red;font-size: 16px;margin-left: 10px;cursor: pointer;" @click="handleUnbind(scope.row)" ></i>
 
                         <div v-if="!scope.row.recipeId" @click="choseMenuRecipe(scope.row)" style="display: flex;align-items: center;justify-content: center;cursor: pointer;">
                             <span style="color: #0099ff;">选择菜谱</span>
-                            <img src="../../../assets/canteen/add.png" style="width: 16px;height: 16px;margin-left: 10px;" alt="">
+                            <img src="@/assets/canteen/add.png" style="width: 16px;height: 16px;margin-left: 10px;" alt="">
                         </div>
 
                     </div>

src/views/canteen/healthCenter/nutritionScience/index.vue

@@ -0,0 +1,494 @@
+<template>
+    <div class="app-container">
+        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="90px">
+        <el-form-item label="日期">
+            <el-date-picker
+                v-model="dateRange"
+                type="daterange"
+                align="right"
+                unlink-panels
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                format="yyyy-MM-dd" style="width: 220px"
+                :picker-options="pickerOptions" >
+            </el-date-picker>
+        </el-form-item>
+        <el-form-item label="文章标题">
+            <el-input v-model="queryParams.articleTitle" placeholder="请输入文章标题" maxlength="20" clearable style="width: 220px"/>
+        </el-form-item>
+
+        <el-form-item label="适用慢性病">
+            <el-select v-model="queryParams.chronicList" multiple style="width: 220px" clearable collapse-tags>
+                <el-option v-for="item in chronicOptions"
+                    :key="item.chronicId"
+                    :label="item.chronicName"
+                    :value="item.chronicId"
+                ></el-option>
+            </el-select>
+        </el-form-item>
+        <el-form-item label="文章类型">
+            <el-select v-model="queryParams.articleType"  style="width: 220px" clearable collapse-tags>
+                <el-option label="原创" value="1"></el-option>
+                <el-option label="转载" value="2"></el-option>
+            </el-select>
+        </el-form-item>
+
+        <el-form-item>
+            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        </el-form-item>
+        </el-form>
+
+        <el-row :gutter="10" class="mb8">
+            <el-col :span="1.5">
+                <el-button
+                type="primary"
+                plain
+                icon="el-icon-plus"
+                size="mini"
+                @click="handleAdd"
+                >新增</el-button>
+            </el-col>
+            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+        </el-row>
+
+        <el-table v-loading="loading" :data="tableListData" height="800" ref="multipleTable">
+            <el-table-column label="序号" align="center" width="80" type="index" fixed="left">
+                    <template slot-scope="scope">
+                        <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
+                    </template>
+            </el-table-column>
+            <el-table-column label="封面照片" align="center" prop="coverPhoto" :show-overflow-tooltip="true" >
+                <template slot-scope="scope">
+                    <img :src="scope.row.coverPhoto" v-if="scope.row.coverPhoto" alt="" style="width: 80px;height: 40px;" @click="openImg(scope.row)">
+                    <span v-else>无</span>
+                </template>
+            </el-table-column>
+            <el-table-column label="文章标题" align="center" prop="articleTitle" :show-overflow-tooltip="true"></el-table-column>
+            <el-table-column label="适用慢性病" align="center" prop="chronicNames" :show-overflow-tooltip="true"></el-table-column>
+            <el-table-column label="文章类型" align="center" prop="articleType" :show-overflow-tooltip="true">
+                <template slot-scope="scope">
+                    <span v-if="scope.row.articleType==1">原创</span>
+                    <span v-if="scope.row.articleType==2">转载</span>
+                </template>
+            </el-table-column>
+            <el-table-column label="发布时间" align="center" prop="pushTime" :show-overflow-tooltip="true">
+            </el-table-column>
+            <el-table-column label="可见状态" align="center" prop="ifVisible" :show-overflow-tooltip="true">
+                <template slot-scope="scope">
+                  <span>{{ '否' }}</span>
+                  <el-switch
+                    v-model="scope.row.ifPushed=='2'?false:true"
+                    @change="handleIfPushedChange(scope.row)">
+                  </el-switch>
+                  <span>{{ '是' }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column label="操作" align="center" width="180" class-name="small-padding fixed-width" fixed="right">
+                <template slot-scope="scope">
+                    <el-button
+                        size="mini"
+                        type="text"
+                        icon="el-icon-edit"
+                        @click="handleUpdate(scope.row)"
+                    >修改</el-button>
+                    <el-button
+                        size="mini"
+                        type="text"
+                        icon="el-icon-delete"
+                        @click="handleDelete(scope.row)"
+                    >删除</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+
+        <pagination
+        v-show="total>0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+        />
+
+        <!-- 对话框 -->
+        <el-dialog :title="title" :visible.sync="open" width="980px" append-to-body>
+            <el-form ref="form" :model="form" :rules="rules" label-width="90px">
+                <el-row>
+                    <el-col :span="12">
+                        <el-form-item label="文章标题" prop="articleTitle">
+                            <el-input v-model="form.articleTitle" placeholder="请输入文章标题" maxlength="20"/>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="文章摘要" prop="summary">
+                            <el-input v-model="form.summary" placeholder="请输入文章摘要" maxlength="30"/>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="适用慢性病" prop="chronicIdList">
+                            <el-select v-model="form.chronicIdList" multiple style="width: 100%" @change="$forceUpdate()" clearable collapse-tags>
+                                <el-option v-for="item in chronicOptions"
+                                    :key="item.chronicId"
+                                    :label="item.chronicName"
+                                    :value="item.chronicId"
+                                ></el-option>
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="文章封面" prop="coverPhoto">
+                            <el-upload
+                                :http-request="
+                                    (obj) => imgUpLoad(obj, 'fileUrl')
+                                "
+                                action="#"
+                                :limit="1"
+                                :file-list="fileList"
+                                :show-file-list="true"
+                                list-type="picture-card"
+                                accept=".png, .jpg, .jpeg"
+                                :on-success="handleAvatarSuccess"
+                                :class="{ disabled: uploadDisabled }"
+                                :on-preview="handlePictureCardPreview"
+                                :on-remove="handleRemove"
+                            >
+                                <i
+                                    class="el-icon-plus avatar-uploader-icon"
+                                ></i>
+                            </el-upload>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="24">
+                        <el-form-item label="内容"  prop="articleContent">
+                            <editor v-model="form.articleContent" :min-height="192"/>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="submitForm">确 定</el-button>
+                <el-button @click="cancel">取 消</el-button>
+            </div>
+        </el-dialog>
+
+        <el-dialog :visible.sync="dialogVisible" width="700px">
+            <img style="width: 100%;height: 100%;" :src="dialogImageUrl" alt="">
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import { dictHealthChronicApi,getHealthSciencePageApi,addHealthScienceApi,editHealthScienceApi,delHealthScienceApi,editHealthScienceStateApi  } from "@/api/healthCenter/index";
+import { imgUpLoadTwo } from '@/api/system/upload'
+
+export default {
+    name: "",
+    dicts: [],
+    data() {
+        return {
+            // 遮罩层
+            loading: true,
+            // 选中数组
+            ids: [],
+            // 非单个禁用
+            single: true,
+            // 非多个禁用
+            multiple: true,
+            // 显示搜索条件
+            showSearch: true,
+            // 总条数
+            total: 0,
+            //表格数据
+            tableListData: [],
+            title:"",
+            // 是否显示弹出层
+            open: false,
+            dateRange:[new Date(),new Date()],
+            pickerOptions: {
+                shortcuts: [{
+                    text: '最近一周',
+                    onClick(picker) {
+                    const start = new Date();
+                    const end = new Date();
+                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
+                    picker.$emit('pick', [start, end]);
+                    }
+                },{
+                    text: '最近一个月',
+                    onClick(picker) {
+                    const start = new Date();
+                    const end = new Date();
+                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+                    picker.$emit('pick', [start, end]);
+                    }
+                },{
+                    text: '最近三个月',
+                    onClick(picker) {
+                    const start = new Date();
+                    const end = new Date();
+                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 91);
+                    picker.$emit('pick', [start, end]);
+                    }
+                }]
+            },
+            chronicOptions:[],
+            // 查询参数
+            queryParams: {
+                pageNum: 1,
+                pageSize: 10,
+                articleTitle: undefined,//标题
+                chronicList:[],  //慢性病
+                articleType:null //类型
+            },
+            form: {
+                articleTitle:null,
+                summary:null,
+                chronicIdList:[],
+                coverPhoto:null,
+                articleType:1,
+                articleContent:null,
+            },//详情
+            rules: {
+                articleTitle: [
+                    { required: true, message: "文章标题不能为空", trigger: "blur" }
+                ],
+                articleContent: [
+                    { required: true, message: "文章内容不能为空", trigger: "blur" }
+                ]
+            },
+            fileList: [],//图片
+            checkUrlList: [],//图片
+            checkUrlNameList: [],//食堂图片
+            dialogVisible:false,//图片弹窗
+            dialogImageUrl:"",//图片弹窗
+        };
+    },
+    created() {
+        this.getList()
+        this.getChronicList()
+    },
+    computed: {
+        //图片上传1张后，隐藏上传框
+        uploadDisabled() {
+            return this.checkUrlList.length > 0
+        },
+    },
+    methods: {
+        //慢性病类型
+        getChronicList() {
+            dictHealthChronicApi({}).then((response) => {
+                this.chronicOptions = response.data;
+            });
+        },
+        /** 搜索按钮操作 */
+        handleQuery() {
+            this.queryParams.pageNum = 1;
+            this.getList();
+        },
+        /** 重置按钮操作 */
+        resetQuery() {
+            this.dateRange = [new Date(),new Date()]
+            this.queryParams = {
+                pageNum: 1,
+                pageSize: 10,
+                articleTitle: undefined,//标题
+                chronicList:[],  //慢性病
+                articleType:null //类型
+            }
+            this.resetForm("queryForm");
+            this.handleQuery();
+        },
+        /** 查询列表 */
+        getList() {
+            this.loading = true;
+            let param = {
+                "pageNum":this.queryParams.pageNum,
+                "pageSize":this.queryParams.pageSize,
+                "articleTitle":this.queryParams.articleTitle,
+                "articleType":this.queryParams.articleType,
+                "chronicIds":this.queryParams.chronicList.join(",")||"",
+                "startDate":this.formatDate(this.dateRange[0]),
+                "endDate":this.formatDate(this.dateRange[1])
+            }
+            // if(this.queryParams.chronicList.length>0){
+            //     this.queryParams.chronicIds = this.queryParams.chronicList.join(",")
+            // }else{
+            //     this.queryParams.chronicIds = ""
+            // }
+            getHealthSciencePageApi(param).then(response => {
+                this.tableListData = response.rows;
+                this.total = Number(response.total);
+            this.loading = false;
+            });
+        },
+        // 取消按钮
+        cancel() {
+            this.open = false;
+            this.reset();
+        },
+        // 表单重置
+        reset() {
+            this.fileList=[]
+            this.checkUrlList=[]
+            this.checkUrlNameList=[]
+            this.form = {
+                articleTitle:null,
+                summary:null,
+                chronicIdList:[],
+                coverPhoto:null,
+                articleType:1,
+                articleContent: null,
+            };
+            this.resetForm("form");
+        },
+        /** 新增按钮操作 */
+        handleAdd() {
+            this.reset();
+            this.open = true;
+            this.title = "新增";
+        },
+        handleUpdate(row) {
+            this.form = Object.assign({}, row);
+            if(this.form.coverPhoto){
+                this.fileList=[{url:this.form.coverPhoto}]
+                this.checkUrlList=[this.form.coverPhoto]
+            }else{
+                this.fileList=[]
+                this.checkUrlList=[]
+            }
+            if(this.form.chronicIds.length>0){
+              this.form.chronicIdList=this.form.chronicIds.split(",");
+            }
+            console.log("this.form",this.form);
+            this.open = true;
+            this.title = "修改";
+        },
+        /** 提交按钮 */
+        submitForm: function() {
+            this.$refs["form"].validate(valid => {
+                if (valid) {
+                    if(this.form.chronicIdList.length>0){
+                        this.form.chronicIds = this.form.chronicIdList.join(",")
+                    }else{
+                        this.form.chronicIds = ""
+                    }
+                    this.form.coverPhoto = this.checkUrlList[0]
+                    if (this.form.articleId != undefined) {
+                        editHealthScienceApi(this.form).then(response => {
+                            this.$modal.msgSuccess("修改成功");
+                            this.open = false;
+                            this.getList();
+                        });
+                    } else {
+                        addHealthScienceApi(this.form).then(response => {
+                            this.$modal.msgSuccess("新增成功");
+                            this.open = false;
+                            this.getList();
+                        });
+                    }
+                }
+            });
+        },
+        handleDelete(row) {
+            this.$modal.confirm('是否确认删除数据项？').then(function() {
+                console.log("row",row)
+                return delHealthScienceApi(row.articleId);
+            }).then(() => {
+                this.getList();
+                this.$modal.msgSuccess("删除成功");
+            }).catch(() => {});
+        },
+        openImg(row) {
+          this.dialogImageUrl = row.coverPhoto;
+          this.dialogVisible = true;
+        },
+        // 图片上传
+        imgUpLoad(param, name, index) {
+            // console.log(param,'image')
+            param.type = 'canteen'
+            imgUpLoadTwo(param).then((res) => {
+                if (res.code == 200) {
+                    this.checkUrlList.push(res.data.url)
+                    this.checkUrlNameList.push(res.data.name)
+                } else {
+                    this.$modal.msgError(res.msg)
+                }
+            })
+            .catch((error) => {
+                this.$modal.msgError(error)
+            })
+        },
+        handleAvatarSuccess(res, file) {
+            console.log('success')
+        },
+        handleRemove(file, fileList) {
+            let sum = 0
+            this.checkUrlNameList.forEach((item, index) => {
+                if (item == file.name) {
+                    sum = index
+                }
+            })
+            this.checkUrlNameList.splice(sum, 1)
+            this.checkUrlList.splice(sum, 1)
+        },
+        //图片点击查看
+        handlePictureCardPreview(file) {
+            this.dialogImageUrl = file.url
+            this.dialogVisible = true
+        },
+        //日期
+        formatDate(date) {
+            // 格式化为 YYYY-MM-DD
+            const year = date.getFullYear();
+            const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
+            const day = String(date.getDate()).padStart(2, '0');
+            return `${year}-${month}-${day}`;
+        },
+        handleIfPushedChange(row){
+           let pws=row.ifPushed;
+           let param={}
+           if(pws=="1"){
+             param={
+               articleId:row.articleId,
+               ifPushed:"2"
+             }
+           }else if(pws=="2"){
+             param={
+               articleId:row.articleId,
+               ifPushed:"1"
+             }
+           }
+           editHealthScienceStateApi(param).then(response => {
+             this.getList();
+           });
+        },
+    }
+};
+</script>
+<style lang="scss" scoped>
+    .remind-question{
+        width: 100%;
+        height: 50px;
+        font-size: 22px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    .remind-title{
+        width: 100%;
+        height: 40px;
+        font-size: 16px;
+        font-weight: bold;
+        color: #000;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    //隐藏图片上传框的css
+    ::v-deep.disabled {
+        .el-upload--picture-card {
+            display: none;
+        }
+    }
+</style>