三保工单审批流程

zhaowei

7 天以前 a4674a75bfffc500a049beafb74daaec50c8f87f

 src/views/dashboard/IndexTask.vue

@@ -1,15 +1,29 @@
<template>
  <div class="index-container-ty">
    <a-spin :spinning="loading">
      <a-row type="flex" justify="start" :gutter="3">
        <a-col :sm="24" :lg="12">
      <a-row
        type="flex"
        justify="start"
        :gutter="3"
      >
        <a-col
          :sm="24"
          :lg="12"
        >
          <a-card>
            <div slot="title" class="index-md-title">
              <img src="../../assets/daiban.png"/>
            <div
              slot="title"
              class="index-md-title"
            >
              <img src="../../assets/daiban.png" />
              我的待办【{{ dataSource1.length }}】
            </div>
            <div slot="extra">
              <a v-if="dataSource1 && dataSource1.length>0" slot="footer" @click="goPage">更多 <a-icon type="double-right" /></a>
              <a
                v-if="dataSource1 && dataSource1.length>0"
                slot="footer"
                @click="goPage"
              >更多 <a-icon type="double-right" /></a>
            </div>
            <a-table
              :class="'my-index-table tytable1'"
@@ -18,16 +32,34 @@
              rowKey="id"
              :columns="columns"
              :dataSource="dataSource1"
              :pagination="false">
              <template slot="ellipsisText" slot-scope="text">
                <j-ellipsis :value="text" :length="textMaxLength"></j-ellipsis>
              :pagination="false"
            >
              <template
                slot="ellipsisText"
                slot-scope="text"
              >
                <j-ellipsis
                  :value="text"
                  :length="textMaxLength"
                ></j-ellipsis>
              </template>

              <template slot="dayWarnning" slot-scope="text,record">
                <a-icon type="bulb" theme="twoTone" style="font-size:22px" :twoToneColor="getTipColor(record)"/>
              <template
                slot="dayWarnning"
                slot-scope="text,record"
              >
                <a-icon
                  type="bulb"
                  theme="twoTone"
                  style="font-size:22px"
                  :twoToneColor="getTipColor(record)"
                />
              </template>

              <span slot="action" slot-scope="text, record">
              <span
                slot="action"
                slot-scope="text, record"
              >
                <a @click="handleData">办理</a>
              </span>

@@ -35,14 +67,24 @@
          </a-card>
        </a-col>

        <a-col :sm="24" :lg="12">
        <a-col
          :sm="24"
          :lg="12"
        >
          <a-card>
            <div slot="title" class="index-md-title">
              <img src="../../assets/zaiban.png"/>
            <div
              slot="title"
              class="index-md-title"
            >
              <img src="../../assets/zaiban.png" />
              我的在办【{{ dataSource2.length }}】
            </div>
            <div slot="extra">
              <a v-if="dataSource2 && dataSource2.length>0" slot="footer" @click="goPage">更多 <a-icon type="double-right" /></a>
              <a
                v-if="dataSource2 && dataSource2.length>0"
                slot="footer"
                @click="goPage"
              >更多 <a-icon type="double-right" /></a>
            </div>
            <a-table
              :class="'my-index-table tytable2'"
@@ -51,16 +93,34 @@
              rowKey="id"
              :columns="columns"
              :dataSource="dataSource2"
              :pagination="false">
              <template slot="ellipsisText" slot-scope="text">
                <j-ellipsis :value="text" :length="textMaxLength"></j-ellipsis>
              :pagination="false"
            >
              <template
                slot="ellipsisText"
                slot-scope="text"
              >
                <j-ellipsis
                  :value="text"
                  :length="textMaxLength"
                ></j-ellipsis>
              </template>

              <template slot="dayWarnning" slot-scope="text,record">
                <a-icon type="bulb" theme="twoTone" style="font-size:22px" :twoToneColor="getTipColor(record)"/>
              <template
                slot="dayWarnning"
                slot-scope="text,record"
              >
                <a-icon
                  type="bulb"
                  theme="twoTone"
                  style="font-size:22px"
                  :twoToneColor="getTipColor(record)"
                />
              </template>

              <span slot="action" slot-scope="text, record">
              <span
                slot="action"
                slot-scope="text, record"
              >
                <a @click="handleData">办理</a>
              </span>

