物业监管-维修基金管理，物业管理服务-共治力量-维修基金审核:添加切换处理按钮,切换待处理已处理页面

guanqb

2024-03-02 06e162e45f637402390be4c99cc506cf1ac9de64

 src/views/propertySupervision/propertyCapitalManage.vue

@@ -1,450 +1,69 @@
<template>
  <basic-container>

    <avue-crud :option="option" :table-loading="loading" :data="data" ref="crud" v-model="form"
      @search-change="searchChange" @search-reset="searchReset" @selection-change="selectionChange"
      @current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad">
      <template slot-scope="{row, size, index}" slot="menu">
        <el-button type="text" :size="size" icon="el-icon-s-check" v-if="permission.work_todo_handle"
          @click.stop="handleWork(row)">处理
        </el-button>
        <el-button type="text" :size="size" icon="el-icon-info" v-if="permission.work_todo_detail"
          @click.stop="handleDetail(row)">详情
        </el-button>
        <el-button type="text" :size="size" icon="el-icon-search" v-if="permission.work_todo_follow"
          @click.stop="handleImage(row, index)">流程图
        </el-button>
      </template>

      <template slot="menuLeft">
    <basic-container>
        <div class="tab-list">
          <div :class="{ 'choose': typeStatus == 1 }" @click="changeType(1)">待处理</div>
          <div :class="{ 'choose': typeStatus == 2 }" @click="changeType(2)">已处理</div>
            <div :class="{ 'choose': typeStatus == 1 }" @click="changeType(1)">待处理</div>
            <div :class="{ 'choose': typeStatus == 2 }" @click="changeType(2)">已处理</div>
        </div>
      </template>
      <template slot-scope="{row, size}" slot="processDefinitionVersion">
        <el-tag :size="size">v{{ row.processDefinitionVersion }}</el-tag>
      </template>
      <template slot-scope="{row, size}" slot="linkPhone">
        <el-button :size="size" type="text" @click="showStringDispose(row, 'linkPhoneflag')"
          v-text="textDispose(row, 'linkPhoneflag', 'linkPhone')">
        </el-button>
      </template>
    </avue-crud>
    <flow-design is-dialog :is-display.sync="flowBox" :process-instance-id="processInstanceId"></flow-design>
  </basic-container>
        <div v-if="typeStatus == 1">
            <todo />
        </div>
        <div v-if="typeStatus == 2">
            <done />
        </div>
    </basic-container>
