dm-manage-web/src/views/zs/sign/index.vue

<template>
  <div class="app-container">
    <SearchForm v-show="showSearch" ref="SearchForm" @search="_getTableList" :options="options" />
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-plus" v-hasPermi="['zs:sign:add']" @click="handleAddAndUpdate(undefined)">新增</el-button>
        <el-button v-if="admin == 'true'" type="warning" v-hasPermi="['zs:sign:export']" icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
      </el-col>
      <right-toolbar :show-search.sync="showSearch" :columns="columns" @queryTable="_getTableList" />
    </el-row>

    <!-- 表格 -->
    <el-table v-loading="loading" :data="tableDataList" stripe size="mini" border @sort-change="changeSort">
      <el-table-column type="index" width="50" align="center" />
      <template v-for="item in columns">
        <el-table-column v-if="item.visible && item.prop === 'state'" :key="item.prop" :label="item.label" align="center" :width="item.width" :prop="item.prop">
          <template slot-scope="{row}">
            <el-button type="success" size="mini" v-if="row.state">全款</el-button>
            <el-button type="warning" size="mini" v-else>未全款</el-button>
          </template>
        </el-table-column>
        <el-table-column v-else-if="item.visible" :key="item.prop" :label="item.label" align="center" :width="item.width" :prop="item.prop" :show-overflow-tooltip="item.overflow" />
      </template>
      <el-table-column align="center" width="100" fixed="right" label="审核状态">
        <template slot-scope="{row}">
          <el-button type="danger" size="mini" v-if="row.checkState == 1">待审核</el-button>
          <el-button type="success" size="mini" v-else-if="row.checkState == 2">已审核</el-button>
          <el-button type="warning" size="mini" v-else-if="row.checkState == 3">驳回</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" align="center" width="160">
        <template slot-scope="scope">
          <el-button size="mini" type="text" v-hasPermi="['zs:sign:edit']" v-if="scope.row.signEdit" icon="el-icon-edit" @click="handleAddAndUpdate(scope.row)">修改</el-button>
          <el-button size="mini" type="text" v-hasPermi="['zs:sign:check']" v-if="scope.row.checkState == 1 " @click="handleCheck(scope.row)">审核</el-button>
          <el-button size="mini" type="text" v-hasPermi="['zs:sign:remove']" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination :total="total" :page.sync="searchForm.pageNum" :limit.sync="searchForm.pageSize" @pagination="_getTableList" />

    <!-- 引入成交登记弹框  -->
    <SignFormDialog v-if="dialog.signVisible" ref="signDialogForm" :dialog-visible="dialog.signVisible" @refreshDataList="_getTableList" />

    <!-- 引入审核弹框  -->
    <CheckDialog v-if="dialog.checkVisible" ref="checkDialogForm" :dialog-visible="dialog.checkVisible" @refreshDataList="_getTableList" />

    <!-- 导入对话框 -->
    <UploadDialog v-if="dialog.uploadVisible" />
  </div>
</template>
  
  
  
  <script>
import { getSignList, exportData, deleteSign } from '@/api/zs/sign'
import empApi from '@/api/system/employee'
import CheckDialog from './components/CheckDialog'
import SearchForm from './components/SearchForm.vue'
import SignFormDialog from './components/SignFormDialog.vue'
import { defaultColumns } from './columns.js';
import UploadDialog from './components/UploadDialog.vue'