@@ -72,10 +132,16 @@
          <div style="height: 5px;"></div>
        </a-col>

        <a-col :sm="24" :lg="12">
        <a-col
          :sm="24"
          :lg="12"
        >
          <a-card>
            <div slot="title" class="index-md-title">
              <img src="../../assets/guaz.png"/>
            <div
              slot="title"
              class="index-md-title"
            >
              <img src="../../assets/guaz.png" />
              我的挂账【{{ dataSource4.length }}】
            </div>
            <a-table
@@ -85,16 +151,34 @@
              rowKey="id"
              :columns="columns"
              :dataSource="dataSource4"
              :pagination="false">
              <template slot="ellipsisText" slot-scope="text">
                <j-ellipsis :value="text" :length="textMaxLength"></j-ellipsis>
              :pagination="false"
            >
              <template
                slot="ellipsisText"
                slot-scope="text"
              >
                <j-ellipsis
                  :value="text"
                  :length="textMaxLength"
                ></j-ellipsis>
              </template>

              <template slot="dayWarnning" slot-scope="text,record">
                <a-icon type="bulb" theme="twoTone" style="font-size:22px" :twoToneColor="getTipColor(record)"/>
              <template
                slot="dayWarnning"
                slot-scope="text,record"
              >
                <a-icon
                  type="bulb"
                  theme="twoTone"
                  style="font-size:22px"
                  :twoToneColor="getTipColor(record)"
                />
              </template>

              <span slot="action" slot-scope="text, record">
              <span
                slot="action"
                slot-scope="text, record"
              >
                <a @click="handleData">办理</a>
              </span>

@@ -102,10 +186,16 @@
          </a-card>
        </a-col>

        <a-col :sm="24" :lg="12">
        <a-col
          :sm="24"
          :lg="12"
        >
          <a-card>
            <div slot="title" class="index-md-title">
              <img src="../../assets/duban.png"/>
            <div
              slot="title"
              class="index-md-title"
            >
              <img src="../../assets/duban.png" />
              我的督办【{{ dataSource3.length }}】
            </div>
            <a-table
@@ -115,16 +205,34 @@
              rowKey="id"
              :columns="columns"
              :dataSource="dataSource3"
              :pagination="false">
              <template slot="ellipsisText" slot-scope="text">
                <j-ellipsis :value="text" :length="textMaxLength"></j-ellipsis>
              :pagination="false"
            >
              <template
                slot="ellipsisText"
                slot-scope="text"
              >
                <j-ellipsis
                  :value="text"
                  :length="textMaxLength"
                ></j-ellipsis>
              </template>

              <template slot="dayWarnning" slot-scope="text,record">
                <a-icon type="bulb" theme="twoTone" style="font-size:22px" :twoToneColor="getTipColor(record)"/>
              <template
                slot="dayWarnning"
                slot-scope="text,record"
              >
                <a-icon
                  type="bulb"
                  theme="twoTone"
                  style="font-size:22px"
                  :twoToneColor="getTipColor(record)"
                />
              </template>

              <span slot="action" slot-scope="text, record">
              <span
                slot="action"
                slot-scope="text, record"
              >
                <a @click="handleData">办理</a>
              </span>

@@ -139,234 +247,279 @@
</template>

<script>
  import noDataPng from '@/assets/nodata.png'
  import JEllipsis from '@/components/jeecg/JEllipsis'
