order-ui-pc/src/views/youzan/othgoodsOnline/components/online-exam-form.vue

<template>
  <el-form
    v-loading="loading"
    ref="ruleForm"
    :model="ruleForm"
    status-icon
    :rules="rulesThis"
    :label-width="labelWidth || '100px'"
    class="demo-ruleForm"
    :size="size || 'medium'"
  >
    <el-row>
      <el-col :span="6"
        ><el-form-item label="审核状态" prop="state">
          <el-radio-group
            v-model="ruleForm.state"
            placeholder="请选择审核状态"
            style="width: 100%"
            :size="size || 'medium'"
            @change="stateChange"
          >
            <el-radio v-for="item in stateList" :key="item.value" :label="item.value">{{
              item.label
            }}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="18" v-if="ruleForm.state === '1'">
        <el-row>
          <el-col :span="14">
            <el-form-item label="有赞公用分类" prop="cat" label-width="120px">
              <el-input
                v-model="ruleForm.cat"
                placeholder="有赞公用分类"
                :size="'mini'"
                maxlength="20"
              />
            </el-form-item>
            <el-form-item label="是否可退货" prop="is_return" label-width="120px">
              <el-radio-group
                v-model="ruleForm.is_return"
                placeholder="请选择是否可退货"
                style="width: 100%"
                :size="'mini'"
              >
                <el-radio
                  v-for="item in is_return_list"
                  :key="item.value"
                  :label="item.value"
                  >{{ item.label }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
          </el-col>

          <el-col :span="10">
            <el-form-item label="系统售价" prop="new_sale_price" required>
              <el-input
                v-model="ruleForm.new_sale_price"
                placeholder="系统售价"
                :disabled="true"
                :size="'mini'"
                maxlength="20"
              >
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
            <el-form-item label="最终售价" prop="sale_price">
              <digital-input
                :values="ruleForm.sale_price"
                :placeholder="'售价'"
                :min="0"
                :max="100000000000"
                :position="'right'"
                :precision="2"
                :controls="false"
                :append="'元'"
                :newTime="ruleForm.newTime"
                :size="'mini'"
                :disabled="!ruleForm.edit"
                @reschange="num_change($event, 'sale_price', scope.$index)"
              /> </el-form-item
          ></el-col>
        </el-row>
      </el-col>
      <el-col :span="18" v-else>
        <el-form-item label="审核备注" prop="remark">
          <el-input
            type="textarea"
            placeholder="审核备注"
            v-model="ruleForm.remark"
            :disabled="disabled"
            maxlength="250"
            show-word-limit
            :autosize="{ minRows: 3, maxRows: 3 }"
          />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item class="fr">
          <el-button
            v-if="!isDetail"
            :size="'mini'"
            type="primary"
            @click="submitForm(ruleForm.state === '1' ? '3' : '')"
            >保 存
          </el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
export default {
  name: "exam-form",
  props: ["size", "statusList", "disabled", "isMust", "labelWidth", "time"],
  /**
   * 属性集合
   * @param {String}        size             : 组件大小             非必填
   * @param {Array}         statusList       : 驳回至备选项          必填
   * @param {Boolean}       disabled         : 是否禁用              必填
   * @param {Boolean}       isMust           : 是否需要展示驳回节点   必填
   *
   *
   */
  /**
   * 事件集合
   * @searchChange             : 选中值变化调用   抛出选中数据
   */
  data() {
    return {
      loading: false,
      stateList: [
        {
          value: "1",
          label: "通过",
        },
        {
          value: "0",
          label: "驳回",
        },
      ],
      is_return_list: [
        {
          value: "1",
          label: "支持退货",
        },
        {
          value: "0",
          label: "不支持退货",
        },
      ],
      showModelThis: this.showModel,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 60 * 60 * 24 * 1000;
        },
      },
      ruleForm: {
        numStatus: "", //点击的按钮状态
        state: "1", // 通过or驳回
        rebut: "", //驳回至
        remark: "",
      },
      rulesThis: this.rules,
      rules: {
        state: [
          {
            required: true,
            message: "请选择审核状态",
            trigger: "change",
          },
        ],

        is_return: [
          {
            required: true,
            message: "请选择是否可退",
            trigger: "change",
          },
        ],
        cat: [
          {
            required: true,
            message: "请选择有赞公用分类",
            trigger: "change",
          },
        ],
        sale_price: [
          {
            required: true,
            message: "请选择有赞公用分类",
            trigger: "blur",
          },
        ],
        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;
      }
    },
    newTime: function (val) {
      if (val) {
        this.initForm();
      }
    },
  },
  mounted() {
    this.initForm();
  },
  methods: {
    async initForm() {
      // this.loading = true;
      this.rulesThis = this.rules;
      await this.resetForm();
      this.stateChange();
      this.loading = false;
    },
    stateChange() {
      if (this.ruleForm.state === "1") {
        this.rulesThis.rebut[0].required = false;
        this.rulesThis.remark[0].required = false;
      } else {
        this.rulesThis.rebut[0].required = true;
        this.rulesThis.remark[0].required = true;
      }
    },

    async resetForm() {
      // 重置
      await this.$nextTick(() => {
        if (this.$refs.ruleForm) {
          this.$refs.ruleForm.resetFields();
          this.$refs.ruleForm.clearValidate();
          this.ruleForm = {
            state: "1", // 通过or驳回
            rebut: "", //驳回至
            remark: "",
          };
        }
      });
    },
    async submitForm(numStatus) {
      this.ruleForm.numStatus = numStatus;
      //点击驳回重新审核时，调用其他接口

      await this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          this.$emit("searchChange", this.ruleForm);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style></style>