lemonBeans_ui/src/views/system/toConfigure/index.vue

<template>
  <div class="mod-auditPaths">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-form-item>
        <el-input v-model="dataForm.pathName" placeholder="审核路径名称" clearable style="width: 138PX;"></el-input>
      </el-form-item>
      <el-form-item style="float: right">
        <el-button icon="el-icon-search" @click="getDataList()">查询</el-button>
        <el-button icon="el-icon-refresh-left" @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="addOrUpdateHandle()">
          新增
        </el-button>
      </el-form-item>
    </el-form>
    <el-table :data="dataList" border v-loading="dataListLoading" style="width: 100%;">
      <el-table-column
        header-align="center"
        align="center"
        type="index"
        width="80"
        label="序号">
      </el-table-column>
      <el-table-column
        prop="pathName"
        header-align="center"
        align="center"
        width="220"
        label="审核路径名称">
      </el-table-column>
      <el-table-column
        prop="opUserName"
        header-align="center"
        align="center"
        width="150"
        label="维护人">
      </el-table-column>
      <el-table-column
        prop="opDate"
        header-align="center"
        align="center"
        width="150"
        label="维护时间">
      </el-table-column>
      <el-table-column
        prop="branName"
        header-align="center"
        align="center"
        width="180"
        label="公司名称">
      </el-table-column>
      <el-table-column
        prop="status"
        header-align="center"
        align="center"
        width="90"
        label="状态">
        <template slot-scope="scope">
<!--          <span v-if="scope.row.status === 'N'">新建</span>-->
          <span v-if="scope.row.status === 'A'">有效</span>
          <span v-if="scope.row.status === 'S'">停用</span>
          <span v-if="scope.row.status === 'Z'">暂存</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="remarks"
        header-align="center"
        align="center"
        label="备注">
      </el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="150"
        label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small"
                     @click="addOrUpdateHandle(scope.row.id)">修改
          </el-button>
          <el-button type="text" size="small"
                     @click="deleteHandle(scope.row.id)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="dataForm.current"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="dataForm.size"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" :dataForm="editModel"></add-or-update>
  </div>
</template>

<script>
import AddOrUpdate from './auditPaths-add-or-update'
import {addCharge,delCharge} from '@/api/system/toConfigure'

export default {
  data () {
    return {
      loginContractorId: null,
      dataForm: {
        pathId: null,
        pathName: null,
        opUserId: null,
        opUserName: null,
        opDate: null,
        status: 'A',
        remarks: null,
        current: 1,
        size: 10
      },
      editModel: {},
      dataList: [],
      totalPage: 0,
      dataListLoading: false,
      addOrUpdateVisible: false
    }
  },
  components: {
    AddOrUpdate
  },
  activated () {
    // this.$http({
    //   url: this.$http.adornUrl('/sys/user/getLoginContractorId'),
    //   method: 'post'
    // }).then(({data}) => {
    //   this.loginContractorId = data.loginContractorId
    // })

    this.getDataList()
  },
  methods: {
    // 获取数据列表
    getDataList () {
      this.dataListLoading = true
      addCharge(this.dataForm).then(data => {
        console.log(data)
        if (typeof data.rows !== 'undefined' && data.rows !== null) {
          this.dataList = data.rows
          this.totalPage = data.rows.total
        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    resetSearch () {
      this.dataForm.pathName = null
      this.dataForm.opUserName = null
      this.dataForm.opDate = null
      this.dataForm.current = 1
      this.dataForm.size = 10
      this.getDataList()
    },
    // 每页数
    sizeChangeHandle (val) {
      this.dataForm.size = val
      this.dataForm.current = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle (val) {
      this.dataForm.current = val
      this.getDataList()
    },
    // 新增 / 修改
    addOrUpdateHandle (val) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(val)
      })
    },
    // 删除
    deleteHandle (id) {
      this.$confirm('是否确认删除财务数据主编号为"' + id + '"的数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return delCharge(id)
      }).then(() => {
        this.getList()
        this.msgSuccess('删除成功')
      })

      // this.$confirm(`确定进行删除操作?`, '提示', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // }).then(() => {
      //   this.$http({
      //     url: this.$http.adornUrl('/engineering/auditPaths/delete'),
      //     method: 'post',
      //     data: (id)
      //   }).then(({data}) => {
      //     if (data && data.code === 0) {
      //       this.$message({
      //         message: '操作成功',
      //         type: 'success',
      //         duration: 600,
      //         onClose: () => {
      //           this.getDataList()
      //         }
      //       })
      //     } else {
      //       this.$message.error(data.msg)
      //     }
      //   })
      // }).catch(() => {
      // })
    }
  }
}
</script>