supplier_system/src/dashoo.cn/frontend_web/src/pages/system/auditsetting/index.vue

<template>
  <div>
    <el-breadcrumb class="heading">
      <el-breadcrumb-item :to="{ path: '/' }">平台首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/system/auditsetting' }">单位审批步骤自定义配置</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card" style="height: calc(100vh - 115px);">
      <div slot="header">
        <span>
          <i class="icon icon-table2"></i> 自定义配置
        </span>
        <span style="float: right;">
          <router-link :to="'/system/auditsetting/add/operation?step='+this.$route.query.step">
            <el-button type="primary" size="mini" style="margin-left:10px; margin-top: -4px;">添加</el-button>
          </router-link>
        </span>
        <el-form ref="form" :inline="true" style="float: right; margin-top: -10px">
          <!--<el-form-item label="上报时间">
            <el-date-picker size="mini" style="width: 220px" v-model="CreateOn" type="daterange" range-separator="至"
                            start-placeholder="生成日期" end-placeholder="结束日期"></el-date-picker>
          </el-form-item>-->
          <el-form-item label="上级组织" label-width="120px" v-if="false">
            <el-cascader :options="orgtreelist" :props="orgtreeprops" change-on-select :show-all-levels="false" v-model="selectedorg"
                         placeholder="请选择组织"></el-cascader>
          </el-form-item>

          <el-form-item>
            <el-dropdown split-button type="primary" size="mini" @click="handleSearch" @command="searchCommand">
              查询
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="search">高级查询</el-dropdown-item>
                <el-dropdown-item command="clear">查询重置</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-form-item>
        </el-form>
      </div>
      <el-table :data="entityList" border height="calc(100vh - 243px)" style="width: 100%" @sort-change="orderby">
        <el-table-column label="操作" width="160" align="center" fixed>
          <template slot-scope="scope">
            <router-link :to="'/system/auditsetting/' + scope.row.Id + '/operation'">
              <el-button type="primary" title="编辑" size="mini">编辑</el-button>
            </router-link>

            <el-popover placement="top" title="提示">
              <el-alert
                title=""
                description="确认要删除吗？"
                trigger="click"
                type="warning"
                :closable="false">
              </el-alert>
              <br/>
              <div style="text-align: right; margin: 0">
                <el-button type="primary" size="mini" @click="deleteEntity(scope.row)">删除</el-button>
              </div>
              <el-button slot="reference" type="plain" title="删除" style="margin-left:3px" size="mini">删除</el-button>
            </el-popover>
          </template>
        </el-table-column>

        <el-table-column v-for="column in tableColumns" :key="column.Id"
                         v-if="column.prop != 'CreateOn'" :prop="column.prop" sortable min-width="100" :label="column.label" align="center" show-overflow-tooltip></el-table-column>

        <!--<el-table-column prop="CreateOn" sortable min-width="150" label="生成时间" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ jstimehandle(scope.row.CreateOn+'') }}
          </template>
        </el-table-column>-->
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                     :page-sizes="[10, 15, 20, 25]" :page-size="size" layout="total, sizes, prev, pager, next, jumper" :total="currentItemCount">
      </el-pagination>
    </el-card>

    <el-dialog title="高级查询" :visible.sync="dialogVisible" width="720px">
      <el-form ref="advancedsearchForm" label-width="110px">
        <el-row>

          <el-col :span="12">
            <el-form-item label="生成时间">
              <el-date-picker size="mini" v-model="CreateOn" type="daterange" style="width:100%" range-separator="至"
                              start-placeholder="生成日期" end-placeholder="结束日期"></el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="单位ID">
              <el-input size="mini" v-model="searchForm.OrganizeId" style="width:100%" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="单位名称">
              <el-input size="mini" v-model="searchForm.OrganizeName" style="width:100%" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="审批步骤编码">
              <el-input size="mini" v-model="searchForm.AuditStepCode" style="width:100%" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="审批步骤名称">
              <el-input size="mini" v-model="searchForm.AuditStepName" style="width:100%" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="角色ID">
              <el-input size="mini" v-model="searchForm.RoleId" style="width:100%" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="角色名称">
              <el-input size="mini" v-model="searchForm.RoleName" style="width:100%" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="备注">
              <el-input size="mini" v-model="searchForm.Remark" style="width:100%" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>

        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="handleSearch">查 询</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  import api from '@/api/system/auditsetting'

  export default {
    computed: {
      ...mapGetters({
        authUser: 'authUser'
      })
    },
    name: 'oilauditsetting',

    data () {
      return {
        dialogVisible: false,
        // 列表数据
        entityList: [],
        // 分页参数
        size: 10,
        currentPage: 1,
        currentItemCount: 0,
        ACode: "",
        // 列表排序
        Column: {
          Order: '',
          Prop: ''
        },
        // 查询时间
        CreateOn: [new Date(new Date().getTime() - 30 * 24 * 60 * 60 * 1000), new Date()],
        // 查询项
        searchFormReset: {},
        searchForm: {
          Id: '',
          OrganizeId: '',
          OrganizeName: '',
          AuditStepCode: '',
          AuditStepName: '',
          RoleId: '',
          RoleName: '',
          Remark: '',
          IsDelete: '',
          CreateOn: '',
          CreateUserId: '',
          CreateBy: '',
          ModifiedOn: '',
          ModifiedUserId: '',
          ModifiedBy: ''
        },
        tableColumns: [
          {
            prop: 'OrganizeName',
            label: '单位名称',
            width: 100,
            sort: true
          },

          {
            prop: 'AuditStepCode',
            label: '审批步骤编码',
            width: 100,
            sort: true
          },

          {
            prop: 'AuditStepName',
            label: '审批步骤名称',
            width: 100,
            sort: true
          },
          {
            prop: 'RoleName',
            label: '角色名称',
            width: 100,
            sort: true
          },
          {
            prop: 'WorkFlowName',
            label: '工作流名称',
            width: 100,
            sort: true
          },
          {
            prop: 'Remark',
            label: '备注',
            width: 100,
            sort: true
          },

          {
            prop: 'CreateOn',
            label: '创建时间',
            width: 100,
            sort: true
          }
        ]
      }
    },
    created () {
      // 查询条件初始值备份
      Object.assign(this.searchFormReset, this.searchForm)
      // 查询列表
        if (this.$route.query.step == 1){
          //企业法规处审核
          this.ACode = "FIRST_TRIAL"
        } else if (this.$route.query.step == 2) {
          //二级单位复审
           this.ACode = "SECOND_TRIAL"
        } else if (this.$route.query.step == 3) {
          //业务处室接收
           this.ACode = "PROF_RECE"
        } else if (this.$route.query.step == 4) {
          //业务处室专业审核
           this.ACode = "PROF_AUDIT"
        } else if (this.$route.query.step == 5) {
          //集中评审
           this.ACode = "PROF_CONCENT"
        } else if (this.$route.query.step == 6) {
          //企业法规处审核
           this.ACode = "PROF_REGULATION"
        }
      this.initDatas()
      // his.getDictOptions()
    },
    methods: {
      initDatas () {
        // 分页及列表条件
      
        let params = {
          _currentPage: this.currentPage,
          _size: this.size,
          Order: this.Column.Order,
          Prop: this.Column.Prop,
          Code: this.ACode
        }
        let myCreateOn = []
        // 解析时间
        if (this.CreateOn.length === 2) {
          this.CreateOn[1].setHours(23)
          this.CreateOn[1].setMinutes(59)
          this.CreateOn[1].setSeconds(59)
          myCreateOn.push(this.formatDateTime(this.CreateOn[0]))
          myCreateOn.push(this.formatDateTime(this.CreateOn[1]))
        }
        // 查询条件
        Object.assign(params, this.searchForm)
        // 访问接口
        api.getList(myCreateOn.join(','), params, this.$axios).then(res => {
          this.entityList = res.data.items
          this.currentItemCount = res.data.currentItemCount
        }).catch(err => {
          console.error(err)
        })
      },

      /* getDictOptions () {
        api.getDictList(this.$axios).then(res => {
          this.searchForm.OrganizeId = res.data.items['OrganizeId']
        }).catch(err => {
          console.error(err)
        })
      }, */

      searchCommand (command) {
        if (command === 'search') {
          this.dialogVisible = true
        } else if (command === 'clear') {
          this.clearSearch()
        }
      },
      // 列表排序功能
      orderby (column) {
        if (column.order === 'ascending') {
          this.Column.Order = 'asc'
        } else if (column.order === 'descending') {
          this.Column.Order = 'desc'
        }
        this.Column.Prop = column.prop
        this.initDatas()
      },
      clearSearch () {
        Object.assign(this.searchForm, this.searchFormReset)
        // this.searchForm = this.searchFormReset;
        this.CreateOn = ''
        this.initDatas()
      },
      handleSearch () {
        this.currentPage = 1
        this.dialogVisible = false
        this.initDatas()
      },
      handleCurrentChange (value) {
        this.currentPage = value
        this.initDatas()
      },
      handleSizeChange (value) {
        this.size = value
        this.currentPage = 1
        this.initDatas()
      },
      deleteEntity (row) {
        row.deleteConfirmFlag = false
        api.deleteEntity(row.Id, this.$axios).then(res => {
          if (res.data.code === 0) {
            this.initDatas()
            this.$message({
              type: 'success',
              message: res.data.message
            })
          } else {
            this.$message({
              type: 'warning',
              message: res.data.message
            })
          }
        }).catch(err => {
          console.error(err)
        })
      },

      jstimehandle (val) {
        if (val === '') {
          return '----'
        } else if (val === '0001-01-01T08:00:00+08:00') {
          return '----'
        } else if (val === '5000-01-01T23:59:59+08:00') {
          return '永久'
        } else {
          val = val.replace('T', ' ')
          return val.substring(0, 10)
        }
      },

      formatDateTime (date) {
        var y = date.getFullYear()
        var m = date.getMonth() + 1
        m = m < 10 ? ('0' + m) : m
        var d = date.getDate()
        d = d < 10 ? ('0' + d) : d
        var h = date.getHours()
        var minute = date.getMinutes()
        minute = minute < 10 ? ('0' + minute) : minute
        return y + '-' + m + '-' + d + ' ' + h + ':' + minute
      }
    }
  }
</script>

<style lang="scss">
  .el-pagination {
    margin: 1rem 0 2rem;
    text-align: right;
  }
</style>