消息区页面

src/views/news/news.vue

@@ -0,0 +1,171 @@
+<template>
+<basic-container>
+  <el-menu :default-active="activeIndex" mode="horizontal">
+    <el-menu-item index="1">我的消息</el-menu-item>
+    <el-menu-item index="2">所有消息</el-menu-item>
+  </el-menu>
+  <avue-crud :data="data" :option="option" :table-loading="showLoading" :page.sync="page" :permission="permissionList">
+    <template slot="picture" slot-scope="scope" >
+      <el-button size="small" @click="openPreview(scope)">图片</el-button>
+    </template>
+    <template slot="cz" slot-scope="scope" >
+      <el-button size="small" @click="changeProgres(scope.row)">提交进度</el-button>
+    </template>
+    <template slot="state" slot-scope="scope" >
+      <div class="icon-font">
+        <i class="el-icon-success text-success" v-if="scope.row.state == 1"></i>
+        <i class="el-icon-warning text-warning" v-if="scope.row.state == 2"></i>
+      </div>
+    </template>
+  </avue-crud>
+  <el-dialog :visible.sync="dialogVisible" width="600px" append-to-body :close-on-click-modal="false">
+    <div class="flex jc-al-c">
+      <span class="mg-r-20 titl-font">提交进度</span>
+      <el-select v-model="progres" placeholder="请选择">
+        <el-option label="已解决" :value="1"></el-option>
+        <el-option label="进入人工预处理环境" :value="2"></el-option>
+      </el-select>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="dialogVisible = false">取 消</el-button>
+      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+    </span>
+  </el-dialog>
+</basic-container>
+</template>
+
+<script>
+  import {mapGetters} from "vuex";
+  export default {
+    data() {
+      return {
+        activeIndex:"1",
+        curRow:{},
+        dialogVisible:false,
+        progres:1,
+
+        page:{
+          total:1,
+          currentPage: 1
+        },
+        showLoading:false,
+        data: [
+          {
+            time:'2022-05-26 16:20:30',
+            remainingTime:'80',
+            project:'项目',
+            contract:'合同段',
+            newType:'消息类型',
+            describe:'问题描述',
+            picture:[
+              {url:'https://img.alicdn.com/tfs/TB1uevcCrj1gK0jSZFuXXcrHpXa-1880-640.jpg'},
+              {url:'https://img.alicdn.com/tfs/TB1v28TC8v0gK0jSZKbXXbK2FXa-1880-640.jpg'},
+            ],
+            state:1,
+          }, {
+            time:'2022-05-26 16:20:31',
+            remainingTime:'79',
+            project:'项目',
+            contract:'合同段',
+            newType:'消息类型',
+            describe:'问题描述',
+            picture:[
+              {url:'https://img.alicdn.com/tfs/TB1uevcCrj1gK0jSZFuXXcrHpXa-1880-640.jpg'},
+              {url:'https://img.alicdn.com/tfs/TB1v28TC8v0gK0jSZKbXXbK2FXa-1880-640.jpg'},
+            ],
+            state:2,
+          }
+        ],
+        option:{
+          border:true,
+          align:'center',
+          menuAlign:'center',
+          menu:false,
+          column:[
+            {
+              label:'时间',
+              prop:'time',
+            },
+            {
+              label:'剩余反馈用户时间(分钟)',
+              prop:'remainingTime'
+            },
+            {
+              label:'项目',
+              prop:'project',
+            },
+            {
+              label:'合同段',
+              prop:'contract',
+            },
+            {
+              label:'消息类型',
+              prop:'newType',
+            },
+            {
+              label:'问题描述',
+              prop:'describe',
+            },
+            {
+              label:'图片',
+              prop:'picture',
+              slot:true,
+            },
+            {
+              label:'操作',
+              prop:'cz',
+              slot:true,
+            },
+            {
+              label:'处理状态',
+              prop:'state',
+              slot:true,
+            },
+          ]
+         }
+      };
+    },
+    computed: {
+      ...mapGetters(["userInfo"]),
+
+      permissionList() {
+        return {
+          addBtn: false,
+          viewBtn: false,
+          delBtn: false,
+          editBtn: false
+        };
+      },
+    },
+    created() {
+      this.init();
+      //console.log(this.userInfo)
+    },
+    methods: {
+      init(){
+
+      },
+      openPreview(scope,index=0){
+        this.$ImagePreview(scope.row.picture, index,{
+        closeOnClickModal: true,
+        // beforeClose:()=>{
+        //   this.$message.success('关闭回调')
+        // }
+      });
+      },
+      changeProgres(row){
+        this.curRow = row;
+        this.dialogVisible = true;
+      }
+    }
+  };
+</script>
+
+<style scoped lang="scss">
+  .icon-font[class^="icon-"]{
+    font-size: 26px !important;
+  }
+  .titl-font{
+    font-size: 32px;
+  }
+</style>