supply-front/src/views/sales_policy/policy_list.vue

<template>
  <div v-if="isShow === 1" class="app-container">
    <div class="screen-container">
      <el-form ref="screenForm" size="mini" :model="screenForm" :inline="false">
        <el-row>
          <el-row :gutter="20">
            <el-col :xs="24" :ms="6" :lg="6">
              <el-form-item label="" prop="code">
                <el-input
                  v-model="screenForm.code"
                  placeholder="销售政策编号"
                  size="mini"
                />
              </el-form-item>
            </el-col>

            <el-col :xs="24" :ms="6" :lg="6">
              <el-form-item label="" prop="title">
                <el-input
                  v-model="screenForm.title"
                  placeholder="销售政策说明"
                  size="mini"
                />
              </el-form-item>
            </el-col>

            <el-col :xs="24" :ms="6" :lg="6">
              <el-form-item label="" prop="remark">
                <el-input
                  v-model="screenForm.remark"
                  placeholder="表头备注"
                  size="mini"
                />
              </el-form-item>
            </el-col>

            <el-col :xs="24" :ms="6" :lg="6">
              <el-form-item label="" prop="startTime1">
                <el-date-picker
                  v-model="screenForm.startTime1"
                  type="datetime"
                  size="mini"
                  placeholder="生效日期"
                  value-format="yyyy-MM-dd HH:mm:ss"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :xs="24" :ms="6" :lg="6">
              <el-form-item label="" prop="endTime1">
                <el-date-picker
                  v-model="screenForm.endTime1"
                  type="datetime"
                  size="mini"
                  placeholder="结束日期"
                  value-format="yyyy-MM-dd HH:mm:ss"
                />
              </el-form-item>
            </el-col>

            <el-col :xs="24" :ms="6" :lg="6">
              <el-form-item label="" prop="startCreateTime">
                <el-date-picker
                  v-model="screenForm.startCreateTime"
                  type="datetime"
                  size="mini"
                  placeholder="制表日期"
                  value-format="yyyy-MM-dd HH:mm:ss"
                />
              </el-form-item>
            </el-col>

            <el-col :xs="24" :ms="6" :lg="6">
              <el-form-item label="" prop="createBy">
                <el-input
                  v-model="screenForm.createBy"
                  placeholder="制表人"
                  size="mini"
                />
              </el-form-item>
            </el-col>

            <el-col :xs="24" :ms="6" :lg="6">
              <el-form-item label="" prop="examineBy">
                <el-input
                  v-model="screenForm.examineBy"
                  placeholder="审核人"
                  size="mini"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :xs="24" :ms="6" :lg="6">
              <el-form-item label="" prop="status">
                <el-select
                  v-model="screenForm.status"
                  size="mini"
                  placeholder="状态"
                  class="select_height"
                >
                  <el-option
                    v-for="(item, index) in statusOptions"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :xs="24" :ms="6" :lg="6">
              <el-form-item label="" prop="type">
                <el-select
                  v-model="screenForm.type"
                  size="mini"
                  placeholder="销售政策类型"
                  class="select_height"
                >
                  <el-option
                    v-for="item in typeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :ms="6" :lg="6" >
              <el-form-item label="" prop="customerId">
                <el-select
                  v-model="screenForm.customerId"
                  size="mini"
                  filterable
                  placeholder="经销商名称"
                  class="select_height"
                >
                  <el-option label="全部" :value="null"></el-option>
                  <el-option
                    v-for="item in CrList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :xs="24" :ms="6" :lg="6">
              <el-form-item label="" prop="specification">
                <el-input
                  v-model="screenForm.specification"
                  placeholder="机型"
                  size="mini"
                />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :ms="24" :lg="24" class="tr">
              <el-form-item>
                <el-button
                  type="primary"
                  size="mini"
                  @click="submitScreenForm"
                >查询</el-button>
                <el-button
                  size="mini"
                  @click="resetScreenForm"
                >重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-row>
      </el-form>
    </div>
    <div class="btn-group">
      <el-row type="flex">
        <el-button
          v-if="$checkBtnRole('add', $route.meta.roles)"
          size="mini"
          type="primary"
          icon="el-icon-plus"
          @click="hanlenewInfo"
        >新增</el-button>
      </el-row>
    </div>
    <div class="mymain-container">
      <div class="table">
      <el-table

      :data="dataList"
        :row-class-name="tableRowClassName"
      border

      style="width: 100%"
     >
        <el-table-column
          fixed="left"
          label="操作"
          min-width="250"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.examineStatus == 'SAVE'"
              type="text"
              size="mini"
              @click="(isShow = 5), (id = scope.row.id)"
            >编辑</el-button>
            <el-button
            type="text"
              size="mini"
              @click="
                (isShow = 4), (id = scope.row.id), (code = scope.row.code)
              "
            >详情</el-button>

            <el-button
              v-if="
                scope.row.examineStatus == 'WAIT' &&
                  $checkBtnRole('examine', $route.meta.roles)
              "
              type="text"
              size="mini"
              @click="
                (isShow = 8),
                (id = scope.row.id),
                (policyId = scope.row.policyId),
                (code = scope.row.code)
              "
            >审核</el-button>
            <!-- </el-popconfirm> -->
            <el-popconfirm
              v-if="scope.row.examineStatus == 'SAVE'"
              style="margin-left: 10px"
              title="提审？"
              @onConfirm="handlesubmit(scope.row)"
            >
              <el-button
                slot="reference"
                type="text"
                size="mini"
              >提审</el-button>
            </el-popconfirm>
            <el-popconfirm
              v-if=" scope.row.examineStatus === 'OK' && scope.row.status "
              style="margin-left: 10px"
              title="作废？"
              @onConfirm="handleNullify(scope.row)"
            >
              <el-button
                slot="reference"
                type="text"
                size="mini"
              >作废</el-button>
            </el-popconfirm>
            <el-popconfirm
              v-if="scope.row.examineStatus === 'OK'"
              style="margin-left: 10px"
              title="克隆？"
              @onConfirm="handleClone(scope.row)"
            >
              <!--  -->
              <el-button
                slot="reference"
                type="text"
                size="mini"
              >克隆</el-button>
            </el-popconfirm>
            <el-popconfirm
              v-if="scope.row.examineStatus != 'OK' "
              style="margin-left: 10px"
              title="删除吗？"
              @onConfirm="hanleDelete(scope.row.id)"
            >
              <el-button
                slot="reference"
                type="text"
                size="mini"
              >删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="120" align="left">
          <template slot-scope="scope">
            <el-tag size="mini" type="success"  v-if="scope.row.status == '1'">已生效</el-tag>
            <el-tag  size="mini" type="danger" v-else-if="scope.row.status == '0'">未生效 </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="审核状态" width="120" align="left">
          <template slot-scope="scope">
            <el-tag size="mini" v-if="scope.row.examineStatus == 'SAVE'">保存</el-tag>
            <el-tag size="mini" type="warning"
              v-else-if="scope.row.examineStatus == 'WAIT'"
            >待审核
            </el-tag>
            <el-tag size="mini" type="success" v-else-if="scope.row.examineStatus == 'OK'">通过 </el-tag>
            <el-tag size="mini" type="danger" v-else>不通过 </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="code"
          label="销售政策编号"
          show-overflow-tooltip
          min-width="200"
          align="left"
        />
        <el-table-column
          show-overflow-tooltip
          prop="title"
          label="销售政策名称"
         min-width="150"
          align="left"
        />
        <!-- <el-table-column
          prop="mainName"
          label="产品类别"
          align="left"
        ></el-table-column> -->
        <el-table-column
          show-overflow-tooltip
          prop="remark"
          label="销售政策说明"
         min-width="150"
          align="left"
        />
        <el-table-column  min-width="200" show-overflow-tooltip prop="startTime" label="生效日期" align="left" />
        <el-table-column  min-width="200"  show-overflow-tooltip prop="endTime" label="结束日期" align="left" />
        <el-table-column
          show-overflow-tooltip

          prop="createBy"
          label="制表人"
         min-width="200"
          align="left"
        />
        <el-table-column
          show-overflow-tooltip
          prop="createTime"
          label="制表日期"
         min-width="200"
          align="left"
        />
        <el-table-column
          show-overflow-tooltip
          prop="examineBy"
          label="审核人"
         min-width="200"
          align="left"
        />
      </el-table>
        <!-- 分页 -->
        <div class="fr">
          <el-pagination
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="listTotal"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
      </div>


  </div>
  <AddPolicy v-else-if="isShow === 2" />
  <AddCondition v-else-if="isShow === 10 ||isShow === 12  " :id="id" :policy-id="policyId" />
  <EditPolicy v-else-if="isShow===5" />
  <Details v-else-if="isShow===4" />
  <Examine v-else />
