jiaoyuju/ruoyi-ui/src/views/system/surface/index.vue

<template>
  <div class="table_total">
    <div class="table_header">
      <!-- <p>单表</p>
      <el-divider></el-divider> -->
      <div class="table_headerBtun" v-if="queryData.buttonList">
        <el-button :type=" item == 'A' ? 'primary' : item == 'M' ? 'success' : item == 'D' ? 'danger' : 'primary'" :icon="item == 'A' ? 'el-icon-plus' : item == 'M' ? 'el-icon-edit' : item == 'D' ? 'el-icon-delete' : 'el-icon-view'" plain @click="headerBtn(item)" size="small" v-for="(item,index) in queryData.buttonList.split('').filter((res) => {return res!='S'})"
          :key="index +'name'">{{item | btnConversion}}</el-button>
          <el-button  v-if="tabnaem == 1" type="warning" plain @click="headerBtn('H')" icon="el-icon-d-arrow-left" size="small" >撤回</el-button>
      </div>
      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
        <dynamic-forms :type="0" :ref="item.columnName" :config="queryParams" @inputs="changeFn" :formConfig="item"
          v-for="(item,index) in queryData.queryList" :key='index' />
        <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>
    </div>
    <!-- 内容 -->
    <div class="table_nav">
      <el-table stripe v-loading="loading" :data="postList" @selection-change="handleSelectionChange" @row-click="rowclid">
        <el-table-column type="selection" width="45" style="color: red;" align="center" />
        <template v-for="(item, index) in tabData" >
          <el-table-column :width="item.columnName =='message_title'? '200' : tabData.length>13?zjFn(item.columnComment)*19:'auto'" :label="item.columnComment" align="center" :prop="item.columnName" :key="index" show-overflow-tooltip v-if="item.columnName !== 'send_user_id' && item.columnName !== 'message_id' && item.columnName !== 'receive_user_id'">
          <!-- :style="scope.row.list_class" scope.row[scope.column.property] -->
            <template slot-scope="scope"  style="width: 100%;" >
              <img class="img_icon" v-if="item.htmlType=='imageUpload' && scope.row[scope.column.property] && scope.row[scope.column.property] !== '[]'" @click="imgBtn(JSON.parse(scope.row[scope.column.property])[0].url)"
                :src="scope.row[scope.column.property] == '[]' ? '' : JSON.parse(scope.row[scope.column.property])[0].url  " alt="">
             <span :style="scope.row.list_class" v-else-if="item.htmlType=='imageUpload' && scope.row[scope.column.property] && scope.row[scope.column.property] == '[]'">暂无图片</span>
              <span :style="scope.row.list_class" v-else-if="item.columnName == 'status' ">{{ scope.row[scope.column.property] }}</span>
              <!-- && tabnaem == 'yidu' || tabnaem == 'weidu' -->
              <div v-else-if="item.columnName == 'message_title'  && tabnaem == 'yidu' || tabnaem == 'weidu' " @click="titey(scope.row.message_id,scope.row.id)">
                 {{scope.row[scope.column.property]}}
              </div>
              <div v-else   style="width: 100%;">
                <span v-if="item.fkInfo">{{scope.row[scope.column.property].value}}</span>
                <span v-else>{{scope.row[scope.column.property]}}</span>
              </div>
            </template>
          </el-table-column>

        </template>
        <el-table-column v-if="tabnaem == 1" label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button type="text" :icon="item == 'A' ? 'el-icon-plus' : item == 'M' ? 'el-icon-edit' : item == 'D' ? 'el-icon-delete' : 'el-icon-view'" plain @click.stop="headerBtn(item,scope.row)" size="small" v-for="(item,index) in queryData.buttonList.split('').filter((res) => {return res!='S' && res!='A'})"
              :key="index +'name'">{{item | btnConversion}}</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click.stop="rogress(scope.row)"

            >查看进度</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </div>
    <BigPicture ref="BigPicture" :urls="pir_imgs"></BigPicture>
    <!-- 流程进度 -->
    <el-dialog :close-on-click-modal="false" title="流程进度" :visible.sync="modalShowdu" width="1180px" append-to-body>
      <div style="display: flex;">
        <div style="width: 60%;">
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <span style="margin-right: 10px;">未读收文</span>
              <el-button
                type="primary"
                plain
                size="mini"
                @click="eceive"
              >一键催收文</el-button>
            </el-col>
          </el-row>
          <el-table v-loading="loading" :data="listnemd" @selection-change="handleSelectionChange" stripe>
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="姓名" align="center" prop="receive_user_name" />
            <el-table-column label="部门" align="center" prop="receive_dept_name" />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  @click="eceive(scope.row,2)"
                >催收文</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div style="width: 100%; margin-left: 20px;" >
          <el-row :gutter="10" class="mb8">
            <el-col style="margin-bottom: 8px;" :span="1.5">
              <span >已读收文</span>
            </el-col>
          </el-row>
          <el-table :border="false" v-loading="loading" :data="listnemrt" >
            <el-table-column label="姓名" align="center" prop="receive_user_name" />
            <el-table-column label="部门" align="center" prop="receive_dept_name" />
            <el-table-column width="180px" label="收文时间" align="center" prop="send_message_time" />
          </el-table>
        </div>
        <Flowshoe  :instanceId="instanceId"></Flowshoe>
      </div>
    </el-dialog>
  </div>