import noDataPng from '@/assets/nodata.png'
import JEllipsis from '@/components/jeecg/JEllipsis'

  const tempSs1=[{
    id:"001",
    orderNo:"电[1]1267102",
    orderTitle:"药品出问题了",
    restDay:1
  },{
    id:"002",
    orderNo:"电[4]5967102",
    orderTitle:"吃了xxx医院的药，病情越来越严重",
    restDay:0
  },{
    id:"003",
    orderNo:"电[3]5988987",
    orderTitle:"今天去超市买鸡蛋，鸡蛋都是坏的",
    restDay:7
  },{
    id:"004",
    orderNo:"电[2]5213491",
    orderTitle:"xx宝实体店高价售卖xx",
    restDay:5
  },{
    id:"005",
    orderNo:"电[1]1603491",
    orderTitle:"以红利相诱，答应退保后扣一年费用",
    restDay:0
  }]
const tempSs1 = [{
  id: "001",
  orderNo: "电[1]1267102",
  orderTitle: "药品出问题了",
  restDay: 1
}, {
  id: "002",
  orderNo: "电[4]5967102",
  orderTitle: "吃了xxx医院的药，病情越来越严重",
  restDay: 0
}, {
  id: "003",
  orderNo: "电[3]5988987",
  orderTitle: "今天去超市买鸡蛋，鸡蛋都是坏的",
  restDay: 7
}, {
  id: "004",
  orderNo: "电[2]5213491",
  orderTitle: "xx宝实体店高价售卖xx",
  restDay: 5
}, {
  id: "005",
  orderNo: "电[1]1603491",
  orderTitle: "以红利相诱，答应退保后扣一年费用",
  restDay: 0
}]

  const tempSs2=[{
    id:"001",
    orderTitle:"我要投诉这个大超市",
    orderNo:"电[1]10299456",
    restDay:6
  },{
    id:"002",
    orderTitle:"xxx医院乱开药方,售卖假药",
    orderNo:"电[2]20235691",
    restDay:0
  },{
    id:"003",
    orderTitle:"我想问问这家店是干啥的",
    orderNo:"电[3]495867322",
    restDay:7
  },{
    id:"004",
    orderTitle:"我要举报朝阳区奥森公园酒店",
    orderNo:"电[2]1193849",
    restDay:3
  },{
    id:"005",
    orderTitle:"我今天吃饭吃到一个石头子",
    orderNo:"电[4]56782344",
    restDay:9
  }]
const tempSs2 = [{
  id: "001",
  orderTitle: "我要投诉这个大超市",
  orderNo: "电[1]10299456",
  restDay: 6
}, {
  id: "002",
  orderTitle: "xxx医院乱开药方,售卖假药",
  orderNo: "电[2]20235691",
  restDay: 0
}, {
  id: "003",
  orderTitle: "我想问问这家店是干啥的",
  orderNo: "电[3]495867322",
  restDay: 7
}, {
  id: "004",
  orderTitle: "我要举报朝阳区奥森公园酒店",
  orderNo: "电[2]1193849",
  restDay: 3
}, {
  id: "005",
  orderTitle: "我今天吃饭吃到一个石头子",
  orderNo: "电[4]56782344",
  restDay: 9
}]

  //4-7天
  const tip_green = "rgba(0, 255, 0, 1)"
  //1-3天
  const tip_yellow = "rgba(255, 255, 0, 1)"
  //超期
  const tip_red = "rgba(255, 0, 0, 1)"
