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

<template>
  <div class="app-container" v-if="isShow == 1">
    <div class="screen-container">
      <el-form :model="screenForm" ref="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="small"
                ></el-input>
              </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="small"
                ></el-input>
              </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="small"
                ></el-input>
              </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="small"
                  placeholder="生效日期"
                  value-format="yyyy-MM-dd HH:mm:ss"
                >
                </el-date-picker>
              </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="small"
                  placeholder="结束日期"
                  value-format="yyyy-MM-dd HH:mm:ss"
                >
                </el-date-picker>
              </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="small"
                  placeholder="制表日期"
                  value-format="yyyy-MM-dd HH:mm:ss"
                >
                </el-date-picker>
              </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="small"
                ></el-input>
              </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="small"
                ></el-input>
              </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
                  size="small"
                  v-model="screenForm.status"
                  placeholder="状态"
                  class="select_height"
                >
                  <el-option
                    v-for="(item, index) in statusOptions"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :xs="24" :ms="6" :lg="6">
              <el-form-item label="" prop="type">
                <el-select
                  size="small"
                  v-model="screenForm.type"
                  placeholder="销售政策类型"
                  class="select_height"
                >
                  <el-option
                    v-for="item in typeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :ms="6" :lg="6"> </el-col>
            <el-col :xs="24" :ms="6" :lg="12" class="tr">
              <el-form-item>
                <el-button type="primary" size="small" @click="submitScreenForm"
                  >查询</el-button
                >
                <el-button size="small" @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
          size="small"
          type="primary"
          icon="el-icon-plus"
          @click="hanlenewInfo"
          v-if="$checkBtnRole('add', $route.meta.roles)"
          >新增</el-button
        >
      </el-row>
    </div>
    <div class="mymain-container">
      <el-table :data="dataList" border style="width: 100%">
        <el-table-column
          fixed="left"
          label="操作"
          min-width="150"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              v-if="scope.row.examineStatus == 'SAVE'"
              @click="(isShow = 5), (id = scope.row.id)"
              >编辑</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="
                (isShow = 4), (id = scope.row.id), (code = scope.row.code)
              "
              >详情</el-button
            >
            <el-button
              type="text"
              v-if="
                scope.row.examineStatus == 'WAIT' &&
                $checkBtnRole('examine', $route.meta.roles)
              "
              @click="
                (isShow = 8),
                  (id = scope.row.id),
                  (policyId = scope.row.policyId),
                  (code = scope.row.code)
              "
              size="small"
              >审核</el-button
            >
            <!-- </el-popconfirm> -->
            <el-popconfirm
              v-if="scope.row.examineStatus == 'SAVE'"
              style="margin-left: 10px"
              title="提审？"
              @onConfirm="handlesubmit(scope.row)"
            >
              <el-button type="text" size="small" slot="reference"
                >提审</el-button
              >
            </el-popconfirm>

            <el-popconfirm
              v-if="scope.row.examineStatus != 'OK'"
              style="margin-left: 10px"
              title="删除吗？"
              @onConfirm="hanleDelete(scope.row.id)"
            >
              <el-button type="text" slot="reference" size="small"
                >删除</el-button
              >
            </el-popconfirm>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="120" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == '1'">已生效</el-tag>
            <el-tag v-else-if="scope.row.status == '0'">未生效 </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="审核状态" width="120" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.examineStatus == 'SAVE'">保存</el-tag>
            <el-tag v-else-if="scope.row.examineStatus == 'WAIT'"
              >待审核
            </el-tag>
            <el-tag v-else-if="scope.row.examineStatus == 'OK'">通过 </el-tag>
            <el-tag v-else>不通过 </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="code"
          label="销售政策编号"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="title"
          label="销售政策说明"
          width="120"
          align="center"
        >
        </el-table-column>
        <!-- <el-table-column
          prop="mainName"
          label="产品品类"
          align="center"
        ></el-table-column> -->
        <el-table-column
          prop="remark"
          label="表头备注"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="startTime" label="生效日期" align="center">
        </el-table-column>
        <el-table-column prop="endTime" label="结束日期" align="center">
        </el-table-column>
        <el-table-column
          prop="createBy"
          label="制表人"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="制表日期"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="examineBy"
          label="审核人"
          width="120"
          align="center"
        >
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="fr">
      <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>
  </div>
  <AddPolicy v-else-if="isShow == 2" />
  <AddCondition v-else-if="isShow == 10" :id="id" :policyId="policyId" />
  <Examine v-else />
</template>

<script>
import {
  getId,
  getList,
  getTypeList,
  deletePolicy,
  getpolicySubmit,
  toExamine,
} from "@/api/policy_list";
import Minxin from "@/mixin";
import { downloadFiles, handleImport } from "@/utils/util";
import AddPolicy from "./components/AddPolicy";
import AddModel from "./components/AddModel";
import Pagination from "./components/Pagination";
import AddCondition from "./components/AddCondition";
import Examine from "./components/Examine";
import { mapState } from "vuex";

export default {
  mixins: [Minxin],
  data() {
    return {
      id: "",
      code: "",
      codeId: "",
      listLoading: false,
      policyId: "",

      isShow: 1,
      dataList: [],
      screenForm: {
        code: "",
        createBy: "",
        endCreateTime: "",
        endTime1: "",
        endTime2: "",
        examineBy: "",
        remark: "",
        startCreateTime: "",
        startTime1: "",
        startTime2: "",
        status: "",
        title: "",
        type: "",
      },
      fileList: [],
      statusOptions: [
        {
          vlaue: "",
          label: "全部",
        },
        {
          value: true,
          label: "已生效",
        },
        {
          value: false,
          label: "未生效",
        },
      ],
      typeOptions: [
        {
          vlaue: "",
          label: "全部",
        },
        {
          vlaue: "PROVISION",
          label: "配提",
        },
        {
          value: "LIMIT",
          label: "限量",
        },
      ],
      typeList: [],
      value: "",
      imageUrl: "",
      baseURL: "",
      isFlag: "",
    };
  },
  computed: mapState({
    comCode: (state) => state.sales.code,
  }),
  methods: {
    hanlenewInfo() {
      console.log();
      getId().then((res) => {
        this.$store.commit("sales/setId", res.data);
        this.isShow = 2;
      });
    },
    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,
      };
      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();
        });
      });
    },
    // 导出文档
    handleExport() {
      let 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);
      let 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,
    AddModel,
    AddPolicy,
    Pagination,
    AddCondition,
  },
};
</script>

<style lang="scss" scoped>
.btn {
  width: 80px;
}

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

.select_height {
  width: 100%;
}
.import-btn {
  margin: 0 10px;
}
</style>

<style>
.header {
  display: flex;
  height: 50px;
  align-items: center;
}
</style>