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

<template>
  <div>
    <el-header height="50px" class="header">
      <el-page-header @back="$parent.isShow = 1" content="详情页面">
      </el-page-header>
    </el-header>
    <div class="app-container">
      <div class="screen-container">
        <h4>销售政策信息</h4>
        <el-divider></el-divider>
        <el-form
          :model="searchForm"
          :rules="rules"
          ref="searchForm"
          label-width="120px"
          size="small"
          class="demo-searchForm"
        >
          <el-row>
            <el-col :xs="24" :ms="12" :lg="12">
              <el-form-item label="销售政策编号" prop="code">
                <el-input
                  disabled
                  v-model="searchForm.code"
                  placeholder="如未填写，则系统自动生成"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :ms="12" :lg="12">
              <el-form-item label="销售政策说明" prop="title">
                <el-input
                  v-model="searchForm.title"
                  placeholder="销售政策说明"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :ms="12" :lg="12">
              <el-form-item label="销售政策类型" prop="type">
                <el-select
                  size="small"
                  v-model="searchForm.type"
                  placeholder="销售政策类型"
                  @change="hanleChange"
                  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="12" :lg="12">
              <el-form-item label="支付钱包类型" prop="name">
                <el-select v-model="value" placeholder="请选择">
                  <el-option
                    v-for="item in walletList"
                    :key="item.mainId"
                    :label="item.mainName"
                    :value="item.mainId"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <!-- <el-col :xs="24" :ms="12" :lg="12">
            <el-form-item label="制单日期" prop="name">
              <el-date-picker
                v-model="searchForm.name"
                type="date"
                placeholder="制单日期"
              >
              </el-date-picker> </el-form-item
          ></el-col> -->

            <el-col :xs="24" :ms="12" :lg="12">
              <el-form-item label="生效日期" prop="startTime">
                <el-date-picker
                  v-model="searchForm.startTime"
                  type="datetime"
                  placeholder="生效日期"


            default-time="00:00:00"
            value-format="yyyy-MM-dd HH:mm:ss"
                >
                </el-date-picker> </el-form-item
            ></el-col>
            <el-col :xs="24" :ms="12" :lg="12">
              <el-form-item label="失效日期" prop="endTime">
                <el-date-picker
                  v-model="searchForm.endTime"
                  type="datetime"
                  placeholder="失效日期"      default-time="00:00:00"
            value-format="yyyy-MM-dd HH:mm:ss"
                >
                </el-date-picker> </el-form-item
            ></el-col>
            <el-col :xs="24" :ms="24" :lg="24">
              <el-form-item label="表头备注" prop="remark">
                <el-input
                  v-model="searchForm.remark"
                  placeholder="新风机变频挂机。按提货数量1:3开单"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :ms="24" :lg="24">
              <el-form-item label="政策封面图" prop="imgSrc">
                <el-upload
                  class="avatar-uploader"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                >
                  <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="mymian-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-upload
                class="import-btn"
                :action="baseURL + 'student/import'"
                :http-request="handleImport"
                :file-list="importFileList"
              >
                <el-button size="small">导入货品价格表</el-button>
              </el-upload>
              <el-button size="small" @click="hanleDownloadFiles"
                >下载模板</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
                type="danger"
                size="small"
                v-if="scope.row.walletCommonly == 1"
              >
                允许普通钱包
              </el-tag>
              <el-tag type="danger" size="small" v-else
                >不允许使用普通钱包</el-tag
              >
              <el-tag
                type="danger"
                size="small"
                v-if="scope.row.walletDeduct == 1"
              >
                允许抵扣钱包</el-tag
              >
              <el-tag type="danger" size="small" v-else>不允许抵扣钱包</el-tag>
              <el-tag
                type="danger"
                size="small"
                v-if="scope.row.walletRebate == 1"
              >
                允许返利钱包
              </el-tag>
              <el-tag type="danger" size="small" v-else>不允许返利钱包</el-tag>
              <el-tag
                type="danger"
                size="small"
                v-if="scope.row.walletSpecial == 1"
                >允许特殊钱包</el-tag
              >
              <el-tag type="danger" size="small" v-else>
                不允许特殊钱包
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" align="center">
            <template slot-scope="scope">
              <el-popconfirm
                confirm-button-text="好的"
                cancel-button-text="不用了"
                icon="el-icon-info"
                icon-color="red"
                title="内容确定删除吗？"
                @onConfirm="hanleDelete(scope.row.id)"
              >
                <el-button
                  slot="reference"
                  type="text"
                  class="textColor el-popover-left"
                  >删除</el-button
                >
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div style="margin: 20px">
          <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-button size="small" @click="$parent.isShow = 3"
                >管理条件</el-button
              ></el-col
            >
          </el-row>
          <el-divider></el-divider>
        </el-row>
        <el-table
          v-loading="listLoading"
          :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">
          </el-table-column>
          <el-table-column
            fixed="right"
            width="150"
            label="操作"
            align="center"
          >
            <template slot-scope="scope">
              <el-button type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div>
        <el-row>
          <el-divider></el-divider>
          <el-row type="flex" align="middle">
            <el-col :span="2">
              <h4>经销商信息</h4>
            </el-col>
          </el-row>
          <el-divider></el-divider>
        </el-row>
        <Transfer @handleAddPolicy="handleAddPolicy" />
      </div>
    </div>
  </div>