</template>

<script>
import {
  cancelPolicy,
  cloneList,
  deletePolicy,
  getCrList,
  getId,
  getList,
  getpolicySubmit,
  getTypeList,
  toExamine
} from '@/api/policy_list'
import Minxin from '@/mixin'
import { downloadFiles, handleImport } from '@/utils/util'
import AddPolicy from './components/AddPolicy'
import EditPolicy from './components/editPolicy'
import AddModel from './components/AddModel'
import Pagination from './components/Pagination'
import AddCondition from './components/AddCondition'
import Details from './components/details.vue'
import Examine from './components/Examine'
import { mapState } from 'vuex'

export default {
  mixins: [Minxin],
  data() {
    return {
      id: '',
      code: '',
      codeId: '',
      listLoading: false,
      policyId: '',
      CrList:[],
      isShow: 1,
      dataList: [],
      screenForm: {
        code: '',
        createBy: '',
        endCreateTime: '',
        endTime1: '',
        endTime2: '',
        examineBy: '',
        remark: '',
        startCreateTime: '',
        startTime1: '',
        startTime2: '',
        status: '',
        title: '',
        type: '',
        customerId:'',
        specification:''
      },
      fileList: [],
      statusOptions: [
        {
          vlaue: '',
          label: '全部'
        },
        {
          value: true,
          label: '已生效'
        },
        {
          value: false,
          label: '未生效'
        }
      ],
      typeOptions: [
        {
          vlaue: '',
          label: '全部'
        },
        {
          vlaue: 'PROVISION',
          label: '配提'
        },
        {
          value: 'LIMIT',
          label: '限量'
        }
      ],
      typeList: [],
      value: '',
      imageUrl: '',
      baseURL: '',
      isFlag: ''
    }
  },
  created() {

      const customerParams = {
        pageNum: 1,
        pageSize: -1,
        keyword: '',
        region: ''
      }
      // 获取经销商列表
      getCrList(customerParams).then((res) => {
        this.CrList = res.data.records
      })

  },
  computed: mapState({
    comCode: (state) => state.sales.code
  }),
  methods: {
    tableRowClassName({row, rowIndex}) {
      // || row.examineStatus=='FAIL'
     if (row.status == 0 ) {
          return 'warning-row';
        }
        return '';
    },
    hanlenewInfo() {
      console.log()
      getId().then((res) => {
        this.$store.commit('sales/setId', res.data)
        this.isShow = 2
      })
    },
    handleClone(row) {
      cloneList({ policyId: row.id }).then(res => {
        this.$successMsg('克隆成功')
        this.getList()
      })
    },
    getList() {
      this.listLoading = true
      const params = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        code: this.screenForm.code,
        type: this.screenForm.type,
        createBy: this.screenForm.createBy,
        endCreateTime: this.screenForm.endCreateTime,
        endTime1: this.screenForm.endTime1,
        endTime2: this.screenForm.endTime2,
        examineBy: this.screenForm.examineBy,
        remark: this.screenForm.remark,
        startCreateTime: this.screenForm.startCreateTime,
        startTime1: this.screenForm.startTime1,
        startTime2: this.screenForm.startTime2,
        status: this.screenForm.status,
        title: this.screenForm.title,
        customerId:this.screenForm.customerId,
        specification:this.screenForm.specification
      }
      getList(params).then((res) => {
        this.dataList = res.data.records
        console.log(this.dataList)
        this.listTotal = res.data.total
        this.listLoading = false
      })
      const paramsType = {
        pageNum: 1,
        pageSize: 10,
        saleCdoe: '',
        saleName: '',
        stauts: ''
      }
      getTypeList(paramsType).then((res) => {
        this.typeList = res.data.records
      })
    },
    hanleDelete(id) {
      this.hanleDeleteAllPromise(id).then((ids) => {
        deletePolicy({
          id: ids[0]
        }).then((res) => {
          this.$successMsg('删除成功')
          this.getList()
        })
      })
    },
    // 作废
    handleNullify(row) {
      cancelPolicy({ id: row.id }).then(res => {
        this.$successMsg('已作废')
        this.getList()
      })
    },
    // 导出文档
    handleExport() {
      const screenData = {
        customerTel: this.diaLogForm.customerTel,
        logisticsCompany: this.diaLogForm.logisticsCompany
      }
      downloadFiles('/policy/export', screenData)
    },

    // 导入
    async handleImport(param) {
      this.importLoading = true
      const file = param.file
      console.log(file, 123)
      const formData = new FormData()
      formData.append('file', file)
      const result = await handleImport('/policy/material/import', formData)
      this.importLoading = false
      this.importFileList = []
      if (result.code == 200) {
        this.$alert('导入成功', '导入成功', {
          confirmButtonText: '确定'
        })
        this.getList()
      } else {
        this.$alert('导入失败', '导入失败', {
          confirmButtonText: '确定'
        })
      }
    },
    handlesubmit(e) {
      getpolicySubmit({ policyId: e.id }).then((res) => {
        this.$successMsg('已提交')
        this.getList()
      })
    },
    hanleExamine(e) {
      if (e.examineStatus == 'WAIT') {
        toExamine({
          examineRemark: e.id,
          examineStatus: 'WAIT',
          policyId: e.id
        }).then((res) => {
          this.$successMsg('已提交')
        })
      } else {
        this.$errorMsg('未满足条件')
      }
    }
  },
  components: {
    Examine,
    Details,
    AddModel,
    AddPolicy,
    EditPolicy,
    Pagination,
    AddCondition
  }
}
</script>

<style lang="scss" scoped>
 ::v-deep .el-table .warning-row {
    background:  oldlace;
  }
  // ::v-deep  .el-table .success-row {
  //   background: #f0f9eb;
  // }
.btn {
  width: 80px;
}

.mpd {
  padding: 20px 0 0 0;
}

.select_height {
  width: 100%;
}
.import-btn {
  margin: 0 10px;
}
.header {
  display: flex;
  height: 50px;
  align-items: center;
}
.fr{
  margin: 20px 0;
}
</style>