|
|
@@ -0,0 +1,378 @@
|
|
|
+<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">213132</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">213132</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>
|
