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

<template>
  <div v-if="isShow === 1" class="app-container">
    <div class="screen-container">
      <Collapse :screen-form="screenForm">
        <template #right_btn>
          <el-button size="mini" @click="resetScreenForm">清空</el-button>
          <el-button type="primary" size="mini" @click="submitScreenForm">搜索</el-button>
        </template>
        <template #search>
          <el-form
            ref="screenForm"
            size="mini"
            :model="screenForm"
            :inline="false"
            label-width="120px"
            label-position="left"
          >
            <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"
                      clearable
                      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"
                      clearable
                      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
                      clearable
                      placeholder="经销商名称"
                      class="select_height"
                    >
                      <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="customerNumber">
                    <el-select
                      v-model="screenForm.customerNumber"
                      size="mini"
                      filterable
                      clearable
                      placeholder="经销商编码"
                      class="select_height"
                    >
                      <el-option v-for="item in CrList" :key="item.id" :label="item.number" :value="item.number" />
                    </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-row>
            </el-row>
          </el-form>
        </template>
      </Collapse>
    </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>
              <el-popconfirm
                v-if="scope.row.examineStatus == 'OK'"
                style="margin-left: 10px"
                title="弃审吗？"
                @onConfirm="hanleAbandon(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,
  setAbandon
} 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: '',
        customerNumber: ''
      },
      fileList: [],
      statusOptions: [
        {
          value: true,
          label: '已生效'
        },
        {
          value: false,
          label: '未生效'
        }
      ],
      typeOptions: [
        {
          vlaue: 'PROVISION',
          label: '配提'
        },
        {
          value: 'LIMIT',
          label: '限量'
        }
      ],
      typeList: [],
      value: '',
      imageUrl: '',
      baseURL: '',
      isFlag: '',
      isCollapse: true
    }
  },
  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,
        customerNumber: this.screenForm.customerNumber,
        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
      // })
    },
    hanleAbandon(id) {
      setAbandon({ policyId: id }).then(res => {
        this.$successMsg('弃审成功')
        this.getList()
      })
    },
    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>