//4-7天
const tip_green = "rgba(0, 255, 0, 1)"
//1-3天
const tip_yellow = "rgba(255, 255, 0, 1)"
//超期
const tip_red = "rgba(255, 0, 0, 1)"

  export default {
    name: "IndexTask",
    components:{ JEllipsis },
    data() {
      return {
        loading:false,
        textMaxLength:8,
        dataSource1:[],
        dataSource2:[],
        dataSource3:[],
        dataSource4:[],
        columns: [
          {
            title: '',
            dataIndex: '',
            key:'rowIndex',
            width:50,
            fixed:'left',
            align:"center",
            scopedSlots: {customRender: "dayWarnning"}
          },
          {
            title:'剩余天数',
            align:"center",
            dataIndex: 'restDay',
            width:80
          },
          {
            title:'工单标题',
            align:"center",
            dataIndex: 'orderTitle',
            scopedSlots: {customRender: "ellipsisText"}
          },
          {
            title:'工单编号',
            align:"center",
            dataIndex: 'orderNo',
          },
          {
            title: '操作',
            dataIndex: 'action',
            align:"center",
            scopedSlots: { customRender: 'action' }
          }
        ]

      }
    },
    created() {
      this.mock();
    },
    mounted(){

    },
    methods: {
      getTipColor(rd){
        let num = rd.restDay
        if(num<=0){
          return tip_red
        }else if(num>=1 && num<4){
          return tip_yellow
        }else if(num>=4){
          return tip_green
export default {
  name: "IndexTask",
  components: { JEllipsis },
  data() {
    return {
      loading: false,
      textMaxLength: 8,
      dataSource1: [],
      dataSource2: [],
      dataSource3: [],
      dataSource4: [],
      columns: [
        {
          title: '',
          dataIndex: '',
          key: 'rowIndex',
          width: 50,
          fixed: 'left',
          align: "center",
          scopedSlots: { customRender: "dayWarnning" }
        },
        {
          title: '剩余天数',
          align: "center",
          dataIndex: 'restDay',
          width: 80
        },
        {
          title: '工单标题',
          align: "center",
          dataIndex: 'orderTitle',
          scopedSlots: { customRender: "ellipsisText" }
        },
        {
          title: '工单编号',
          align: "center",
          dataIndex: 'orderNo',
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: "center",
          scopedSlots: { customRender: 'action' }
        }
      },
      goPage(){
        this.$message.success("请根据具体业务跳转页面")
        //this.$router.push({ path: '/comp/mytask' })
      },
      mock(){
        this.dataSource1=tempSs1
        this.dataSource2=tempSs2
        this.dataSource3=tempSs1
        this.dataSource4=[]
        this.ifNullDataSource(this.dataSource4,'.tytable4')
      },

      ifNullDataSource(ds,tb){
        this.$nextTick(()=>{
          if(!ds || ds.length==0){
            var tmp = document.createElement('img');
            tmp.src=noDataPng
            tmp.width=300
            let tbclass=`${tb} .ant-table-placeholder`
            document.querySelector(tbclass).innerHTML=""
            document.querySelector(tbclass).appendChild(tmp)
          }
        })
      },
      handleData(){
        this.$message.success("办理完成")
      }



      ]

    }
  },
  created() {
    this.mock();
  },
  mounted() {

  },
  methods: {
    getTipColor(rd) {
      let num = rd.restDay
      if (num <= 0) {
        return tip_red
      } else if (num >= 1 && num < 4) {
        return tip_yellow
      } else if (num >= 4) {
        return tip_green
      }
    },
    goPage() {
      this.$message.success("请根据具体业务跳转页面")
      //this.$router.push({ path: '/comp/mytask' })
    },
    mock() {
      this.dataSource1 = tempSs1
      this.dataSource2 = tempSs2
      this.dataSource3 = tempSs1
      this.dataSource4 = []
      this.ifNullDataSource(this.dataSource4, '.tytable4')
    },

    ifNullDataSource(ds, tb) {
      this.$nextTick(() => {
        if (!ds || ds.length == 0) {
          var tmp = document.createElement('img');
          tmp.src = noDataPng
          tmp.width = 300
          let tbclass = `${tb} .ant-table-placeholder`
          document.querySelector(tbclass).innerHTML = ""
          document.querySelector(tbclass).appendChild(tmp)
        }
      })
    },
    handleData() {
      this.$message.success("办理完成")
    }




  }
}
</script>

<style>
  .my-index-table{height:270px}
  .my-index-table table{font-size: 14px !important;}
.my-index-table {
  height: 270px;
}
.my-index-table table {
  font-size: 14px !important;
}

  .index-container-ty .ant-card-head-title{padding-top: 6px;padding-bottom: 6px;}
  .index-container-ty .ant-card-extra{padding:0}
  .index-container-ty .ant-card-extra a{color:#fff}
  .index-container-ty .ant-card-extra a:hover{color:#152ede}
  .index-container-ty .ant-card-head-wrapper,.index-container-ty .ant-card-head{
    line-height:24px;
    min-height:24px;
    /*background: #90aeff;*/
    background: #7196fb;
  }
  .index-container-ty .ant-card-body{padding: 10px 12px 0px 12px}
.index-container-ty .ant-card-head-title {
  padding-top: 6px;
  padding-bottom: 6px;
}
.index-container-ty .ant-card-extra {
  padding: 0;
}
.index-container-ty .ant-card-extra a {
  color: #fff;
}
.index-container-ty .ant-card-extra a:hover {
  color: #152ede;
}
.index-container-ty .ant-card-head-wrapper,
.index-container-ty .ant-card-head {
  line-height: 24px;
  min-height: 24px;
  /*background: #90aeff;*/
  background: #7196fb;
}
.index-container-ty .ant-card-body {
  padding: 10px 12px 0px 12px;
}

  /* .index-container-ty .ant-card-actions{background: #fff}
/* .index-container-ty .ant-card-actions{background: #fff}
   .index-container-ty .ant-card-actions li {margin:2px 0;}
   .index-container-ty .ant-card-actions > li > span{width: 100%}*/

.index-container-ty .ant-table-footer {
  text-align: right;
  padding: 6px 12px 6px 6px;
  background: #fff;
  border-top: 2px solid #f7f1f1;
}

  .index-container-ty .ant-table-footer{text-align: right;padding:6px 12px 6px 6px;background: #fff;border-top: 2px solid #f7f1f1;}
.index-md-title {
  postion: relative;
  padding-left: 24px;
  width: 100%;
  color: #fff;
  font-size: 21px;
  font-family: cursive;
}
.index-md-title img {
  position: absolute;
  height: 32px;
  top: 2px;
  left: 14px;
}

  .index-md-title{
    postion:relative;
    padding-left:24px;
    width: 100%;
    color: #fff;
    font-size: 21px;
    font-family: cursive;
  }
  .index-md-title img{
    position: absolute;
    height:32px;
    top: 2px;
    left:14px;
  }

  .index-container-ty .ant-card-body{
    /*border-left:1px solid #90aeff;
.index-container-ty .ant-card-body {
  /*border-left:1px solid #90aeff;
    /*border-right:1px solid #90aeff;
    border-bottom:1px solid #90aeff;*/
  }
}

.index-container-ty .ant-table-thead > tr > th,
.index-container-ty .ant-table-tbody > tr > td {
  border-bottom: 1px solid #90aeff;
}

  .index-container-ty .ant-table-thead > tr > th,
  .index-container-ty .ant-table-tbody > tr > td{
    border-bottom: 1px solid #90aeff;
  }
.index-container-ty
  .ant-table-small
  > .ant-table-content
  > .ant-table-fixed-left
  > .ant-table-body-outer
  > .ant-table-body-inner
  > table
  > .ant-table-thead
  > tr
  > th,
.index-container-ty
  .ant-table-small
  > .ant-table-content
  > .ant-table-fixed-right
  > .ant-table-body-outer
  > .ant-table-body-inner
  > table
  > .ant-table-thead
  > tr
  > th {
  border-bottom: 1px solid #90aeff;
}

  .index-container-ty .ant-table-small > .ant-table-content > .ant-table-fixed-left > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr > th,
  .index-container-ty .ant-table-small > .ant-table-content > .ant-table-fixed-right > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr > th{
    border-bottom: 1px solid #90aeff;
  }
.index-container-ty
  .ant-table-small
  > .ant-table-content
  > .ant-table-scroll
  > .ant-table-body
  > table
  > .ant-table-thead
  > tr
  > th {
  border-bottom: 1px solid #90aeff;
}

  .index-container-ty  .ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-thead > tr > th{
    border-bottom: 1px solid #90aeff;
  }
.index-container-ty .ant-table-small {
  border: 1px solid #90aeff;
}

  .index-container-ty .ant-table-small{
    border: 1px solid #90aeff;
  }

  .index-container-ty .ant-table-placeholder {
    padding: 0
  }
.index-container-ty .ant-table-placeholder {
  padding: 0;
}
</style>