supply-front/src/views/sales_policy/components/Examine.vue

<template>

  <div>
    <el-header height="50px" class="header">
      <el-page-header @back="$parent.isShow = 1,$parent.id=''" content="详情页面">
      </el-page-header>
    </el-header>
    <div class="app-container">
      <div class="descriptions">
        <el-row>
          <el-col :span="4">销售政策编号</el-col>
          <el-col :span="4">{{ detail.code }}</el-col>
          <el-col :span="4">销售政策说明</el-col>
          <el-col :span="4">{{ detail.title }}</el-col>
          <el-col :span="4">状态</el-col>
          <el-col :span="4">{{
            detail.status == 1 ? "已生效" : "未生效"
          }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4">销售政策类型</el-col>
          <el-col :span="4">{{
            detail.type == "PROVISION" ? "配提" : "限量"
          }}</el-col>
          <el-col :span="4" style="background-color:#fff"></el-col>
          <el-col :span="4"></el-col>
          <el-col :span="4" style="background-color:#fff"></el-col>
          <el-col :span="4"></el-col>
        </el-row>
        <el-row>
          <el-col :span="4">备注</el-col>
          <el-col :span="20">{{ detail.remark }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="3">制单人</el-col>
          <el-col :span="3">{{ detail.createBy }}</el-col>
          <el-col :span="3">制单日期</el-col>
          <el-col :span="3">{{ detail.createTime }}</el-col>
          <el-col :span="3">生效日期</el-col>
          <el-col :span="3">{{ detail.startTime }}</el-col>
          <el-col :span="3">失败日期</el-col>
          <el-col :span="3">{{ detail.endTime }}</el-col>
        </el-row>
        <el-row v-if="this.$parent.isShow == 4">
          <el-col :span="3">审核人</el-col>
          <el-col :span="3">{{ detail.examineBy }}</el-col>
          <el-col :span="3">审核日期</el-col>
          <el-col :span="3">{{ detail.examineTime }}</el-col>
          <el-col :span="3">关闭人</el-col>
          <el-col :span="3"></el-col>
          <el-col :span="3">关闭日期</el-col>
          <el-col :span="3"></el-col>
        </el-row>
      </div>
      <div class="mymain-container">
        <el-row>
          <el-divider></el-divider>
          <el-row type="flex">
            <el-col :span="12">
              <h4 style="display: inline-block; margin-right: 20px">
                货品信息
              </h4>
              <!-- <el-button size="small">查看</el-button> -->
            </el-col>
            <el-col :span="12" class="tr">
              <!-- <el-button size="small" @click="$parent.isShow = 10"
                >查看条件</el-button
              > -->
            </el-col>
          </el-row>
          <el-divider></el-divider>
        </el-row>
        <el-table
          v-loading="listLoading"
          :data="dataList"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
          stripe
        >
          <el-table-column
            fixed
            prop="num"
            label="序号"
            width="50"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="materialNumber"
            label="货品编码"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="materialName" label="货品名称" align="center">
          </el-table-column>
          <el-table-column prop="specification" label="规格型号" align="center">
          </el-table-column>
          <el-table-column
            prop="saleTypeCode"
            label="销售类型编码"
            width="500"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="saleTypeName" label="销售类型" align="center">
          </el-table-column>
          <el-table-column prop="price" label="单价" align="center">
          </el-table-column>
          <el-table-column label="支付钱包" align="center">
            <template slot-scope="scope">
                               <el-tag style="margin:5px" type="success" size="small" v-for=" item  in  scope.row.walletRelaList">{{item.walletName}}</el-tag>

            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div style="margin: 20px 0">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="listTotal"
          >
          </el-pagination>
        </div>
        <el-row>
          <el-divider></el-divider>
          <el-row type="flex">
            <el-col :span="12">
              <h4 style="display: inline-block; margin-right: 20px">
                条件信息
              </h4>
            </el-col>
          </el-row>
          <el-divider></el-divider>
        </el-row>
        <el-table
          :data="conditionList"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
          stripe
        >
          <el-table-column
            fixed
            type="index"
            label="序号"
            width="50"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="name" label="限定条件" align="center">
            <template slot-scope="scope">
           {{scope.row.name}}
            </template>
          </el-table-column>
         <el-table-column  label="操作" align="center"   width="80">
            <template slot-scope="scope">
               <el-button type="text" size="small" @click="$parent.isShow = 10,$parent.policyId=scope.row.id " >查看条件</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row>
          <el-divider></el-divider>
          <el-row type="flex">
            <el-col :span="12">
              <h4 style="display: inline-block; margin-right: 20px">
                经销商使用范围
              </h4>
            </el-col>
          </el-row>
          <el-divider></el-divider>
        </el-row>
        <el-table
          v-loading="listLoading"
          :data="custoList"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
          stripe
        >
          <el-table-column
            fixed
            type="index"
            label="序号"
            width="50"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="customerNumber"
            label="经销商编码"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="customerName"
            label="经销商名称"
            align="center"
          >
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div style="margin: 20px 0">
          <el-pagination
            @size-change="handleSizeChanges"
            @current-change="handleCurrentChanges"
            :current-page="currentPages"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="clistTotal"
          >
          </el-pagination>
        </div>
        <div class="descriptions" v-if="$parent.isShow == 8  && detail.examineStatus == 'WAIT'">
          <el-row>
            <el-col :span="6">审核人</el-col>
            <el-col :span="6">{{$store.getters.name}}</el-col>
            <el-col :span="6">审核结果</el-col>
            <el-col :span="6">
              <template>
                <el-radio-group v-model="examineStatus">
                  <el-radio :label="'OK'">通过</el-radio>
                  <el-radio :label="'FAIL'">驳回</el-radio>
                </el-radio-group>
              </template>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4">审批说明</el-col>
            <el-col :span="20" class="col value" style="padding: 0" >
              <el-input
                size="small"
                placeholder="请输入内容"
                v-model="remark"
              >
              </el-input>
            </el-col>
          </el-row>
          <el-row>
            <el-button type="primary" size="small" @click="handleSubmit"
              >审核通过</el-button
            >
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getPolicyDetail,
  getMaterialList,
  getCustomerList,
  getConditionList,
  toExamine,
} from "@/api/policy_list";
import Minxin from "@/mixin";
import { ok } from "assert";

export default {
  mixins: [Minxin],
  name: "examine",
  data() {
    return {
      currentPages: 1, // 当前页码
      pageSizes: 10, // 每页数量
      clistTotal: 0,
      input: "",
      remark: "",
      fileList: [],
      listLoading: false,
      imageUrl: "",
      dataList: [],
      examineStatus: "OK",
      options: {},
      value: "",
      detail: {},
      screenForm: {
        code: "",
        createBy: "",
        endCreateTime: "",
        endTime1: "",
        endTime2: "",
        examineBy: "",
        remark: "",
        startCreateTime: "",
        startTime1: "",
        startTime2: "",
        status: "",
        title: "",
        type: "",
      },
      conditionList: [],
      custoList: [],
    };
  },
  created() {

  },
  methods: {
    getList() {
      this.listLoading = true;
      getPolicyDetail({ policyId: this.$parent.id }).then((res) => {
        this.detail = res.data;
        const condParams = {
          policyId: this.detail.code,
        };
        // 获取条件政策
        getConditionList(condParams).then((res) => {
          this.conditionList = res.data;
        });
        const paramss = {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          policyId: this.detail.code,
          saleTypeCode: "",
        };
        getMaterialList(paramss).then((res) => {
          this.dataList = res.data.records;
          this.listTotal = res.data.total;
          this.listLoading = false;
        });

        this.getCond();
      });
    },
    // 更改每页数量
    handleSizeChanges(val) {
      this.pageSizes = val;
      this.currentPages = 1;
      this.getCond();
    },
    // 更改当前页
    handleCurrentChanges(val) {
      this.currentPages = val;
      this.getCond();
    },
    getCond() {
      this.listLoading = true;
      const custoParams = {
        pageNum: this.currentPages,
        pageSize: this.pageSizes,
        policyId: this.detail.code,
      };
      getCustomerList(custoParams).then((res) => {
        this.custoList = res.data.records;
        this.clistTotal = res.data.total;
        this.listLoading = false;
      });
    },
    handleSubmit() {
      toExamine({
        examineStatus: this.examineStatus,
        policyId: this.$parent.id ,
        examineRemark: this.remark,
      }).then((res) => {
        this.$successMsg("已提交审核");
        this.$parent.isShow = 1;
        this.$parent.getList()
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.el-col {
  overflow: hidden;
}
.descriptions {
  // border: #EBEEF5;
  border: 1px solid #ebeef5;
  border-bottom: none;
  .el-row {
    height: 40px;
    line-height: 40px;
  }
  .el-col:nth-child(odd) {
    background-color: #ebeef5;
  }
  .el-col {
    padding: 0 15px;
    height: 100%;
    border-bottom: 1px solid #ebeef5;
  }
}
.el-divider--horizontal {
  margin: 20px 0;
}
.col {
  height: 100px;
}

::v-deep .enterpriseName .el-input__inner {
    width:100%;
    background-color: #e8e8e8;
    text-align: center;
    border-color: #c0c4cc;
    color:#000
}
::v-deep .el-input--small .el-input__inner{
  height: 40px;
  border: none;
}
::v-deep.el-input__inner:focus{
      border-color:#fff !important;
}
</style>