refinery-admin/src/views/oilFinalStatement/oilFinalStatementList.vue

<template>
  <div id="oilSiteUser">
    <div class="table-header table-div el-scrollbar table-div-box">
      <div slot="search" class="frame">
        <!--这里放顶部搜索-->
        <!-- 搜索部分开始 -->
        <el-form label-width="90px" :inline="true" :model="page" class="search-form" :size="$store.getters.size">
          <el-form-item>
            <el-input v-model="page.params.settlementNo" placeholder="结算单号" clearable @keyup.enter.native="getByPage" />
          </el-form-item>
          <el-form-item>
            <el-select v-model="page.params.settlementType" clearable placeholder="客户类型">
              <el-option label="企业" value="1" />
              <el-option label="炼厂" value="2" />
            </el-select>
          </el-form-item>

          <autocomplete class="mr20" :params="page.params" :config="configAutocomplete" />

          <el-form-item>
            <el-select v-model="page.params.auditState" clearable placeholder="审核状态">
              <el-option label="待审核" value="0" />
              <el-option label="已审核" value="1" />
              <el-option label="审核失败" value="-1" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="page.params.createUser"
              clearable
              filterable
              remote
              reserve-keyword
              placeholder="请输入创建人"
              :remote-method="userRemoteMethod"
              @keyup.enter.native="getByPage"
            >
              <el-option
                v-for="item in userList"
                :key="item.id"
                :label="item.phone + '(' + (item.nickName ? item.nickName + '-' : '') + item.userCode + ')'"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="page.params.createTime"
              clearable
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="创建时间"
            />
          </el-form-item>
        </el-form>

        <!-- 搜索部分结束 -->
        <el-row slot="button-group" style="margin-top: 5px; display: flex; align-items: center">
          <el-col :span="16" style="text-align: start">
            <el-button icon="el-icon-plus" @click="toAdd()">新增</el-button>
          </el-col>
          <el-col :span="8">
            <div style="text-align: right">
              <el-button icon="el-icon-search" @click="search">查询</el-button>
              <el-button icon="el-icon-refresh" @click="refrech">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </div>

      <div slot="table" class="table">
        <!--这里放表格和分页-->
        <!-- 列表开始 -->
        <el-table :max-height="tableHeight" stripe :data="dataPage" fit style="width: 100%" :size="$store.getters.size">
          <el-table-column label="序号" type="index" :index="indexMethod" />
          <template v-for="(item, index) in tableColumns">
            <el-table-column
              v-if="item.show"
              :key="index"
              :fixed="item.fixed"
              :align="item.align"
              :show-overflow-tooltip="true"
              :min-width="item.minWidth"
              :width="item.width"
              :prop="item.prop"
              :sortable="item.sortable"
              :label="item.label"
              :formatter="item.render"
            />
          </template>
          <el-table-column fixed="right" label="操作" width="150px">
            <template slot-scope="scope">
              <el-button :size="$store.getters.size" type="text" @click="detail(scope.row)"> <svg-icon icon-class="iconxiangqing1" />详情 </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 列表结束 -->

        <!-- 分页组件开始 -->
        <div class="page-div">
          <el-pagination
            :current-page="page.currentPage"
            :page-sizes="[10, 15, 20, 30]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.totalCount"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
        <!-- 分页组件结束 -->
      </div>
      <!-- 详情抽屉 -->
      <el-drawer v-if="detailDrawer" :visible.sync="detailDrawer" destroy-on-close direction="ltr" size="70%">
        <oilFinalStatementListInfo :importData="importData" @getByPage="getByPage" @closeDialog="closeDialog" />
      </el-drawer>
    </div>
  </div>
</template>
<script>
import oilFinalStatementListInfo from './oilFinalStatementListInfo'
import internalCompanyApi from '@/api/user/internalCompany'
import sysCustomerInfoApi from '@/api/user/sysCustomerInfo'
import autocomplete from 'components/autocomplete/index.vue'
import { mapGetters } from 'vuex'

