Smart_platform_ui/src/views/maintenance/salesPolicy/detailsPageEdit.vue

<template>
  <div class="borderless">
    <div class="customer-head">
      <div class="customer-back">
        <!--        <i class="back-icon el-icon-arrow-left"></i><i style="font-style:normal">返回管理列表</i>-->
        <el-button
          type="danger"
          style="border: none;background: none;color: red"
          icon="el-icon-arrow-left"
          @click="backToList"
          >返回列表
        </el-button>
      </div>
      <el-button
        class="el-button--small-yh add-customer-btn"
        type="primary"
        :disabled="disabled"
        size="small"
        @click="editCustomer"
        >{{ form.id ? "确认修改" : "确认新增" }}
      </el-button>
    </div>
    <div style="margin-top: 60px">
      <el-form
        :model="form"
        ref="form"
        label-width="130px"
        class="demo-ruleForm"
      >
        <containerTitle title="基础资料"></containerTitle>
        <basic-container style="margin-bottom: 10px">
          <el-row>
            <el-col
              v-for="(item, index) in basicData.column"
              :key="index"
              :span="item.span ? item.span : 8"
            >
              <el-form-item
                :label="item.label"
                :prop="item.prop"
                :rules="item.rules"
              >
                <!--                <avue-input-tree v-if="item.prop === 'corpsTypeId'" leaf-only multiple :props="{label:'title'}"v-model="form[item.prop]" placeholder="请选择内容" type="tree" :dic="dic"/>-->
                <el-date-picker
                  v-if="item.type === 'datetime'"
                  style="width: 100%;"
                  v-model="form[item.prop]"
                  size="small"
                  type="datetime"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd HH:mm:ss"
                />
                <span v-else-if="item.type === 'select'">
                  <el-select
                    v-model="form[item.prop]"
                    slot="prepend"
                    style="width: 100%;"
                    size="small"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="(item, index) in item.dicData"
                      :label="item.label"
                      :value="item.value"
                      :key="index"
                    ></el-option>
                  </el-select>
                </span>
                <crop-select
                  v-else-if="item.prop === 'corps'"
                  v-model="form[item.prop]"
                  :multiple="true"
                  :collapseTags="true"
                  corpType="KH"
                  style="width: 100%"
                  @getCorpList="getCorpList"
                ></crop-select>
                <!--                <selectComponent v-else-if="item.prop === 'corps'" v-model="form[item.prop]"-->
                <!--                                 :configuration="configuration" style="width: 100%"/>-->
                <el-input
                  type="textarea"
                  v-else-if="item.type === 'textarea'"
                  v-model="form[item.prop]"
                  size="small"
                  autocomplete="off"
                  :disabled="item.disabled"
                ></el-input>
                <el-input
                  type="age"
                  v-else
                  v-model="form[item.prop]"
                  size="small"
                  autocomplete="off"
                  :disabled="item.disabled ? item.disabled : false"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </basic-container>
        <containerTitle title="特价促销"></containerTitle>
        <basic-container style="margin-bottom: 10px">
          <avue-crud
            :table-loading="contactLoading"
            :page.sync="contactPage"
            :option="customerContact"
            v-model="contactsForm"
            :data="contactsData"
            ref="crudContact"
            @current-change="currentChange"
            @size-change="sizeChange"
            @row-save="rowSave"
            @row-click="handleRowClick"
            @row-update="rowUpdate"
            @row-del="rowDel"
          >
            <template slot="code" slot-scope="{ row, index }">
              <el-button
                size="small"
                type="text"
                @click="rePick(row, index, 1)"
                :disabled="disabled"
                class="picker"
                style="padding:4px 10px;float:left"
                >选择</el-button
              >
              <span> {{ row.code }}</span>
            </template>
            <template slot="corpId" slot-scope="{ row, index }">
              <crop-select
                v-if="row.$cellEdit"
                v-model="row.corpId"
                :cropIndex="index"
                corpType="GYS"
                @getCorpData="getcorpId"
                :disabled="detailData.seeDisabled"
              ></crop-select>
              <span v-else>{{ row.corpName }}</span>
            </template>
            <template slot="menuLeft">
              <el-button
                type="primary"
                icon="el-icon-plus"
                size="small"
                @click.stop="newSpecial"
                >新增明细</el-button
              >
              <el-button
                type="primary"
                size="small"
                icon="el-icon-download"
                @click="downloadHandle"
                >下载模板</el-button
              >
              <el-upload
                :action="baseURL"
                :headers="headers"
                :disabled="detailData.seeDisabled"
                :on-progress="uploading"
                :show-file-list="false"
                accept=".xls,.xlsx"
                multiple
                :on-success="importTemplate"
                :on-error="uploadError"
                style="float: right"
              >
                <el-button type="primary" size="small" icon="el-icon-upload"
                  >导 入</el-button
                >
              </el-upload>
            </template>
            <template slot-scope="{ row, index }" slot="menu">
              <el-button type="text" size="small" @click="rowCell(row, index)"
                >{{ row.$cellEdit ? "保存" : "修改" }}
              </el-button>
              <el-button
                size="small"
                icon="el-icon-delete"
                type="text"
                @click="rowDel(row, index)"
                >删 除</el-button
              >
            </template>
          </avue-crud>
        </basic-container>
        <containerTitle title="买赠促销"></containerTitle>
        <basic-container style="margin-bottom: 10px">
          <avue-crud
            :option="customerBuyFree"
            v-model="contactsFormBuyFree"
            :data="contactsDataBuyFree"
            ref="crudContactE"
            @row-save="rowSaveBuyFree"
            @row-click="handleRowClickBuyFree"
            @row-update="rowUpdateBuyFree"
            @row-del="rowDelBuyFree"
          >
            <template slot="code" slot-scope="{ row, index }">
              <el-button
                size="small"
                type="text"
                @click="rePick(row, index, 2)"
                :disabled="disabled"
                class="picker"
                style="padding:4px 10px;float:left"
                >选择</el-button
              >
              <span> {{ row.code }}</span>
            </template>
            <template slot="corpId" slot-scope="{ row, index }">
              <crop-select
                v-if="row.$cellEdit"
                v-model="row.corpId"
                :cropIndex="index"
                corpType="GYS"
                @getCorpData="getcorpFeesId"
                :disabled="detailData.seeDisabled"
              ></crop-select>
              <span v-else>{{ row.corpName }}</span>
            </template>
            <template slot="menuLeft">
              <el-button
                type="primary"
                icon="el-icon-plus"
                size="small"
                @click.stop="newBuyFree"
                >新增明细</el-button
              >
            </template>
            <template slot-scope="{ row, index }" slot="menu">
              <el-button type="text" size="small" @click="rowCellE(row, index)"
                >{{ row.$cellEdit ? "保存" : "修改" }}
              </el-button>
              <el-button
                size="small"
                icon="el-icon-delete"
                type="text"
                @click="rowDelBuyFree(row, index)"
                >删 除</el-button
              >
            </template>
          </avue-crud>
        </basic-container>
      </el-form>
      <el-dialog
        title="导入商品"
        append-to-body
        class="el-dialogDeep"
        :visible.sync="dialogVisible"
        width="80%"
        top="5vh"
        :close-on-click-modal="false"
        :destroy-on-close="true"
        :close-on-press-escape="false"
        @close="closeGoods"
        v-dialogdrag
      >
        <span>
          <el-row>
            <el-col :span="5">
              <div>
                <el-scrollbar>
                  <basic-container style="margin-top:45px">
                    <avue-tree :option="treeOption" @node-click="nodeClick" />
                  </basic-container>
                </el-scrollbar>
              </div>
            </el-col>
            <el-col :span="19">
              <avue-crud
                :option="goodsOption"
                :table-loading="loading"
                :data="goodsList"
                ref="goodsCrud"
                @refresh-change="refreshChange"
                @selection-change="selectionChange"
                @row-click="rowClick"
                :page.sync="page"
                @on-load="onLoad"
                @saveColumn="saveGoodsColumn"
                @search-change="goodsSearch"
              ></avue-crud>
            </el-col>
          </el-row>
        </span>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="importGoods"
            :disabled="selectionList.length == 0"
            >导入</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import customerContact from "./configuration/customerContact.json";