</template>

<script>
import {
  getId,
  addPoliy,
  getTypeList,
  getWalletList,
  getMaterialList,
  getConditionList,
  getCrList,
} from "@/api/supply/sales";
import {
  downloadFiles,
  handleImport,
  deleteMaterialPolicy,
} from "@/utils/util";
import Minxin from "@/mixin";
import Pagination from "@/components/Pagination";
import Transfer from "./Transfer";
export default {
  mixins: [Minxin],
  data() {
    return {
      input: "",
      baseURL: "",
      searchForm: {
        code: "",
        endTime: "",
        imgSrc: "",
        remark: "",
        startTime: "",
        title: "",
        type: "",
      },
      listLoading: false,
      rules: {
        name: [
          { required: true, message: "", trigger: "click" },
          { min: 3, max: 5, message: "", trigger: "click" },
        ],
      },
      imageUrl: "",
      dataList: [],
      importFileList: [],
      fileList: [],
      options: {},
      value: "",
      typeList: [],
      walletList: [],
      typeOptions: [
        {
          vlaue: "PROVISION",
          label: "配提",
        },
        {
          value: "LIMIT",
          label: "限量",
        },
      ],
      conditionList: [],

    };
  },
  created() {
    this.getCommonApi();
  },
  mounted() {},
  methods: {
    //下载excel模板
    hanleDownloadFiles() {
      downloadFiles("/policy/download");
    },
    getCommonApi() {
      const params = {
        pageNum: 1,
        pageSize: 10,
        saleCode: "",
        saleName: "",
        status: "",
      };
      const walletParams = {
        pageNum: 1,
        pageSize: 10,
        mainName: "",
        saleTypeCode: "",
        saleTypeName: "",
        status: "",
      };
      // 获取销售政策编号
      getId().then((res) => {
        console.log(res.data);
        this.searchForm.code = res.data;
        this.$parent.codeId = res.data
      });
      // 获取销售类型列表
      getTypeList(params).then((res) => {
        this.typeList = res.data.records;
        console.log(this.typeList, "type");
      });
      // 获取钱包列表
      getWalletList(walletParams).then((res) => {
        this.walletList = res.data.records;
      });
    },
    // 导入
    async handleImport(param) {
      this.importLoading = true;
      const file = param.file;
      console.log(file, 123);
      const formData = new FormData();
      formData.append("file", file);
      formData.append("policyId", this.searchForm.code);
      let result = await handleImport("/policy/material/import", formData);
      this.importLoading = false;
      this.importFileList = [];
      if (result.code == 200) {
        this.$alert(result.message, "导入成功", {
          confirmButtonText: "确定",
        });
        // this.getList();
        this.handletwoList();
      } else {
        this.$alert(result.message, "导入失败", {
          confirmButtonText: "确定",
        });
      }
    },
    getList() {
      const params = {
        policyId: this.searchForm.code,
      };
      // 获取条件政策
      getConditionList(params).then((res) => {
        this.conditionList = res.data;
      });
    },
    //获取政策id调取货品信息
    hanleChange() {
      // this.handletwoList();
    },
    // 获取货品信息
    handletwoList() {
      const paramss = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        policyId: this.searchForm.code,
        saleTypeCode: this.searchForm.type,
      };
      console.log(45454);
      getMaterialList(paramss)
        .then((result) => {
          this.dataList = result.data.records;
          console.log(result, 9898989);
        })
        .catch((err) => {
          console.error(err);
        });
    },
    // 获取图片路径
    beforeAvatarUpload() {},
    handleAvatarSuccess() {},
    // 提交审核
    handleAddPolicy(policyCustomers) {
      console.log(policyCustomers, "选择的经销商");

      var arr = [
        {
          customerId: "",
          customerName: "",
          customerNumber: "",
          id: "",
          lastOrderTime: "",
          limitTakeNum: 0,
          policyId: "",
          policyTitle: "",
          remark: "",
        },
      ];
      policyCustomers.forEach((el) => {
        arr.push({
          customerId: "",
          customerName: el.name,
          customerNumber: el.number,
          lastOrderTime: "",
          limitTakeNum: 0,
          policyId: this.searchForm.code,
          policyTitle: "",
          remark: "",
        });
      });

      const params = {
        adminCompanyId: "",
        code: "",
        customerCount: 0,

        examineBy: "",
        examineRemark: "",
        examineStatus: "",

        id: "",
        imgSrc: "",
        policyCustomers: arr,
        remark: "",

        status: true,
        title: "",
        type: "",
        ...this.searchForm,
      };
      addPoliy(params).then((res) => {
        console.log(res);
      });
    },
    //删除
    hanleDelete(id) {
      const params = { policyMaterialId: id };
      deleteMaterialPolicy(params).then((res) => {
        this.$successMsg("删除成功");
        this.handletwoList();
      });
    },
  },
  components: {
    Transfer,
    Pagination,
  },
};
</script>

<style lang="scss" scoped>
h4 {
  margin: 0;
}
.pdt {
  padding-top: 20px;
}
.import-btn {
  margin-right: 10px;
  display: inline-block;
}
.radio {
  padding: 20px 0;
}
.el-divider--horizontal {
  margin: 20px 0;
}
.el-container .el-divider--horizontal {
  margin: 10px;
}

.el-select {
  width: 100%;
}

.footer {
  margin-bottom: 20px;
}
</style>