</template>

<script>
  import {
    tableQuery,
    getQueryList,
    addbjectSave,
    getByTableName,
    delMenu,
    getObject,
    isech
  } from '@/api/system/table.js'
  import Flowshoe from '@/components/flowshoe'
  import { weiduhegw,addbjectSawen } from "@/api/system/isses";
  import {getUserProfile} from "@/api/system/config";
  import {
    mapGetters,
    mapState
  } from "vuex";
  export default {
    name: "index",
    components: {Flowshoe },
    data() {
      return {
        pir_imgs: '', // 图片链接
        // jue:'color: red;',
        tabData: [],
        multiple: true,
        single: true,
        open: false,
        // 遮罩层
        loading: true,
        total: 0,
        // 岗位表格数据
        postList: [],
        // 显示搜索条件
        showSearch: true,
        activeNames: ['1'],
        title: '',
        queryData: {},
        tabName: '',
        form: {
          table: '',
          objId: -1,
          fixedData: {
            condition: {

            }
          }
        },
        // 查询参数
        queryParams: {
          table: '',
          pageNo: 1,
          isUi: false,
          pageSize: 10,
          orderBy: 'create_time desc',
          fixedData: {
            condition: {

            }
          }
        },
        tabnaem:'',
        opeid:0,
        modalShowdu:false,
        listnemd:[],
        listnemrt:[],
        nread:{
          "table": "boman_message_receive",
          "orderBy": "create_time desc",
          pageNo:1,
          pageSize:30,
          fixedData:{
            condition:{
             message_id:0,
             status:'N',
             visible:'Y',
             send_user_id:0,
            }
          }
        },
        nreadtwo:{
          "table": "boman_message_receive",
          "orderBy": "create_time desc",
          pageNo:1,
          pageSize:30,
          fixedData:{
            condition:{
             message_id:0,
             status:'Y',
             visible:'Y',
             send_user_id:0,
            }
          }
        },
        eceivelist:{
          tableName: "urge_read_message",
          objId:-1,
          dataList:[{
          message_id:0,
          message_title:'',
          send_user_name:'',
          message_time:'',
          recieve_user_id:'',
          recieve_user_name:''
          }]
        },
        instanceId: 0,
      };
    },
    filters: {
      btnConversion(val) {
        switch (val) {
          case 'A':
            return '新增';
          case 'M':
            return '修改';
          case 'D':
            return '删除';
          case 'Q':
            return '查看';
          case 'S':
            return '提交';
          case 'U':
            return '反提交';
          case 'I':
            return '导入';
          case 'E':
            return '导出';
        }
      }
    },
    computed: {
      ...mapGetters(["sidebarRouters", "sidebar", "tabIndex"]),
    },
    mounted() {
      this.getUser()
      const route = this.$route;
      const {
        meta,
        path,
        sysTableName
      } = route;
      let items = this.sidebarRouters.filter(res => {
        return res.path == ('/' + path.split('/')[1])
      })[0].children.filter(res => {
        return res.path == path.split('/')[2]
      })[0]
      let naem = route.name.split('/')
      let nmaelist = naem[naem.length - 1]
      this.tabnaem = nmaelist
      console.log(nmaelist)
      // this.tabName = items.sysTableName
      this.tabName = naem[naem.length - 2]
      this.queryParams.table = naem[naem.length - 2]
      console.log( route)
      if(nmaelist == 1){
        this.queryParams.fixedData.condition.message_situation = nmaelist
      }else if(nmaelist == 'shouwen'){
        // this.queryParams.fixedData.condition.receive_user_id = this.queryParams.fixedData.condition.send_user_id
        // this.queryParams.fixedData.condition.send_user_id = undefined
        // this.queryParams.fixedData.condition.visible = 'Y'
      }else if(nmaelist == 'shenqingzhong'){
        this.queryParams.fixedData.condition.status = 4
      }else if(nmaelist == 2){
        this.queryParams.fixedData.condition.message_situation = 3
      }
      else if(nmaelist == 3){
        this.queryParams.fixedData.condition.message_situation = 4
      }
      else{
        this.queryParams.fixedData.condition.message_situation = undefined
      }

      // this.queryParams.fixedData.condition.message_situation
      this.form.table = items.sysTableName
    },
    methods: {
      zjFn(str) {
        let bytesCount = 0;
        for (var i = 0; i < str.length; i++)
        {
          var c = str.charAt(i);
          if (/^[\u0000-\u00ff]$/.test(c)) //匹配双字节
          {
          bytesCount += 1;
          }
          else
          {
          bytesCount += 2;
          }
        }
        return bytesCount
      },
      imgBtn(url) {
        this.pir_imgs = url
        this.$refs.BigPicture.hidden.status = true
      },
      routerFn(id, tables,index) {

        console.log(this.tabnaem)
        if (this.tabnaem == 'shouwen'  ) {
          console.log(34)
          this.$router.push({
            path: '/business/collection',
            query: {
              id,
              tables,
              tabname:'shouwen'
            },
          })
        } else if (this.tabnaem == 1) {
          this.$router.push({
            path: '/business/issue',
            query: {
              id,
              tables,
              tabname:this.tabnaem
            },
          })
        } else if(this.tabnaem == 'yidu' || this.tabnaem == 'weidu'){
          this.$router.push({
            path: '/system/pdf',
            query: {
              id:this.opeid,
              index:id,
              tables:this.tabName,
              teiwog:this.tabnaem
            },
          })
        }
        else {
          this.$router.push({
            path: '/business/issue',
            query: {
              id,
              tables,
            },
          })
        }
      },
      headerBtn(item,inhe) {
        console.log(inhe)
        const _this = this
        switch (item) {
          case 'A':
            {
              this.routerFn(-1, this.tabName)
              return
            }
          case 'M':
            {
              if (this.single && inhe == undefined) {
                this.msgInfo('请勾选一条信息')
                return
              }
              // const id = inhe.id ||  this.ids.join(',')
              let id = []
              if(inhe !== undefined){
                let jie = []
                jie.push(inhe.id)
                 id = jie
              }else{
                id =  _this.ids
                console.log(id)
              }
              this.routerFn(id, this.tabName)
              return
            }
            case 'H':
              {
               if (this.multiple) {
                 this.msgInfo('请勾选一条信息')
                 return
               }
                // _this.ids =  _this.ids.join(',')
                const id = _this.ids.join(',')
                this.$confirm('是否确认撤回数据项?', "警告", {
                  confirmButtonText: "确定",
                  cancelButtonText: "取消",
                  type: "warning"
                }).then(function() {
                  console.log(id)
                  return isech(
                    id
                  );
                }).then(() => {
                  _this.getList();
                  _this.msgSuccess("撤回成功");
                })
                return
              }
          case 'D':
            {
              if (this.multiple && inhe == undefined) {
                this.msgInfo('请勾选一条信息')
                return
              }
              //  console.log(_this.ids.join(','))
              let id = []
              if(inhe !== undefined){
                let jie = []
                jie.push(inhe.id)
                 id = jie
              }else{
                id =  _this.ids
                console.log(id)
              }
              console.log(id)
              this.$confirm('是否确认删除?', "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
              }).then(function() {
                return delMenu({
                  table: _this.tabName,
                  idList: id
                });
              }).then(() => {
                _this.getList();
                _this.msgSuccess("删除成功");
              })

              return
            }
          case 'Q':
            {
              if (this.single) {
                this.msgInfo('请勾选一条信息')
                return
              }
              // const id = this.idsty.join(',')
              const id = this.ids.join(',')
              const index = this.idsty.join(',')
              this.opeid  =  index
              // const id = -1
              this.routerFn(id, this.tabName)
              // this.handleQuery()
              return
            }
          case 'S':
            {
              return
            }
          case 'U':
            {
              return
            }
          case 'E':
            {
              this.handleExport()
              return
            }
        }
      },
      rowclid(row){
       console.log(row)
       this.opeid = row.message_id
       this.routerFn(row.id,this.tabName)
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('system/post/export', {
          ...this.queryParams
        }, `post_${new Date().getTime()}.xlsx`)
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        console.log(selection)
        this.ids = selection.map(item => item.id)
        this.idsty = selection.map(item => item.message_id)
        this.idee = selection
        this.single = selection.length != 1
        this.multiple = !selection.length
      },
      changeFn(obj) {
        for (let key in obj) {
          this.queryParams.fixedData.condition[key] = obj[key]
        }
      },
      // 表单重置
      reset() {
        this.form = {
          table: this.tabName,
          objId: '',
          fixedData: {
            condition: {

            }
          },
        };
        this.resetForm("form");
      },
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNo = 1;
        this.grabFn(this.queryData.queryList, this.queryParams.fixedData.condition)
        this.getList();
      },
      // 抓取参数
      grabFn(arr, parForm) {
        for (let item of arr) {
          if (item.htmlType == 'checkbox' || item.htmlType == 'imageUpload' || item.htmlType == 'fileUpload') {
            if (this.$refs[item.columnName][0].config.length) {
              parForm[item.columnName] = this.$refs[item.columnName][0].config
            }
          } else {
            parForm[item.columnName] = this.$refs[item.columnName][0].config[item.columnName]
          }
        }
      },
      getList() {
        getQueryList(this.queryParams).then(response => {
          this.total = response.data.total;
          this.tabData = response.data.tableHeadList
          this.postList = response.data.rows;
          for(var i = 0 ; i < this.postList.length; i++){
            console.log(this.postList[i].leavefrom_photo == '[]')
          }
          this.loading = false;
        });
      },
      init() {
        tableQuery({
          table: this.tabName,
        }).then(res => {
          let data = res.data
          this.queryData = data
          let buy = data.buttonList
          if(this.tabnaem == 1 || this.tabnaem == 'shouwen'){
            console.log(this.tabnaem)
            console.log(buy)
            this.queryData.buttonList = buy
            if(this.tabnaem == 'shouwen'){
              // this.queryData.buttonList = buy + 'Q'
              this.queryData.buttonList = buy
            }
          }else{
            this.queryData.buttonList = 'Q'
          }
        })
      },
      handleChange(val) {},
      // 点击标题
      titey(id,index){
        console.log(id)
        this.$router.push({
          path: '/system/pdf',
          query: {
            id,
            index,
            tables:this.tabName,
            teiwog:this.tabnaem
          },
        })
      },