import BuyFree from "./configuration/BuyFree.json";
import {
  detail,
  corpsattn,
  typeSave,
  getItemdetail,
  itemSubmit
} from "@/api/maintenance/salesPolicy";
import {
  submit,
  delItem,
  getDeptLazyTree,
  getGoods,
  savePurchase,
  saveShipping,
  getPorts,
  getSpecification,
  saveSell
} from "@/api/basicData/customerInquiry";
import goodsOption from "./configuration/commodity.json";
import { contrastObj, contrastList } from "@/util/contrastData";
import { getToken } from "@/util/auth";

export default {
  name: "detailsPage",
  props: {
    detailData: Object
  },
  data() {
    return {
      configuration: {
        multipleChoices: true,
        multiple: true,
        collapseTags: false,
        placeholder: "请点击右边按钮选择",
        dicData: []
      },
      form: {},
      disabled: false,
      customerContact: customerContact,
      contactsForm: {},
      contactsData: [],
      customerBuyFree: BuyFree,
      contactsFormBuyFree: {},
      contactsDataBuyFree: [],
      basicData: {
        column: [
          {
            label: "政策名称",
            prop: "cname",
            rules: [
              {
                required: true,
                message: " ",
                trigger: "blur"
              }
            ]
          },
          {
            label: "状态",
            prop: "status",
            type: "select",
            dicData: [
              {
                label: "正常",
                value: 0
              },
              {
                label: "停用",
                value: 1
              }
            ],
            rules: [
              {
                required: true,
                message: " ",
                trigger: "blur"
              }
            ]
          },
          {
            label: "品牌",
            prop: "brand",
            rules: [
              {
                required: true,
                message: " ",
                trigger: "blur"
              }
            ]
          },
          {
            label: "操作员",
            prop: "createUserName",
            disabled: true,
            rules: [
              {
                required: false,
                message: " ",
                trigger: "blur"
              }
            ]
          },
          {
            label: "有效期开始时间",
            prop: "startTime",
            type: "datetime",
            rules: [
              {
                required: true,
                message: " ",
                trigger: "blur"
              }
            ]
          },
          {
            label: "有效期结束时间",
            prop: "endTime",
            type: "datetime",
            rules: [
              {
                required: true,
                message: " ",
                trigger: "blur"
              }
            ]
          },
          {
            //多选
            label: "代理商",
            prop: "corps",
            span: 16,
            rules: [
              {
                required: true,
                message: " ",
                trigger: "blur"
              }
            ]
          },
          {
            label: "备注",
            type: "textarea",
            span: 24,
            prop: "remarks",
            mock: {
              type: "county"
            }
          }
        ]
      },
      dialogVisible: false,
      selectionList: [],
      treeDeptId: null,
      treeOption: {
        nodeKey: "id",
        lazy: true,
        treeLoad: function(node, resolve) {
          const parentId = node.level === 0 ? 0 : node.data.id;
          getDeptLazyTree(parentId).then(res => {
            resolve(
              res.data.data.map(item => {
                return {
                  ...item,
                  leaf: !item.hasChildren
                };
              })
            );
          });
        },
        addBtn: false,
        menu: false,
        size: "small",
        props: {
          label: "title",
          value: "value",
          children: "children"
        }
      },
      goodsOption: goodsOption,
      loading: false,
      goodsList: [],
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      contactPage: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      // 1特价 2买赠
      salesType: 1,
      reData: null,
      oldForm: {},
      oldSpecialOffer: [],
      oldBuyFree: [],
      baseURL: "/api/blade-mocha-item/salespolicy/import-sales-policy",
      headers: { "Blade-Auth": "Bearer " + getToken() },
      contactLoading: false
    };
  },
  //初始化查询
  created() {
    if (this.detailData.id) {
      this.queryData(this.detailData.id);
    } else {
      this.form = {};
      this.contactsData = [];
    }
  },
  watch: {
    $route(to, from) {
      console.log(to, from);
      if (this.detailData.id) {
      } else {
        this.form = {};
      }
    }
  },
  methods: {
    queryData(id) {
      this.openFullScreen(false, "正在努力的加载...");
      detail(id)
        .then(res => {
          this.form = res.data.data;
          if (this.form.corpNameList) {
            this.configuration.dicData = this.form.corpNameList;
          }
          this.form.corps = this.form.corps.split(",");
          // if (res.data.data.specialItemList) this.contactsData = res.data.data.specialItemList
          if (res.data.data.presentItemList)
            this.contactsDataBuyFree = res.data.data.presentItemList;
          this.oldForm = Object.assign({}, this.form);
          // this.oldSpecialOffer = this.deepClone(this.contactsData)
          this.oldBuyFree = this.deepClone(this.contactsDataBuyFree);
          delete this.form.specialItemList;
          delete this.form.presentItemList;
          this.getItemdetail();
        })
        .finally(() => {
          this.openFullScreen(true);
        });
    },
    getItemdetail() {
      this.contactLoading = true;
      getItemdetail({
        current: this.contactPage.currentPage,
        size: this.contactPage.pageSize,
        pid: this.form.id
      })
        .then(res => {
          this.contactsData = res.data.data.records;
          this.contactPage.total = res.data.data.total;
          this.customerContact.height = window.innerHeight - 240;
        })
        .finally(() => {
          this.contactLoading = false;
        });
    },
    currentChange(val) {
      this.contactPage.currentPage = val;
      this.getItemdetail();
    },
    sizeChange(val) {
      this.contactPage.currentPage = 1;
      this.contactPage.pageSize = val;
      this.getItemdetail();
    },
    rePick(row, index, type) {
      this.reData = {
        ...row,
        index: index
      };
      if (type == 1) {
        this.newSpecial();
      } else {
        this.newBuyFree();
      }
    },
    // 新增特价弹窗
    newSpecial() {
      this.salesType = 1;
      this.dialogVisible = !this.dialogVisible;
    },
    // 买赠弹窗
    newBuyFree() {
      this.salesType = 2;
      this.dialogVisible = !this.dialogVisible;
    },
    closeGoods() {
      this.selectionList = [];
      this.treeDeptId = "";
      this.reData = null;
    },
    nodeClick(data) {
      this.treeDeptId = data.id;
      this.page.currentPage = 1;
      this.onLoad(this.page);
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    rowClick(row) {
      this.$refs.goodsCrud.toggleSelection([this.goodsList[row.$index]]);
    },
    goodsSearch(params, done) {
      this.onLoad(this.page, params);
      done();
    },
    //商品查询
    onLoad(page, params = {}) {
      this.loading = true;
      getGoods(page.currentPage, page.pageSize, this.treeDeptId, params)
        .then(res => {
          const data = res.data.data;
          this.page.total = data.total;
          this.goodsList = data.records;
          if (this.page.total) {
            this.goodsOption.height = window.innerHeight - 280;
          } else {
            this.goodsOption.height = window.innerHeight - 280;
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 确认导入商品
    importGoods() {
      if (this.reData) {
        if (this.selectionList.length != 1) {
          return this.$message.error("重新选择的时候只能选择一条数据");
        } else {
          this.selectionList.forEach(e => {
            if (this.reData.salesType == 1) {
              this.contactsData.forEach((item, index) => {
                if (index == this.reData.index) {
                  item.itemId = e.id;
                  item.code = e.code;
                  item.cname = e.cname;
                  item.brand = e.brand;
                  item.productCategory = e.goodsTypeName;
                  item.typeno = e.typeno;
                  item.brandItem = e.brandItem;
                  // item.purchasePrice = this.brand.purchasePrice
                  // item.salesPrice = this.brand.salesPrice
                  // item.specialOffer = this.brand.specialOffer
                  // item.updateUserName = this.brand.updateUserName
                  // item.updateTime = this.brand.updateTime
                  // item.salesType = this.brand.salesType
                }
              });
            } else {
              this.contactsDataBuyFree.forEach((item, index) => {
                item.itemId = e.id;
                item.code = e.code;
                item.cname = e.cname;
                item.brand = e.brand;
                item.productCategory = e.goodsTypeName;
                item.typeno = e.typeno;
                item.brandItem = e.brandItem;
                // item.purchasePrice = this.brand.purchasePrice
                // item.salesPrice = this.brand.salesPrice
                // item.salesPrice = this.brand.purchaseAmount
                // item.updateUserName = this.brand.salesVolume
                // item.updateUserName = this.brand.updateUserName
                // item.updateTime = this.brand.updateTime
                // item.salesType = this.brand.salesType
              });
            }
          });
        }
      } else {
        if (this.salesType == 1) {
          this.selectionList.forEach(item => {
            console.log(item);
            this.contactsData.push({
              itemId: item.id,
              code: item.code,
              brand: item.brand,
              productCategory: item.goodsTypeName,
              typeno: item.typeno,
              brandItem: item.brandItem,
              corpId: item.corpId,
              corpName: item.corpName,
              purchasePrice: "",
              salesPrice: "",
              specialOffer: "",
              updateUserName: "",
              updateTime: "",
              salesType: "1"
            });
          });
        } else if (this.salesType == 2) {
          this.selectionList.forEach(item => {
            this.contactsDataBuyFree.push({
              itemId: item.id,
              code: item.code,
              brand: item.brand,
              productCategory: item.goodsTypeName,
              typeno: item.typeno,
              brandItem: item.brandItem,
              corpName: item.corpName,
              purchasePrice: "",
              salesPrice: "",
              purchaseAmount: "",
              salesVolume: "",
              updateUserName: "",
              updateTime: "",
              salesType: "2"
            });
          });
        }
      }
      this.dialogVisible = false;
      console.log(this.contactsData);
    },
    //买赠列表信息保存触发
    rowSaveBuyFree(row, done, loading) {
      console.log(row);
      console.log(this.contactsData);
      // this.contactsData.push(row)
      done();
    },
    //买赠列表点击行可编辑
    handleRowClickBuyFree(row, event, column) {
      console.log(row.$index);
    },
    //买赠列表修改信息触发
    rowUpdateBuyFree(row, index, done, loading) {
      done(row);
    },
    //买赠列表删除信息触发
    rowDelBuyFree(row, index, donerowDel) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        //商品判断是否需要调用删除接口
        if (row.id) {
          corpsattn(row.id).then(res => {
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            this.contactsDataBuyFree.splice(index, 1);
          });
        } else {
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.contactsDataBuyFree.splice(index, 1);
        }
      });
    },
    //新增商品信息保存触发
    rowSave(row, done, loading) {
      console.log(row);
      console.log(this.contactsData);
      // this.contactsData.push(row)
      done();
    },
    //点击行可编辑
    handleRowClick(row, event, column) {
      console.log(row.$index);
    },
    //商品编辑
    rowCell(row, index) {
      console.log(row);
      if (row.$cellEdit) {
        itemSubmit({...row,pid: this.form.id}).then(res => {
          this.$message.success('保存成功')
          this.$refs.crudContact.rowCell(row, index);
        })
      } else {
        this.$refs.crudContact.rowCell(row, index);
      }
    },
    //买赠编辑
    rowCellE(row, index) {
      console.log(row);
      this.$refs.crudContactE.rowCell(row, index);
    },
    //修改商品信息触发
    rowUpdate(row, index, done, loading) {
      done(row);
    },
    //删除商品信息触发
    rowDel(row, index, donerowDel) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        //商品判断是否需要调用删除接口
        if (row.id) {
          corpsattn(row.id).then(res => {
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            this.contactsData.splice(index, 1);
          });
        } else {
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.contactsData.splice(index, 1);
        }
      });
    },
    //修改提交触发
    editCustomer() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.form.corps = this.form.corps.join(",");
          this.form.specialItemList = this.contactsData;
          this.form.presentItemList = this.contactsDataBuyFree;
          this.openFullScreen(false, "正在努力的加载...");
          typeSave(this.form).then(res => {
            this.$message({
              type: "success",
              message: this.form.id ? "修改成功!" : "新增成功!"
            });
            // this.backToList()
            this.queryData(res.data.data.id);
          });
        } else {
          return false;
        }
      });
    },
    //返回列表
    backToList() {
      this.$emit("goBack");
    },
    async saveGoodsColumn() {
      // const inSave = await this.saveColumnData(
      //   this.getColumnName(26),
      //   this.goodsOption
      // );
      // if (inSave) {
      //   this.$message.success("保存成功");
      //   //关闭窗口
      //   this.$refs.goodsCrud.$refs.dialogColumn.columnBox = false;
      // }
    },
    //遮罩层
    openFullScreen(res, text) {
      const loading = this.$loading({
        lock: true,
        text: text,
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      if (res === true) loading.close();
    },
    getcorpId(row) {
      this.contactsData[row.index].corpId = row.id;
    },
    getcorpFeesId(row) {
      this.contactsDataBuyFree[row.index].corpId = row.id;
    },
    // 下载模板
    downloadHandle() {
      this.$confirm("是否下载模板文件？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          window.open(
            `/api/blade-mocha-item/salespolicy/export-sales-policy?${
              this.website.tokenHeader
            }=${getToken()}`
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    //文件上传时
    uploading(event, file, fileList) {
      this.openFullScreen(false, "文件正在解析中");
    },
    importTemplate(res, file) {
      this.openFullScreen(true);
      let contactsData = [];
      contactsData = res.data;
      this.contactsData = this.contactsData.concat(contactsData);
      // console.log(res.data)
    },
    uploadError(err, file, fileList) {
      this.openFullScreen(true);
      this.$message.error(JSON.parse(err.message).msg);
    },
    getCorpList(data) {
      let arr = [];
      data.map(e => {
        arr.push(e.id);
      });
      this.form.corps = arr;
    }
  }
};
</script>

<style lang="scss" scoped>
.back-icon {
  line-height: 64px;
  font-size: 20px;
  margin-right: 8px;
}

::v-deep .el-form-item {
  margin-bottom: 0;
}

.el-dialogDeep {
  ::v-deep .el-dialog {
    margin: 1vh auto 0 !important;
    padding-bottom: 10px !important;

    .el-dialog__body,
    .el-dialog__footer {
      padding-bottom: 0 !important;
      padding-top: 0 !important;
    }
  }
}
::v-deep .el-form-item {
  margin-bottom: 0;
}

::v-deep .el-form-item__content {
  line-height: 32px;
}
</style>