</template>

  
<script>
  import {
    mapGetters
  } from "vuex"
  import {
    todoList
  } from "@/api/work/work"
  import {
    flowCategory,
    flowRoute
  } from "@/util/flow"

  export default {
    data() {
      return {
        typeStatus: 1,
        form: {},
        selectionId: '',
        selectionList: [],
        query: {},
        loading: true,
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        processInstanceId: '',
        flowBox: false,
        workBox: false,
        option: {
          labelWidth: 120,
          searchLabelWidth: 96,
          searchShow: true,
          searchMenuSpan: 3,
          menuWidth: 210,

          height: 'auto',
          calcHeight: 30,
          tip: false,
          simplePage: true,
          border: true,
          index: true,
          // selection: true,
          editBtn: false,
          addBtn: false,
          viewBtn: false,
          delBtn: false,
          dialogWidth: 900,
          dialogClickModal: false,
          column: [{
              label: "流程分类",
              type: "select",
              row: true,
              dicUrl: "/api/blade-system/dict/dictionary?code=flow",
              props: {
                label: "dictValue",
                value: "dictKey"
              },
              dataType: "number",
              slot: true,
              prop: "category",
              // search: true,
              hide: true,
              width: 100,
            },
            {
              width: 100,
              label: '申请类型',
              prop: 'categoryName',
              // search: true,
            },
            {
              width: 220,
              overHidden: true,
              label: "小区",
              prop: "districtId",
              // search: true,
              type: 'tree',
              dicUrl: `/api/blade-district/district/getDistrictTree`,
              props: {
                label: "name",
                value: "id"
              },
              defaultExpandedKeys: ["361102003"],
              searchSpan: 5,
              span: 12,
            },
            {
              width: 110,
              label: '联系人',
              prop: 'linkman',
              // search: true,
            },
            {
              width: 120,
              label: '联系电话',
              prop: 'linkPhone',
              // search: true,
              slot: true
            },
            {
              label: '项目名称',
              prop: 'name',
              // search: true,
            },
            {
              label: '当前步骤',
              prop: 'taskName',
            },
            // {
            //   label: '流程版本',
            //   prop: 'processDefinitionVersion',
            //   // slot: true,
            //   width: 80,
            // },
            {
              width: 144,
              label: '申请时间',
              prop: 'createTime',
            },
          ]
        },
        data: []
      }
    },
    computed: {
      ...mapGetters(["permission", "flowRoutes"]),
      ids() {
        let ids = []
        this.selectionList.forEach(ele => {
          ids.push(ele.id)
        })
        return ids.join(",")
      },

      textDispose() {
        return (row, flag, type) => {
          if (row[flag] || row[type] == null) {
            return row[type]
          } else {
            if (type == 'principalIdCard') {
              return row[type].replace(/^(.{6})(?:\d+)(.{4})$/, "$1******$2")
            } else {
              return row[type].replace(/^(.{3})(?:\d+)(.{4})$/, "$1****$2")
            }
          }
import todo from './components/todo'
import done from './components/done'
export default {
    components: { todo, done },
    data () {
        return {
            typeStatus: 1,
        }
      }
    },

    methods: {

      changeType(type) {
        this.typeStatus = type
        this.page.currentPage = 1
        // this.onLoad(this.page)
      },
      showStringDispose(row, type) {
        row[type] = !row[type]
      },

      searchReset() {
        this.query = {}
        this.onLoad(this.page)
      },
      searchChange(params, done) {
        this.query = params
        this.page.currentPage = 1
        this.onLoad(this.page, params)
        done()
      },
      selectionChange(list) {
        this.selectionList = list
      },
      selectionClear() {
        this.selectionList = []
        this.$refs.crud.toggleSelection()
      },
      handleWork(row) {
        this.$router.push({
          path: `/propertySupervision/process/${flowRoute(this.flowRoutes, row.category)}/handle/${row.taskId}/${row.processInstanceId}/${row.businessId}`
        })
      },
      handleDetail(row) {
        this.$router.push({
          path: `/propertySupervision/process/${flowRoute(this.flowRoutes, row.category)}/detail/${row.processInstanceId}/${row.businessId}`
        })
      },
      handleImage(row) {
        this.processInstanceId = row.processInstanceId
        this.flowBox = true
      },
      currentChange(currentPage) {
        this.page.currentPage = currentPage
      },
      sizeChange(pageSize) {
        this.page.pageSize = pageSize
      },
      refreshChange() {
        this.onLoad(this.page, this.query)
      },
      onLoad(page, params = {}) {
        const query = {
          ...this.query,
          category: (params.category) ? flowCategory(params.category) : null
        }
        this.loading = true
        todoList(page.currentPage, page.pageSize, Object.assign(params, query)).then(res => {
          const data = {
            ...res.data.data,
            records: res.data.data.records.map(item => {
              return {
                ...item,
                'linkPhoneflag': false
              }
            })
          }
          this.page.total = data.total
          this.data = data.records
          this.loading = false
          this.selectionClear()
        })
      }
        changeType (type) {
            this.typeStatus = type
        },
    }
  }
}
</script>


  
<style lang="scss" scoped>
  .avue-upload__icon {
.avue-upload__icon {
    line-height: 6;
  }
}

  .tab-list {
.tab-list {
    display: flex;
    margin-right: 6px;
    border: 1px solid #dcdfe6;
    color: #606266;
    border-radius: 4px;
    height: 34px;
    width: 121px;
    margin-bottom: 10px;

    &>div {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 60px;
      cursor: pointer;
      font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 60px;
        cursor: pointer;
        font-size: 12px;
    }

    &>div:nth-child(2) {
      border-left: 1px solid #dcdfe6;
      border-right: 1px solid #dcdfe6;
        border-left: 1px solid #dcdfe6;
        // border-right: 1px solid #dcdfe6;
    }

    .choose {
      color: #FFF;
      background-color: #409dfe;
        color: #FFF;
        background-color: #409dfe;
    }
  }

  :deep(.avue-crud__left) {
    display: flex;
    align-items: center;
  }

  :deep(.el-drawer__header) {
    margin-bottom: 10px;
  }

  :deep(.el-radio__input.is-disabled+span.el-radio__label) {
    color: #000;
  }

  :deep(.el-radio__input.is-checked+.el-radio__label) {
    color: #409EFF !important;
  }

  :deep(.el-radio__input.is-checked .el-radio__inner::after) {
    background-color: #FFF;
  }

  :deep(.el-radio__input.is-checked .el-radio__inner) {
    background-color: #409EFF;
  }

  :deep(.el-radio) {
    margin-right: 20px;
  }

  .title {
    margin: 10px;
    height: 40px;
    background-color: #eee;
    display: flex;
    align-items: center;

    .icon {
      width: 4px;
      height: 18px;
      background-color: #409dfe;
      margin: 0 10px;
      color: transparent;
    }
  }

  .basic-info {
    padding: 0 20px;
    font-size: 14px;

    .info-item {
      display: flex;
      padding: 10px;

      .info-name {
        width: 100px;
        display: flex;
        align-items: center;
      }

      .info-value {
        display: flex;
        align-items: center;
      }
    }
  }

  .question-list {
    padding: 0 20px;
    font-size: 14px;

    .question-type {
      height: 60px;
      display: flex;
      align-items: center;
      cursor: pointer;
      justify-content: space-between;
      padding-right: 20px;

      .type-name {}

      .icon-box {}
    }

    .question-item {
      margin-bottom: 20px;
      padding: 10px;
      background: #f5f7fa;
      border-radius: 8px;

      &>div {
        margin: 14px 0;
      }

      .question-name {
        display: flex;

        .key {
          width: 80%;
          padding-right: 20px;
          word-break: break-all;
        }

        .value {
          width: 20%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }

      .yh-pic-box {
        display: flex;
        height: 100px;

        .yh-pic-name {
          width: 100px;
          display: flex;
          align-items: center;
          justify-content: left;
        }

        .yh-pic-list {
          width: 0;
          flex: 1;
          display: flex;
        }
      }

      .yh-remark {
        display: flex;

        .yh-remark-name {
          width: 100px;
          display: flex;
          align-items: center;
          justify-content: left;
        }

        .yh-remark-value {
          word-break: break-all;
        }
      }
    }

    .remark-box {
      padding: 10px;
      background-color: #f5f7fa;
      border-radius: 8px;
      min-height: 40px;
      margin-bottom: 20px;
    }
  }
}
</style>