// 用户信息
      getUser() {
        getUserProfile().then(response => {
          if(this.tabnaem == 'yidu'){
             this.queryParams.fixedData.condition.visible =  'Y'
             this.queryParams.fixedData.condition.status = 'Y'
             this.queryParams.fixedData.condition.receive_user_id = response.data.id
             this.queryParams.fixedData.condition.send_user_id = undefined
             console.log(this.queryParams.fixedData.condition.send_user_id)
          }else if(this.tabnaem == 'weidu'){
            this.queryParams.fixedData.condition.visible =  'Y'
            this.queryParams.fixedData.condition.status = 'N'
            this.queryParams.fixedData.condition.receive_user_id = response.data.id
            this.queryParams.fixedData.condition.send_user_id = undefined
          }else if(this.tabnaem == 'shouwen'){
            // this.queryParams.fixedData.condition.visible =  'Y'
            // this.queryParams.fixedData.condition.receive_user_id = response.data.id
            this.queryParams.fixedData.condition.send_user_id = undefined
          }
          else{
            this.queryParams.fixedData.condition.send_user_id = response.data.id

          }

          // this.queryParams.fixedData.condition.receive_user_id = response.data.id
          // this.user = response.data;
          // this.getLisalendar()
          // this.getLismemorandum()
          this.nread.fixedData.condition.send_user_id = response.data.id
          this.nreadtwo.fixedData.condition.send_user_id = response.data.id

          this.init();
          this.getList();
        });
      },
      // 查看流程进度
      rogress(row){
       this.modalShowdu = true
       this.instanceId = row.id
       this.nread.fixedData.condition.message_id = row.id
       this.nreadtwo.fixedData.condition.message_id = row.id
      this.querjtgoe = row
       this.weiug()
       this.yidue()

      },
      // 查看未读
      weiug(){
        this.loading = true;
        weiduhegw(this.nread).then(res => {
            console.log(res)
            this.loading = false
            this.listnemd = res.data.rows
        })
      },
      // 查看已读
      yidue(){
        this.loading = true;
        weiduhegw(this.nreadtwo).then(res => {
            console.log(res)
            this.loading = false
            this.listnemrt = res.data.rows
        })
      },
      // 催收文
      eceive(row,index){
       if (this.multiple && index == undefined) {
         this.msgInfo('请勾选一条信息')
         return
       }
       console.log(row)
       const id = row.id || this.ids.join(',')
       let huew = []
       // if(row !== undefined){
       //   this.idee = []
       // }
       if(this.idee.length > 0){
         console.log(345)
         for(var j = 0 ; j < this.idee.length; j++ ){
           this.eceivelist.dataList[j] = {message_id:0,receive_user_id:0,receive_user_name:'',message_title:'',send_user_name:'',send_user_id:0,message_time:'',}
           this.eceivelist.dataList[j].message_id = this.idee[j].message_id
           this.eceivelist.dataList[j].receive_user_id = this.idee[j].receive_user_id
           this.eceivelist.dataList[j].receive_user_name = this.idee[j].receive_user_name
           this.eceivelist.dataList[j].message_title = this.querjtgoe.message_title
           this.eceivelist.dataList[j].send_user_name = this.querjtgoe.send_user_name
           this.eceivelist.dataList[j].send_user_id = this.querjtgoe.send_user_id
           this.eceivelist.dataList[j].message_time = this.querjtgoe.message_time
         }
       }else{
         this.eceivelist.dataList =[{message_id:0,receive_user_id:0,receive_user_name:'',message_title:'',send_user_name:'',send_user_id:0,message_time:''}]
         this.eceivelist.dataList[0].message_id = row.message_id
         this.eceivelist.dataList[0].receive_user_id = row.receive_user_id
         this.eceivelist.dataList[0].receive_user_name = row.receive_user_name
         this.eceivelist.dataList[0].message_title = this.querjtgoe.message_title
         this.eceivelist.dataList[0].send_user_name = this.querjtgoe.send_user_name
         this.eceivelist.dataList[0].send_user_id = this.querjtgoe.send_user_id
         this.eceivelist.dataList[0].message_time = this.querjtgoe.message_time
       }

       console.log(this.eceivelist)
       this.adege()

       // this.querjtgoe
       // this.eceivelist.fixedData.message_id = row.message_id
       // this.eceivelist.fixedData.recieve_user_id = row.recieve_user_id
       // this.eceivelist.fixedData.recieve_user_name = row.recieve_user_name
      },
      // 催办接口
      adege(){
        addbjectSawen(this.eceivelist).then(res =>{
            console.log(res)
            if(res.code == 200){
              this.msgSuccess('提交成功');
              this.weiug()
            }
        })
      },
    },
  };
