tire-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>
                <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
              :option="customerContact"
              v-model="contactsForm"
              :data="contactsData"
              ref="crudContact"
              @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="menuLeft">
              <el-button
                type="primary"
                icon="el-icon-plus"
                size="small"
                @click.stop="newSpecial"
              >新增明细</el-button>
            </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="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="60%"
        :close-on-click-modal="false"
        :destroy-on-close="true"
        :close-on-press-escape="false"
        @close="closeGoods"
        top="10vh"
        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} from "@/api/maintenance/salesPolicy"
import {
  submit,
  delItem,
  getDeptLazyTree,
  getGoods,
  savePurchase,
  saveShipping,
  getPorts,
  getSpecification,
  saveSell
} from "@/api/basicData/customerInquiry";
import goodsOption from "./configuration/commodity.json";

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
      },
      // 1特价 2买赠
      salesType: 1,
      reData: null,
    }
  },
  //初始化查询
  created() {
    if (this.detailData.id) {
      detail(JSON.parse(this.detailData.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
        delete this.form.specialItemList
        delete this.form.presentItemList
      })
    } else {
      this.form = {}
      this.contactsData = []
    }
  },
  watch: {
    '$route'(to, from) {
      console.log(to, from);
      if (this.detailData.id) {

      } else {
        this.form = {}
      }
    }
  },
  methods: {
    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 - 550;
          } else {
            this.goodsOption.height = window.innerHeight - 475;
          }
        })
        .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 => {
            this.contactsData.push({
              itemId: item.id,
              code: item.code,
              brand: item.brand,
              productCategory: item.goodsTypeName,
              typeno: item.typeno,
              brandItem: item.brandItem,
              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,
              purchasePrice: '',
              salesPrice: '',
              purchaseAmount: '',
              salesVolume: '',
              updateUserName: '',
              updateTime: '',
              salesType: '2',
            })
          })
        }
      }
      this.dialogVisible = false;
    },
    //买赠列表信息保存触发
    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)
      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() {
      console.log(this.form)
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.form.corps = this.form.corps.join(',')
          this.form.specialItemList = this.contactsData
          this.form.presentItemList = this.contactsDataBuyFree
          typeSave(this.form).then(res=>{
            this.$message({
              type: "success",
              message: this.form.id ? "修改成功!" : "新增成功!"
            });
            this.backToList()
          })
        } else {
          return false;
        }
      });
    },
    //返回列表
    backToList() {
      this.$emit("goBack");
      // this.$router.$avueRouter.closeTag();
      // this.$router.push({
      //   path: '/maintenance/salesPolicy/index',
      //   query: {}
      // });
    },
    async saveGoodsColumn() {
      // const inSave = await this.saveColumnData(
      //   this.getColumnName(26),
      //   this.goodsOption
      // );
      // if (inSave) {
      //   this.$message.success("保存成功");
      //   //关闭窗口
      //   this.$refs.goodsCrud.$refs.dialogColumn.columnBox = false;
      // }
    }
  }
}
</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>