export default {
  name: 'Sign',
  components: {
    SearchForm,
    CheckDialog,
    SignFormDialog,
    UploadDialog,
  },
  data() {
    return {
      admin: localStorage.getItem('admin'),
      userId: localStorage.getItem('userId'),
      searchForm: {
        pageNum: 1,
        pageSize: 10,
      },
      loading: false,
      columns: [],
      tableDataList: [],
      total: 0,
      userOptions: [],
      schoolOptions: [],
      moneyStateOptions: [],
      percentageOptions: [
        {
          value: '驾校已结算',
          label: '驾校已结算',
        },
        {
          value: '提成已发放',
          label: '提成已发放',
        },
      ],
      areaOptions: [],
      showSearch: true,
      dialog: {
        signVisible: false,
        checkVisible: false,
        uploadVisible: false
      },
      options: {
        userOptions: [],
        schoolOptions: [],
        areaOptions: [],
        moneyStateOptions: [],
        sourceOptions: []
      }
    }
  },
  created() {
    const str = localStorage.getItem(`${this.$route.name}-table-columns`);
    this.columns = str ? JSON.parse(str) : defaultColumns;
    //回款状态
    this.getDicts('dm_money_state').then((response) => {
      this.options.moneyStateOptions = response.data
    })
    //s所属区域
    this.getDicts('dm_area').then((response) => {
      this.options.areaOptions = response.data
    })
    //s所属区域
    this.getDicts('dm_source').then((response) => {
      this.options.sourceOptions = response.data
    })
    this.getSchools()
    this._getTableList()
    this.getEmployee()
  },
  methods: {
    // 搜索
    handleQuery() {
      this.searchForm.pageNum = 1
      this._getTableList()
    },
    _getTableList() {
      this.loading = true;
      const tempForm = this.$refs.SearchForm?.searchForm || {};
      const params = { ...this.searchForm, ...tempForm };
      getSignList(params).then(
        (response) => {
          this.tableDataList = response.rows
          this.total = response.total
          this.loading = false
        }
      )
    },
    getSchools() {
      empApi.pageList().then((resp) => {
        this.options.schoolOptions = resp.data
      })
    },

    /** 导出按钮操作 */
    handleExport() {
      this.$confirm('是否确认导出所有成交记录项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then((resp) => {
          const tempForm = this.$refs.SearchForm?.searchForm || {};
          this.download('zs/sign/export', tempForm, `登记信息_${new Date().getTime()}.xlsx`);
        })
        .catch(function () { })
    },
    /** 导入按钮操作 */
    handleImport() {
      this.upload.title = '成交记录导入'
      this.upload.open = true
    },
    /** 查询员工 */
    getEmployee() {
      empApi.getEmployee().then((resp) => {
        if (resp.code == 200) {
          this.options.userOptions = resp.data
        }
      })
    },
    changeSort(val) {
      if (val.order) {
        this.searchForm.orderName = val.prop
        if (val.order == 'ascending') {
          this.searchForm.orderType = 'asc'
        } else {
          this.searchForm.orderType = 'desc'
        }
      } else {
        this.searchForm.orderName = ''
        this.searchForm.orderType = ''
      }
      this.getPageList()
    },
    handleAddAndUpdate(item) {
      this.dialog.signVisible = true
      this.$nextTick(() => {
        this.$refs.signDialogForm.init(item)
      })
    },
    handleDelete(item) {
      this.$confirm(
        '是否确认删除该条登记（“' + item.name + '/' + item.phone + '”）?',
        '警告',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then((res) => {
          deleteSign({ signId: item.signId }).then((resp) => {
            if (resp.code == 200) {
              this.$message.success('删除成功')
              this.getPageList()
            } else {
              //this.$message.error("删除失败:" + resp.msg);
            }
          })
        })
        .catch(function () { })
    },

    handleCheck(item) {
      this.dialog.checkVisible = true
      this.$nextTick(() => {
        this.$refs.checkDialogForm.init(item)
      })
    },
  },
}
  </script>
  
  <style rel="stylesheet/scss" lang="scss">
.el-table .cell {
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-all;
  line-height: 23px;
  padding-left: 6px;
  padding-right: 6px;
}

.el-card__body {
  padding: 10px !important;
}

.el-timeline-item__wrapper {
  position: relative;
  padding-left: 20px;
  top: -3px;
  line-height: 25px;
}
</style>