export default {
  components: {
    oilFinalStatementListInfo,
    autocomplete
  },
  data() {
    return {
      configAutocomplete: {
        serveTarget: internalCompanyApi.getLikeByCompanyType,
        autocompleteKey: 'name',
        labelKey: 'name',
        valueKey: 'id',
        placeholder: '客户名称',
        querykey: 'settlementId'
      },
      detailDrawer: false,
      thisloding: true,
      page: {
        pageSize: 10, // 每页显示条数
        currentPage: 1, // 默认页
        params: {}, // 查询参数
        sorted: {},
        columns: []
      },
      userList: '',
      tableHeight: document.documentElement.clientHeight - 300 - 50,
      filters: this.$options.filters,
      dataPage: [],
      tableColumns: [
        {
          prop: 'settlementNo',
          minWidth: 350,
          label: '结算单号',
          show: true,
          render: (row, column, cell) => {
            return cell
          }
        },
        {
          prop: 'settlementObjectName',
          minWidth: 350,
          label: '结算客户名称',
          show: true,
          render: (row, column, cell) => {
            return (
              <div>
                <el-tag color={row.settlementType != 1 ? '#F59A23' : ''} effect="dark" type={row.settlementType != 1 ? 'warning' : ''}>
                  {row.settlementType == 1 ? '企业' : '炼厂'}
                </el-tag>
                <span style="margin-left:10px">{row.settlementObjectName}</span>
              </div>
            )
          }
        },
        {
          prop: 'auditState',
          minWidth: 120,
          label: '审核状态',
          show: true,
          render: (row, column, cell) => {
            if (cell === 0) {
              return (
                <el-button type="warning" size="mini">
                  待审核
                </el-button>
              )
            }
            if (cell === 1) {
              return (
                <el-button type="success" size="mini">
                  已审核
                </el-button>
              )
            }
            if (cell === -1) {
              return (
                <el-button type="danger" size="mini">
                  审核失败
                </el-button>
              )
            }
            return cell
          }
        },
        {
          prop: 'settlementAmount',
          minWidth: 120,
          label: '订单金额',
          show: true,
          render: (row, column, cell) => {
            return cell
          }
        },
        {
          prop: 'invoicedAmount',
          minWidth: 120,
          label: '开票金额',
          show: true,
          render: (row, column, cell) => {
            return Number(cell).toFixed(2)
          }
        },
        {
          prop: 'createUserName',
          minWidth: 180,
          label: '创建人信息',
          show: true,
          render: (row, column, cell) => {
            return (
              <div>
                <span>
                  {row.createUserName} - {row.createUserPhone}
                </span>
                <br />
                <span>{row.createTime}</span>
              </div>
            )
          }
        }
      ],
      importData: {},
      rules: {
        encryptPsw: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['sysUserList'])
  },
  created() {
    this.getByPage()
    // 增加监听事件，窗口变化时得到高度。
    window.addEventListener('resize', this.getHeight, false)
  },
  watch: {
    '$route.path'(toPath, fromPath) {
      if (toPath == '/finance/oilFinalStatement/oilFinalStatementList') {
        this.getByPage()
      }
    }
  },
  methods: {
    userRemoteMethod(value) {
      // 远程搜索
      if (value) {
        sysCustomerInfoApi.liekQuery(value).then(res => {
          this.userList = res.data
        })
      }
    },
    toAdd() {
      this.$router.push({ path: './oilFinalStatementAddList', query: { type: 'toAdd' } })
    },
    indexMethod(index) {
      return (index + 1) * 1
    },
    async detail(row) {
      await internalCompanyApi.getByIdDetail(row.id).then(res => {
        this.importData = res.data
      })
      // 查看行 详情
      this.detailDrawer = true
    },
    getHeight() {
      // 获取浏览器高度并计算得到表格所用高度。
      this.tableHeight = document.documentElement.clientHeight - 300 - 60
    },
    search() {
      // 搜索
      this.page.currentPage = 1
      this.getByPage()
    },
    handleSizeChange(val) {
      this.page.pageSize = val
      this.getByPage()
    },
    handleCurrentChange(val) {
      this.page.currentPage = val
      this.getByPage()
    },
    refrech() {
      this.page.params = {}
      this.getByPage()
    },
    getByPage() {
      // 分页查询

      internalCompanyApi.getByPage(this.page).then(res => {
        this.dataPage = res.data.list
        this.page.totalCount = res.data.totalCount
        this.page.totalPage = res.data.totalPage
      })
      // },500)
      // })
    },
    closeDialog() {
      this.detailDrawer = false
    }
  }
}
</script>

<style lang="scss" scoped>
.type-yuan {
  border-radius: 50%;
  width: 12px;
  height: 12px;
  background: #168efa;
}

.type-yuan-info {
  border-radius: 50%;
  width: 12px;
  height: 12px;
  background: #c0c4cc;
}

.handle-button-group {
  margin-bottom: 10px;
}

.table-div {
  min-height: calc(100vh - 150px);
  max-height: calc(100vh - 110px);
  position: relative;
  margin-bottom: 20px;
}

.table-div >>> .header-container {
  position: sticky;
  top: 0rem;
  min-height: 110px;
  z-index: 4;
  background: #fff;
}

.table-div .el-table__footer-wrapper {
  position: fixed !important;
}

.page-div {
  position: fixed;
  background: #fff;
  bottom: 0rem;
  z-index: 4;
  min-width: 100%;
}

.el-icon-check {
  color: #46a6ff;
}

.dispose-dialog {
  width: 95%;
  margin: 0 auto;
}

.dispose-dialog div:nth-child(2) span:first-child {
  color: #999;
}

.dispose-dialog div:nth-child(2) span:last-child {
  color: #46a6ff;
}

.dispose-dialog div:nth-child(3) {
  display: flex;
  justify-content: space-between;
}

.dispose-dialog .flex2 {
  width: 45%;
  background: #e4e4e4;
  padding: 30px 20px;
}

.dispose-dialog .flex2 span {
  color: #666 !important;
  font-size: 16px;
  margin-bottom: 20px;
  display: block;
  text-align: center;
}

.stepsStyle >>> .el-step__icon {
  width: 20px;
  height: 20px;
}

.stepsStyle >>> .el-step__title {
  font-size: 14px;
  line-height: 24px;
}

.stepsStyle >>> .el-step__main {
  margin-top: 5px;
}

.stepsStyle >>> .el-step__title.is-process {
  background: #168efa !important;
  color: #fff;
  border-radius: 20px;
  cursor: pointer;
  font-weight: normal;
}

.stepsStyle >>> .el-loading-mask {
  opacity: 0.8;
}

.stepsStyle >>> .el-loading-spinner {
  margin-top: -10px;
}

.stepsStyle >>> .el-loading-spinner .circular {
  height: 20px;
  width: 20px;
}

.stepsStyle >>> .el-step__head.is-process {
  color: #168efa;
  border-color: #c0c4cc;
}

.stepsStyle >>> .el-step__description {
  margin-top: 0;
}

.stepsStyle >>> .el-step__head.is-finish {
  color: #168efa;
  border-color: #c0c4cc;
}

.stepsStyle >>> .el-step__head.is-finish .el-step__line {
  background: #168efa;
}

.stepsStyle >>> .el-step__title.is-finish {
  color: #c0c4cc;
}

.stepsStyle >>> .el-step__line-inner {
  width: fit-content !important;
}

.el-icon-error,
.errstyle {
  color: red;
}

.stepsStyle >>> .is-horizontal:last-child .el-step__title {
  background: transparent !important;
  color: #c0c4cc;
  cursor: auto;
}
</style>
<style>
.table-div-box .el-form-item__content .el-input {
  box-shadow: none !important;
}

.table-div-box .el-form-item--medium .el-form-item__content {
  width: 100%;
}
#oilSiteUser .frame {
  margin: 20px;
  padding: 20px;
  border-radius: 6px;
  border: 1px solid #e3e3e5;
  background: #fff;

  .el-input,
  .el-select {
    width: 183px;
    height: 40px;
  }
  .el-autocomplete + .el-select,
  .el-input + .el-input,
  .el-input + .el-select,
  .el-select + .el-select,
  .el-select + .el-input {
    margin-right: 20px;
    margin-bottom: 15px;
  }
  .mr20 {
    margin-right: 20px;
  }
  .buttons {
    text-align: right;
  }
}
#oilSiteUser .table {
  overflow: hidden;
  margin: 0 20px;
  padding-bottom: 20px;
  background: #fff;
  border-radius: 6px;
  border: 1px solid #e3e3e5;
  > .operation {
    box-sizing: content-box;
    padding: 15px;
  }
  .gray {
    color: #999;
    span {
      color: #333;
    }
  }
  .el-table {
    margin-bottom: 20px;
    border-radius: 10px 10px 0px 0px;
  }
  .el-link {
    margin-right: 10px;
  }
}
#oilSiteUser .el-badge__content {
  right: 15px;
  top: 5px;
}

.el-icon-sort {
  transform: rotate(90deg);
  font-weight: 600;
}

.el-icon-daijiesuan {
  background: url('../../assets/img/oilFinalStatement/icon-daijiesuan.png') center no-repeat;
  font-size: 12px;
  background-size: cover;
}

.el-icon-daijiesuan:before {
  content: '替';
  font-size: 12px;
  visibility: hidden;
}

.el-icon-jiesuandanqiehuan {
  background: url('../../assets/img/oilFinalStatement/icon-jiesuandanqiehuan.png') center no-repeat;
  font-size: 12px;
  background-size: cover;
}

.el-icon-jiesuandanqiehuan:before {
  content: '替';
  font-size: 12px;
  visibility: hidden;
}
</style>