</script>


<style lang="scss">
  .el-table .cell, .el-table th div {
  	// padding-right: 0;
  }
  .img_icon {
    width: 120px;
    height: 120px;
    cursor: pointer;
    object-fit: cover;
  }

  .table_header {
    .el-divider--horizontal {
      margin-top: 16px;
    }

    .table_headerBtun {
      margin-bottom: 20px;
    }
  }

  .table_nav {
    .el-collapse-item__wrap {
      border-bottom: 0;
    }

    .el-collapse-item__header {
      border-bottom: 0;
      font-size: 15px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #3C8DBC;
      line-height: 36px;
    }

    // .el-form-item__content {
    //   width: 55%;
    // }

    .el-collapse {
      border-top: 0;

    }
  }
</style>



<style scoped lang="scss">
  .app-main {
    // background-color: #eef0ff !important;
  }

  .table_total {
    background-color: #eef0ff;
    min-height: calc(100vh - 94px);
    padding: 20px;

    // 头部
    .table_header {
      background-color: #fff;
      border-radius: 6px;
      padding: 23px 23px 0px;
      margin-bottom: 20px;

      p {
        font-size: 15px;
        font-weight: bold;
        color: #3C8DBC;
        line-height: 36px;
      }

      p::before {
        content: "";
        display: block;
        width: 18px;
        height: 8px;
        background: #3C8DBC;
        border-radius: 3px;

      }
    }

    // 内容
    .table_nav {
      background-color: #fff;
      border-radius: 6px;
      padding: 23px;
    }
  }

  p {
    margin: 0;

  }
</style>