order-ui-pc/src/views/goodStore/goodsOnline/components/fixed-price-form.vue

<template>
  <el-form
    v-loading="loading"
    ref="ruleForm"
    :model="ruleForm"
    status-icon
    :rules="rulesThis"
    :label-width="labelWidth || '110px'"
    class="demo-ruleForm-goodsOnline"
    :size="'mini'"
  >
    <el-row>
      <el-col :span="12"
        ><el-form-item label="售价凭证类型" prop="proof_type">
          <el-radio-group v-model="ruleForm.proof_type">
            <el-radio
              v-for="item in options"
              :key="item.value"
              :label="item.value"
              >{{ item.label }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="凭证文件" prop="proof_url">
          <ul class="shangchuan-ul">
            <li v-if="ruleForm.proof_type === '1'" class="shiping">暂无接口</li>
            <li v-if="ruleForm.proof_type === '2'" class="tupian">
              <div class="activity-upload">
                <div class="btnupload" style="position: relative">
                  <img
                    v-if="ruleForm.proof_url"
                    :src="ruleForm.proof_url"
                    class="avatar"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  <file-upload
                    class="Upload"
                    :disabled="type === 'view' || type === 'editCoin'"
                    :accept="'.jpg,.png,.jpeg'"
                    :multiple="false"
                    :uploadcondition="beforeAvatarUpload"
                    @UploadErrorEvent="UploadErrorEventproof_url"
                    @UploadSuccessEvent="UploadSuccessEventproof_url"
                  ></file-upload>
                </div>
                <div class="txt-tips fl">
                  <p>建议大小：小于1MB</p>
                  <p>文件格式：.jpg,.png,.jpeg</p>
                </div>
                <div class="show-"></div>
              </div>
            </li>
            <li v-if="ruleForm.proof_type === '3'" class="qita">暂无接口</li>
          </ul>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-table
          :data="ruleForm.good_ladder"
          :size="'mini'"
          border
          stripe
          style="width: 100%; margin: 0 0 20px 0"
        >
          <el-table-column prop="min_num" label="起订量(>=)" />
          <el-table-column prop="sale_price" label="售价" />
          <el-table-column prop="market_price" label="市场价" />
          <el-table-column prop="market_platform" label="对比平台" />
          <el-table-column prop="status" label="状态" />
          <el-table-column fixed="right">
            <template slot="header" slot-scope="scope">
              <span>操作</span>
              <el-tooltip effect="dark" content="添加阶梯" placement="top">
                <i
                  class="el-icon-circle-plus-outline tb-icon fr"
                  @click="openCostEdit(-1, {})"
                ></i>
              </el-tooltip>
            </template>
            <template slot-scope="scope">
              <el-tooltip effect="dark" content="修改" placement="top">
                <i
                  class="el-icon-edit tb-icon"
                  @click="openCostEdit(scope.$index, scope.row)"
                ></i>
              </el-tooltip>

              <el-tooltip effect="dark" content="删除" placement="top">
                <i
                  class="el-icon-delete tb-icon"
                  @click="openCostEditDelete(scope.$index)"
                ></i>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <!-- 弹窗 新增/修改 -->
        <cost-form-add-edit
          :index="costmodelIndex"
          :show-model="costshowModel"
          :sitem="costsitem"
          @refresh="costrefreshEdit"
          @cancel="costshowModel = false"
        />
        <el-form-item class="fr">
          <el-button
            v-if="!isDetail"
            :size="'mini'"
            type="primary"
            @click="submitForm"
            >保 存
          </el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import costFormAddEdit from "./costFormAddEdit";
import asyncRequest from "@/apis/service/goodStore/goodsOnline";
export default {
  name: "exam-form",
  props: ["size", "statusList", "disabled", "isMust", "labelWidth", "id"],
  components: {
    costFormAddEdit,
  },
  /**
   * 属性集合
   * @param {String}        size             : 组件大小             非必填
   * @param {Array}         statusList       : 驳回至备选项          必填
   * @param {Boolean}       disabled         : 是否禁用              必填
   * @param {Boolean}       isMust           : 是否需要展示驳回节点   必填
   *
   *
   */
  /**
   * 事件集合
   * @searchChange             : 选中值变化调用   抛出选中数据
   */
  data() {
    return {
      loading: false,
      options: [
        {
          value: "1",
          label: "视频",
        },
        {
          value: "2",
          label: "图片",
        },
        {
          value: "3",
          label: "其他",
        },
      ],
      showModelThis: this.showModel,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 60 * 60 * 24 * 1000;
        },
      },
      costshowModel: false,
      costmodelIndex: "",
      costsitem: {},
      ruleForm: {
        skuCode: "",
        proof_type: "1", // 通过or驳回
        proof_url: "", //驳回至
        good_ladder: [],
      },
      rulesThis: this.rules,
      rules: {
        proof_type: [
          {
            required: true,
            message: "请选择审核状态",
            trigger: "change",
          },
        ],
        proof_url: [
          {
            required: true,
            message: "请上传",
            trigger: "change",
          },
        ],
        rebut: [
          {
            required: true,
            message: "请选择驳回节点",
            trigger: "change",
          },
        ],
        remark: [
          { required: true, message: "请输入审核备注", trigger: "blur" },
          {
            min: 1,
            max: 250,
            message: "长度在 1 到 250 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  watch: {
    isDetail: function (val, old) {
      if (this.isDetail !== val) {
        this.options = [];
        this.selectLoading = false;
      }
    },
  },
  mounted() {
    this.initForm();
  },
  methods: {
    async initForm() {
      this.loading = true;
      this.rulesThis = this.rules;
      await this.resetForm();
      this.loading = false;
    },

    openCostEdit(index, sitem) {
      this.costmodelIndex = index;
      this.costsitem = sitem;
      this.costshowModel = true;
    },

    openCostEditDelete(index) {
      this.ladder_tableData.splice(index, 1);
    },
    //阶梯成本修改
    costrefreshEdit(e) {
      let item = JSON.parse(JSON.stringify(e));
      console.log(item);
      const {
        index,
        id,
        min_num,
        sale_price,
        market_price,
        market_platform,
        status,
        is_del,
      } = item;
      if (index + "" === "-1") {
        this.ruleForm.good_ladder.push(item);
      } else {
        this.ruleForm.good_ladder.forEach((i, findex) => {
          if (i.id === id && findex === parseInt(i.index)) {
            this.ruleForm.good_ladder[findex].id = id;
            this.ruleForm.good_ladder[findex].sale_price = sale_price;
            this.ruleForm.good_ladder[findex].market_price = market_price;
            this.ruleForm.good_ladder[findex].min_num = min_num;
            this.ruleForm.good_ladder[findex].market_platform = market_platform;
            this.ruleForm.good_ladder[findex].status = status;
            this.ruleForm.good_ladder[findex].id_del = is_del;
          }
        });
        // this.ladder_tableData = this.ladder_tableData.sort(
        //   this.dataSort("min_num")
        // );
      }
      this.showModel = false;
    },

    async resetForm() {
      // 重置
      await this.$nextTick(() => {
        if (this.$refs.ruleForm) {
          this.$refs.ruleForm.resetFields();
          this.$refs.ruleForm.clearValidate();

          this.ruleForm = {
            skuCode: this.id,
            proof_type: "1", // 通过or驳回
            proof_url: "", //驳回至
            good_ladder: [],
          };
        }
      });
    },
    async submitForm() {
      await this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          let model = JSON.parse(JSON.stringify(this.ruleForm));
          let list = JSON.parse(JSON.stringify(model.good_ladder));
          let list2 = [];
          list.forEach((e) => {
            let n = JSON.parse(JSON.stringify(e));
            for (let key in n) {
              n[key] += "";
            }
            delete n["index"];
            list2.push(n);
          });
          model.good_ladder = list2;
          model.skuCode = this.id;
          let res = await asyncRequest.ladderOne(model);
          this.loading = false;
          if (res && res.code === 0) {
            const { spuCode } = res.data;
            this.$notify.success({
              title: "信息提交成功",
              message: "",
            });
            // this.showModelThis = false;
            // 刷新
            this.$emit("resSuccess", true);
            // this.routeReGoto("goodsOnline", {});
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //图片上传成功
    async UploadSuccessEventproof_url(data) {
      const { url } = data;
      if (url === "noToken") {
        await this.logout();
      } else {
        this.ruleForm.proof_url = url;
        this.$refs.ruleForm.validateField("proof_url");
        this.$message.success("图片上传成功!");
      }
    },

    //图片上传失败
    UploadErrorEventproof_url(res) {
      if (res !== "break") {
        this.$message.error("图片上传失败!");
        this.$refs.ruleForm.validateField("proof_url");
      }
    },

    //判断图片规格
    beforeAvatarUpload(file) {
      let isJPG = false;
      if (
        file.type === "image/jpg" ||
        file.type === "image/png" ||
        file.type === "image/jpeg"
      ) {
        isJPG = true;
      }
      const isLt2M = file.size / 1024 / 1024 < 1;
      if (!isJPG) {
        this.$message.error("图片格式不正确！");
      }
      if (!isLt2M) {
        this.$message.error("图片大小不能超过 1MB!");
      }
      return isJPG && isLt2M;
    },
  },
};
</script>

<style lang="scss" scoped>
.demo-ruleForm-goodsOnline {
  .shangchuan-ul {
    li {
      position: relative;
      width: 100%;
      &.tupian {
      }
    }
  }
}
</style>