heyang

src/api/systemManagement/index.js

@@ -1,5 +1,44 @@
 import request from '@/utils/request'
-
+/**轮播图----------------------**/
+//轮播图-新增
+export function systemRotationChartAdd(data) {
+  return request({
+    url: '/system/rotationChart/add',
+    method: 'post',
+    data: data
+  })
+}
+//轮播图-编辑
+export function systemRotationChartEdit(data) {
+  return request({
+    url: '/system/rotationChart/edit',
+    method: 'post',
+    data: data
+  })
+}
+//轮播图-列表
+export function systemRotationChartList(data) {
+  return request({
+    url: '/system/rotationChart/list',
+    method: 'post',
+    data: data
+  })
+}
+//轮播图-删除
+export function systemRotationChartDelete(data) {
+  return request({
+    url: '/system/rotationChart/delete',
+    method: 'post',
+    data: data
+  })
+}
+//轮播图-详细
+export function systemRotationChartDetail(query) {
+  return request({
+    url: '/system/rotationChart/'+query,
+    method: 'get',
+  })
+}
 // 查询菜单列表
 export function listMenu(data) {
   return request({

src/views/systemManagement/chart/addPage.vue

@@ -0,0 +1,233 @@
+<template>
+  <div class="add-chart-page">
+    <div class="top-title-box">
+      <p>{{propsData.id?'编辑':'新增'}}</p>
+      <p class="reset-button-one" @click="backPage">返回</p>
+    </div>
+    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+      <el-form-item label="标题：" prop="imgName">
+        <el-input v-model="form.imgName" placeholder="请输入标题" maxLength="20" style="width:400px;"/>
+      </el-form-item>
+      <el-form-item label="类型：" prop="imgCategory">
+        <el-select v-model="form.imgCategory" placeholder="请选择类型" style="width:400px;">
+          <el-option label="轮播图" :value="1"></el-option>
+          <el-option label="文化图" :value="2"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="范围：" prop="imgRange">
+        <el-select v-model="form.imgRange" @change="imgRangeChange()" placeholder="请选择范围" style="width:400px;">
+          <el-option
+            v-for="dict in deptOptions"
+            :key="dict.deptId"
+            :label="dict.deptName"
+            :value="dict.deptId"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="排序：" prop="imgOrder">
+        <el-input v-model="form.imgOrder" placeholder="请输入排序" maxLength="5" style="width:400px;"/>
+      </el-form-item>
+      <el-form-item label="有效时间：" prop="validBeginTime">
+        <el-date-picker
+          :clearable="false"
+          v-model="dateRange"
+          size="small"
+          style="width: 400px"
+          value-format="yyyy-MM-dd"
+          type="daterange"
+          range-separator="-"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        ></el-date-picker>
+      </el-form-item>
+      <el-form-item label="内容：" prop="imgUrl">
+        <el-upload
+          class="certificate-avatar-uploader"
+          :action="uploadImgUrl"
+          :show-file-list="false"
+          accept="image/jpeg,image/gif,image/png"
+          :on-success="handleAvatarSuccess"
+          :headers="headers"
+          :before-upload="beforeAvatarUpload">
+          <p v-if="!form.imgUrl" style="background:#0183FA;color:#fff;font-weight:500;font-size:14px;text-align: center;line-height:40px;width:200px;border-radius:4px; "> + 上传图片</p>
+          <img v-if="form.imgUrl" :src="form.imgUrl" class="avatar" style="height:80px;width:80px;">
+        </el-upload>
+      </el-form-item>
+      <!--<el-form-item label="轮播图类型" prop="imgType">-->
+        <!--<template>-->
+          <!--<el-radio v-model="form.imgType" label="1">轮播</el-radio>-->
+          <!--<el-radio v-model="form.imgType" label="2">文化图</el-radio>-->
+        <!--</template>-->
+      <!--</el-form-item>-->
+    </el-form>
+    <p class="bottom-button-p inquire-button-one" @click="submitForm">保存</p>
+  </div>
+</template>
+
+<script>
+  import { getToken } from "@/utils/auth";
+  import { listDepartments } from "@/apiDemo/system/dept";
+  import { addChart, updateChart } from "@/apiDemo/laboratory/chart";
+  import { systemRotationChartAdd, systemRotationChartEdit } from '@/api/systemManagement/index'
+  import { getDeptDropList } from '@/api/commonality/permission'
+  export default {
+    name: "addPage",
+    props:{
+      propsData:{},
+    },
+    data(){
+      return{
+        uploadImgUrl: this.uploadUrl(), // 上传的图片服务器地址
+        headers: {
+          Authorization:getToken(),
+        },
+        form:{
+
+        },
+        rules:{
+          imgName:[
+            {required: true, message: '请输入轮播图标题', trigger: 'blur'},
+            { required: true, message: "请输入轮播图标题", validator: this.spaceJudgment, trigger: "blur" }
+          ],
+          imgCategory:[
+            {required: true, message: '请选择轮播图类型', trigger: 'blur'}
+          ],
+          imgRange:[
+            {required: true, message: '请选择轮播图展示范围', trigger: 'blur'}
+          ],
+          imgOrder:[
+            {required: true, message: '请输入轮播图排序序号', trigger: 'blur'},
+            { required: true, message: "请输入轮播图排序序号", validator: this.spaceJudgment, trigger: "blur" },
+            { required: true, message: "只能输入数字", validator: this.isNum, trigger: "blur" },
+          ],
+          imgUrl:[
+            {required: true, message: '请选择轮播图内容', trigger: 'blur'}
+          ],
+        },
+        dateRange:[],
+        //范围
+        deptOptions:[],
+      }
+    },
+    created() {
+
+    },
+    mounted(){
+      this.getDeptList();
+      if(this.propsData.id){
+        let obj = {
+          id : this.propsData.id,
+          imgName : this.propsData.imgName,
+          imgCategory : this.propsData.imgCategory,
+          imgRange : this.propsData.imgRange,
+          imgOrder : this.propsData.imgOrder,
+          validBeginTime : this.propsData.validBeginTime,
+          validEndTime : this.propsData.validEndTime,
+          imgUrl : this.propsData.imgUrl,
+        }
+        this.$set(this,'form',obj);
+      }
+    },
+    methods: {
+      /** 查询学院列表 */
+      // getDeptList() {
+      //   listDepartments().then(response => {
+      //     this.$set(this, 'deptOptions', response.data)
+      //     this.deptOptions.unshift({deptId:-1,deptName:'全校'})
+      //   });
+      // },
+      imgRangeChange(){
+        let self=this;
+        this.deptOptions.forEach(function(item) {
+          if (self.form.imgRange==item.deptId){
+            self.$set(self.form, 'imgRangeName', item.deptName)
+          }
+        })
+      },
+      //查询学院列表
+      getDeptList(){
+        getDeptDropList({deptName:"",level:2,deptType:1}).then(response => {
+          this.$set(this, 'deptOptions', response.data)
+        });
+      },
+      // 返回按钮
+      backPage(){
+        this.$parent.buttonClick(1);
+      },
+      /** 提交按钮 */
+      submitForm() {
+        this.$refs["form"].validate(valid => {
+          if (valid) {
+            let obj = JSON.parse(JSON.stringify(this.form))
+            if(this.dateRange[0]){
+              obj.validBeginTime = this.dateRange[0]+'T00:00:00'
+              obj.validEndTime = this.dateRange[1]+'T23:59:59'
+            }else{
+              obj.validBeginTime = "";
+              obj.validEndTime = "";
+            }
+            if (this.form.id != null) {
+              systemRotationChartEdit(obj).then( response => {
+                this.msgSuccess("修改成功");
+                this.$parent.buttonClick(1);
+              });
+            } else {
+              systemRotationChartAdd(obj).then( response => {
+                this.msgSuccess("新增成功");
+                this.$parent.buttonClick(1);
+              });
+            }
+          }
+        });
+      },
+      //上传
+      handleAvatarSuccess(res, file) {
+        this.$set(this.form,'imgUrl',res.data.url);
+        this.$forceUpdate()
+      },
+      beforeAvatarUpload(file) {
+        let type = false;
+        console.log('file',file);
+        if (file.type == 'image/png' || file.type == 'image/jpeg' || file.type == 'image/gif') {
+          type = true;
+        }else{
+          this.$message.error('只能上传png/jpeg/gif格式图片');
+          type = false;
+        }
+        return type;
+      },
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+  .add-chart-page{
+    flex:1;
+    display: flex!important;
+    flex-direction: column;
+    *{
+      margin:0;
+    }
+    .top-title-box{
+      display: flex;
+      border-bottom:1px solid #dedede;
+      p:nth-child(1){
+        flex:1;
+        margin-left:20px;
+        color:#0045af;
+        line-height:80px;
+        font-size:18px;
+      }
+      p:nth-child(2){
+        margin:20px;
+      }
+    }
+    .bottom-button-p{
+      display: block;
+      margin:40px auto;
+    }
+    .el-form-item{
+      margin-top:30px;
+    }
+  }
+</style>

src/views/systemManagement/chart/index.vue

@@ -0,0 +1,551 @@
+<template>
+  <div class="app-container char-page">
+    <div class="char-max-page" v-if="pageType == 1">
+      <div class="top-button-max-box">
+        <div class="top-button-box" @click="buttonPageType(1)">
+          <p :class="queryParams.tagCard == 1 ? 'p-color':''">展示中</p>
+          <p :class="queryParams.tagCard == 1 ? 'p-back':''"></p>
+        </div>
+        <div class="top-button-box" @click="buttonPageType(2)">
+          <p :class="queryParams.tagCard == 2 ? 'p-color':''">待展示</p>
+          <p :class="queryParams.tagCard == 2 ? 'p-back':''"></p>
+        </div>
+        <div class="top-button-box" @click="buttonPageType(3)">
+          <p :class="queryParams.tagCard == 3 ? 'p-color':''">已过期</p>
+          <p :class="queryParams.tagCard == 3 ? 'p-back':''"></p>
+        </div>
+      </div>
+      <div class="char-page-min">
+        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
+          <el-form-item label="关键字" prop="searchValue">
+            <el-input
+              v-model="queryParams.searchValue"
+              placeholder="标题/创建人"
+              clearable
+              size="small"
+            />
+          </el-form-item>
+          <el-form-item label="展开时间" label-width="90px">
+            <el-date-picker
+              :clearable="false"
+              v-model="dateRange"
+              size="small"
+              style="width: 240px"
+              value-format="yyyy-MM-dd"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            ></el-date-picker>
+          </el-form-item>
+          <p class="page-inquire-common-style-button" @click="handleQuery">查询</p>
+          <p class="page-reset-common-style-button" @click="resetQuery">重置</p>
+          <p class="page-submit-common-style-button"
+             style="float: right;"
+             @click="tableButton(2)"
+             v-hasPermiRouter="['cabinet:info:add']"
+          >新增</p>
+<!--          <el-form-item style="float: right;">
+            <el-col :span="1.5">
+              <p class="add-button-one-120"
+                 @click="buttonClick(2)"
+                 v-hasPermi="['laboratory:chart:add']"
+              ><i class="el-icon-plus"></i>新增</p>
+            </el-col>
+          </el-form-item>
+          <el-form-item>
+            <p class="inquire-button-one" style="margin:0 20px;" @click="handleQuery">查询</p>
+            <p class="reset-button-one" @click="resetQuery">重置</p>
+          </el-form-item>-->
+        </el-form>
+        <el-table style="margin:20px 0;" v-loading="loading" border :data="chartList" @selection-change="handleSelectionChange">
+          <el-table-column label="内容" align="left" prop="imgUrl" width="180">
+            <template slot-scope="scope">
+              <img style="width:100px;height:74px;display: block;margin:0 auto;" :src="scope.row.imgUrl">
+            </template>
+          </el-table-column>
+          <el-table-column label="标题" align="left" prop="imgName"/>
+          <el-table-column label="类型" align="left" prop="imgCategory" width="140px">
+            <template slot-scope="scope">{{scope.row.imgCategory == 1?'轮播图':(scope.row.imgCategory == 2?'文化图':'')}}</template>
+          </el-table-column>
+          <el-table-column label="展示范围" align="left" prop="imgRangeName" width="200"/>
+          <el-table-column label="展示时间" align="left" prop="validBeginTime" width="300">
+            <template slot-scope="scope">
+              <span>{{scope.row.validBeginTime}}-{{scope.row.validEndTime}}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="创建人" align="left" prop="imgName" width="200">
+            <template slot-scope="scope">
+              <div style="display: flex">
+                <span style="height:23px;width:90px;margin-right:10px;overflow:hidden">{{scope.row.createBy}}</span>
+                <el-switch
+                  @click.native="statusCaptcha(scope.row)"
+                  class="switch captcha-img"
+                  :active-value="1"
+                  :inactive-value="2"
+                  active-color="#0183FA"
+                  inactive-color="#999"
+                  v-model="scope.row.imgType"
+                  active-text="打开"
+                  inactive-text="关闭"
+                  disabled
+                ></el-switch>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="230" show-overflow-tooltip v-if="tableButtonType">
+            <template slot-scope="scope">
+              <div class="table-button-box">
+                <p class="table-button-null"></p>
+                <p class="table-button-p"
+                   @click="tableButton(3,scope.row)"
+                   v-hasPermiRouter="['door:stock:list']"
+                >详情</p>
+                <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)"
+                             v-hasPermiRouter="['cabinet:info:edit','cabinet:info:del']">
+                  <p class="table-button-p">更多>></p>
+                  <el-dropdown-menu slot="dropdown">
+                    <el-dropdown-item command="2" v-hasPermiRouter="['cabinet:info:edit']">编辑</el-dropdown-item>
+                    <el-dropdown-item command="3" v-hasPermiRouter="['cabinet:info:del']">删除</el-dropdown-item>
+                  </el-dropdown-menu>
+                </el-dropdown>
+                <p class="table-button-null"></p>
+              </div>
+            </template>
+          </el-table-column>
+<!--          <el-table-column label="操作" align="left" class-name="small-padding fixed-width" width="160" v-if="tableButtonType">
+            <template slot-scope="scope">
+              <div class="button-box">
+                <p class="table-min-button" @click="buttonClick(3,scope.row)">查看</p>
+                <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)">
+                  <span class="table-min-button">
+                    更多<i class="el-icon-d-arrow-right el-icon&#45;&#45;right"></i>
+                  </span>
+                  <el-dropdown-menu slot="dropdown">
+                    <el-dropdown-item command="1" v-hasPermiAnd="['laboratory:chart:query','laboratory:chart:edit']">编辑</el-dropdown-item>
+                    <el-dropdown-item command="2" v-hasPermi="['laboratory:chart:remove']">删除</el-dropdown-item>
+                  </el-dropdown-menu>
+                </el-dropdown>
+              </div>
+            </template>
+          </el-table-column>-->
+        </el-table>
+        <pagination :page-sizes="[20, 30, 40, 50]"
+          v-show="total>0"
+          :total="total"
+          :page.sync="queryParams.pageNum"
+          :limit.sync="queryParams.pageSize"
+          @pagination="getList"
+        />
+      </div>
+    </div>
+    <add-page v-if="pageType == 2" :propsData="propsData"></add-page>
+    <info-page v-if="pageType == 3" :propsData="propsData"></info-page>
+    <!-- 添加或修改轮播图对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body :close-on-click-modal="false">
+      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+        <el-form-item label="图片名称" prop="imgName">
+          <el-input v-model="form.imgName" placeholder="请输入图片名称" />
+        </el-form-item>
+        <el-form-item label="上传图片" prop="imgUrl">
+          <el-upload
+            class="certificate-avatar-uploader"
+            :action="uploadImgUrl"
+            :show-file-list="false"
+            accept="image/jpeg,image/gif,image/png"
+            :on-success="handleAvatarSuccess"
+            :headers="headers"
+            :before-upload="beforeAvatarUpload">
+            <img v-if="form.imgUrl" :src="form.imgUrl" class="avatar" style="height:80px;width:80px;">
+            <i v-if="!form.imgUrl" class="el-icon-plus avatar-uploader-icon"></i>
+          </el-upload>
+        </el-form-item>
+        <el-form-item label="轮播图类型" prop="imgType">
+          <template>
+            <el-radio v-model="form.imgType" label="1">轮播</el-radio>
+            <el-radio v-model="form.imgType" label="2">文化图</el-radio>
+          </template>
+        </el-form-item>
+      </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>
+  </div>
+</template>
+
+<script>
+import { listChart, getChart, delChart, addChart, updateChart, editRotationType } from "@/apiDemo/laboratory/chart";
+import {
+  systemRotationChartDelete,
+  systemRotationChartDetail,
+  systemRotationChartList
+} from '@/api/systemManagement/index'
+import { getToken } from "@/utils/auth";
+import addPage from "./addPage.vue"
+import infoPage from "./infoPage.vue"
+import { chemicalCabinetDelete, chemicalCabinetDetail, chemicalCabinetGetDoorList } from '@/api/chemicalManage'
+
+export default {
+  name: "Chart",
+  components: {
+    addPage,
+    infoPage
+  },
+  data() {
+    return {
+      pageType:1,
+      tableButtonType:this.hasPermiDom([]),
+      tableDropdownType:this.hasPermiDom([]),
+      uploadImgUrl: this.uploadUrl(), // 上传的图片服务器地址
+      headers: {
+        Authorization: "Bearer " + getToken(),
+      },
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 轮播图表格数据
+      chartList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        tagCard:1,
+        pageNum: 1,
+        pageSize:20,
+        searchValue: null,
+        validBeginTime:null,
+        validEndTime:null,
+      },
+      // 表单参数
+      form: {
+        imgType: '1'
+      },
+
+      // 表单校验
+      rules: {
+        imgName: [
+          { required: true, message: "请输入名称", trigger: "blur" },
+          { required: true, message: "请输入名称", validator: this.spaceJudgment, trigger: "blur" }
+        ],
+        imgUrl: [
+          { required: true, message: "请上传图片", trigger: "blur" },
+        ],
+        imgType: [
+          { required: true, message: "请选择轮播图类型", trigger: "blur" },
+        ],
+      },
+      dateRange:[],
+      propsData:{}
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    tableButton(type,row){
+      let self = this;
+      if(type == 1){
+
+      }else if(type == 2){
+        //新增
+        this.$set(this,'pageType',2);
+        this.$set(this,'propsData','');
+      }else if(type == 'out'){
+        //返回并刷新
+        this.$set(this,'pageType',1);
+        this.getList();
+      }
+    },
+    //更多
+    handleCommand(val,row){
+      let self = this;
+      if(val == '1'){
+
+      }else if(val == '2'){
+        //编辑
+        systemRotationChartDetail({cabinetId:row.cabinetId}).then(response => {
+          this.$set(this,'propsData',response.data);
+          this.$set(this,'pageType',2);
+        })
+      }else if(val == '3'){
+        //删除
+        this.$confirm('是否确认删除?', "警告", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(function() {
+        }).then(() => {
+          systemRotationChartDelete({id:row.id}).then(response => {
+            self.msgSuccess(response.message)
+            self.getList();
+          });
+        }).catch(() => {});
+      }
+    },
+    //开启关闭切换
+    statusCaptcha(row){
+      let self = this;
+      let text = row.imgType==1?'关闭':(row.imgType==2?'开启':'')
+      this.$confirm('是否确认'+text+'?', "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(function() {
+        systemRotationChartDetail(row.id).then( response => {
+          self.msgSuccess('操作成功');
+          row.imgType = response.data;
+        });
+      }).then(() => {
+      }).catch(() => {});
+    },
+    buttonClick(type,row){
+      if(this.pageType!=type){
+        if(type == 1){
+          this.pageType = type
+          this.getList();
+          this.propsData = {};
+        }else if(type == 3){
+          const id = row.id || this.ids
+          systemRotationChartDetail(id).then( response => {
+            this.$set(this,'propsData',response.data)
+            this.pageType = 3
+          });
+        }else{
+          this.pageType = type
+        }
+      }
+    },
+
+    // 选项卡切换
+    buttonPageType(type){
+      if(this.queryParams.tagCard != type){
+        this.queryParams.tagCard = type;
+        this.queryParams.pageNum = 1;
+        this.getList();
+      }
+    },
+    //上传
+    handleAvatarSuccess(res, file) {
+      this.form.imgUrl = res.data.url;
+      this.$forceUpdate()
+    },
+    beforeAvatarUpload(file) {
+      let type = false;
+      console.log('file',file);
+      if (file.type == 'image/png' || file.type == 'image/jpeg' || file.type == 'image/gif') {
+        type = true;
+      }else{
+        this.$message.error('只能上传png/jpeg/gif格式图片');
+        type = false;
+      }
+      return type;
+    },
+    /** 查询轮播图列表 */
+    getList() {
+      this.loading = true;
+      if(this.dateRange&&this.dateRange.length>0) {
+        this.queryParams.validBeginTime=this.dateRange[0]
+        this.queryParams.validEndTime=this.dateRange[1]
+      } else {
+        this.queryParams.validBeginTime=null;
+        this.queryParams.validEndTime=null
+      }
+      systemRotationChartList(this.queryParams).then( response => {
+        this.chartList =  response.data.records;
+        this.total =  response.data.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        imgName: null,
+        imgUrl: null,
+        createBy: null,
+        createTime: null,
+        imgType: '1',
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.dateRange = [];
+      this.resetForm("queryForm");
+      this.queryParams.validBeginTime = null;
+      this.queryParams.validEndTime = null;
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加轮播图";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id || this.ids
+      getChart(id).then( response => {
+        this.$set(this,'propsData',response.data)
+        this.pageType = 2
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.id != null) {
+            updateChart(this.form).then( response => {
+              this.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addChart(this.form).then( response => {
+              this.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids;
+      this.$confirm('是否确认删除?', "警告", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(function() {
+          return delChart(ids);
+        }).then(() => {
+          this.getList();
+          this.msgSuccess("删除成功");
+        }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('laboratory/chart/export', {
+        ...this.queryParams
+      }, `laboratory_chart.xlsx`)
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+  .char-page{
+    flex:1;
+    display: flex!important;
+    flex-direction: column;
+    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
+    overflow: hidden;
+    *{
+      margin:0;
+    }
+    .char-max-page{
+      flex:1;
+      display: flex!important;
+      flex-direction: column;
+      .top-button-max-box{
+        display: flex;
+        padding:6px 10px 0;
+        border-bottom:1px solid #D8D8D8;
+        .top-button-box{
+          height:73px;
+          padding:0 25px;
+          p:nth-child(1){
+            line-height:68px;
+            text-align: center;
+            font-weight:500;
+            cursor: pointer;
+          }
+          p:nth-child(2){
+            height:5px;
+            border-radius:2px;
+          }
+          .p-color{
+            color:#0045AF;
+          }
+          .p-back{
+            background: #0045AF;
+          }
+        }
+      }
+      .char-page-min{
+        flex:1;
+        display: flex!important;
+        flex-direction: column;
+        padding:20px!important;
+        overflow: hidden;
+      }
+    }
+    .button-box{
+      width:190px;
+      display: flex;
+      margin:0 auto;
+    }
+  }
+</style>
+<style lang="scss">
+  .char-page{
+    .char-page-min{
+      .switch .el-switch__label {
+        position: absolute;
+        display: none;
+        color: #fff !important;
+      }
+      .switch .el-switch__label--right {
+        z-index: 1;
+      }
+      .switch .el-switch__label--right span{
+        margin-left: 10px;
+      }
+      .switch .el-switch__label--left {
+        z-index: 1;
+      }
+      .switch .el-switch__label--left span{
+        margin-left: 24px;
+      }
+      .switch .el-switch__label.is-active {
+        display: block;
+      }
+      .switch.el-switch .el-switch__core,
+      .el-switch .el-switch__label {
+        width: 64px !important;
+        margin: 0;
+      }
+    }
+  }
+</style>

src/views/systemManagement/chart/infoPage.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="infoPage">
+    <div class="top-title-box">
+      <p>详情</p>
+      <p class="reset-button-one" @click="backPage">返回</p>
+    </div>
+    <div class="text-box">
+      <p>标题</p>
+      <p>{{propsData.imgName}}</p>
+    </div>
+    <div class="text-box">
+      <p>类型</p>
+      <p>{{propsData.imgCategory == 1?'轮播图':(propsData.imgCategory == 2?'文化图':'')}}</p>
+    </div>
+    <div class="text-box">
+      <p>范围</p>
+      <p>{{propsData.imgRangeName}}</p>
+    </div>
+    <div class="text-box">
+      <p>排序</p>
+      <p>{{propsData.imgOrder}}</p>
+    </div>
+    <div class="text-box">
+      <p>有效期</p>
+      <p>{{propsData.validBeginTime}}-{{propsData.validEndTime}}</p>
+    </div>
+    <div class="text-box">
+      <p>内容</p>
+      <img :src="propsData.imgUrl" @click="lockImg(propsData.imgUrl)">
+    </div>
+    <!--查看图片-->
+    <el-dialog :title="imgTitle" :visible.sync="imgOpen" width="1200px" append-to-body :close-on-click-modal="false">
+      <div class="scrollbar-box" style="width:1160px;margin:0 auto;max-height:700px;overflow-y: scroll">
+        <img :src="imgUrl" style="display:block;max-width:1160px;margin:0 auto;">
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "infoPage",
+    props:{
+      propsData:{},
+    },
+    data(){
+      return{
+        //查看图片
+        imgOpen:false,
+        imgTitle:"",
+        imgUrl:"",
+      }
+    },
+    created() {
+
+    },
+    methods: {
+      //查看图片
+      lockImg(url){
+        console.log("url",url);
+        this.imgTitle = "查看";
+        this.imgUrl = url;
+        this.imgOpen = true;
+      },
+      // 返回按钮
+      backPage(){
+        this.$parent.buttonClick(1);
+      },
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .infoPage{
+    flex:1;
+    display: flex!important;
+    flex-direction: column;
+    *{
+      margin:0;
+    }
+    .top-title-box{
+      display: flex;
+      border-bottom:1px solid #dedede;
+      margin-bottom:30px;
+      p:nth-child(1){
+        flex:1;
+        margin-left:20px;
+        color:#0045af;
+        line-height:80px;
+        font-size:18px;
+      }
+      p:nth-child(2){
+        margin:20px;
+      }
+    }
+    .text-box{
+      display: flex;
+      margin:0 40px;
+      p{
+        line-height: 50px;
+        font-weight: 500;
+      }
+      p:nth-child(1){
+        width:100px;
+        text-align: right;
+        color:#999;
+        margin-right:20px;
+        span{
+          color:#FF3131;
+          margin-right:5px;
+        }
+      }
+      p:nth-child(2){
+        color:#333333;
+      }
+      img{
+        margin-top:10px;
+        width:200px;
+        height:150px;
+        cursor: pointer
+      }
+    }
+  }
+</style>