order-ui-pc/src/views/goodStore/active/add.vue

<template>
  <div class="activeAdd pagePadding">
    <div
      v-if="powers && powers.length > 0 && powers.some((item) => item == '007')"
    >
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rulesThis"
        ref="ruleForm"
        :size="'mini'"
        label-width="110px"
        class="demo-ruleForm"
      >
        <el-row>
          <el-col :span="16">
            <el-form-item label="活动标题" prop="activity_name">
              <el-input
                placeholder="活动标题"
                v-model="ruleForm.activity_name"
                maxlength="100"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="业务企业" prop="platform_code1">
              <search-work-company
                :value="ruleForm.platform_code1"
                :disabled="false"
                :size="'mini'"
                :isDetail="false"
                :placeholder="'业务企业'"
                @searchChange="platform_codesearchChange"
              />
            </el-form-item>
          </el-col>

          <el-col :span="16">
            <el-form-item label="活动时间" required style="margin: 0">
              <el-row>
                <el-col :span="11">
                  <el-form-item prop="datactivity_name">
                    <el-date-picker
                      type="datetime"
                      placeholder="开始时间"
                      v-model="ruleForm.activity_start"
                      style="width: 100%"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col class="tc" :span="2">-</el-col>
                <el-col :span="11">
                  <el-form-item prop="activity_end">
                    <el-date-picker
                      type="datetime"
                      placeholder="结束时间"
                      v-model="ruleForm.activity_end"
                      style="width: 100%"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属平台" prop="platform_code">
              <search-terrace
                :value="ruleForm.platform_code"
                :disabled="false"
                :size="'mini'"
                :isDetail="false"
                :placeholder="'所属平台'"
                @searchChange="platform_codesearchChange"
              />
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="活动描述" prop="activity_desc">
              <el-input
                placeholder="活动描述"
                type="textarea"
                :rows="2"
                show-word-limit
                v-model="ruleForm.activity_desc"
                maxlength="500"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="库存类型" prop="is_stock">
              <el-input
                placeholder="商品库存类型"
                v-model="ruleForm.is_stock"
                maxlength="100"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              label="活动商品"
              :label-position="'top'"
              prop="good_list"
            >
              <el-table
                :data="ruleForm.spuCode"
                stripe
                border
                :size="'mini'"
                style="width: 100%"
              >
                <el-table-column prop="date" label="日期" width="180">
                </el-table-column>
                <el-table-column prop="name" label="姓名" width="180">
                </el-table-column>
                <el-table-column prop="address" label="地址"> </el-table-column>
                <el-table-column fixed="right" width="100">
                  <template slot="header" slot-scope="scope">
                    <span>操作</span>
                    <el-tooltip
                      class="item"
                      effect="dark"
                      content="添加活动商品"
                      placement="top"
                    >
                      <i
                        class="el-icon-circle-plus-outline fr"
                        style="font-size: 18px; margin-top: 2px"
                        @click="openEdit('add', '0')"
                      />
                    </el-tooltip>
                  </template>
                  <template slot-scope="scope">
                    <el-button
                      @click="handleClick(scope.row)"
                      type="text"
                      size="small"
                      >查看</el-button
                    >
                    <el-button type="text" size="small">编辑</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <search-good-online-modal :once="once" :show-model="showModel" />
    </div>
    <div v-else>
      <no-auth></no-auth>
    </div>
  </div>
</template>
   <script>
import asyncRequest from "@/apis/service/goodStore/active";
import resToken from "@/mixins/resToken";
import { mapGetters } from "vuex";
import searchGoodOnlineModal from "@/components/search-good-online-modal";
export default {
  name: "activeAdd",
  mixins: [resToken],
  components: {
    searchGoodOnlineModal,
  },
  computed: {
    ...mapGetters(["tablebtnSize", "searchSize", "size"]),
    powers() {
      let tran =
        this.$store.getters.btnList.find(
          (item) => item.menu_route == "activeAdd"
        ) || {};
      if (tran && tran.action && tran.action.length > 0) {
        return tran.action;
      } else {
        return [];
      }
    },
  },
  data() {
    return {
      size: "small",
      activeName: "3",
      loading: false,
      showModel: false,
      once: false,
      rulesThis: this.rules,
      ruleForm: {},
      rules: {
        activity_name: [
          {
            required: true,
            message: "活动标题不能为空",
            trigger: "blur",
          },
        ],
        platform_code1: [
          {
            type: "array",
            required: true,
            message: "业务公司不能为空",
            trigger: "change",
          },
        ],
        platform_code: [
          {
            type: "array",
            required: true,
            message: "所属平台不能为空",
            trigger: "change",
          },
        ],
        activity_start: [
          {
            required: true,
            message: "开始时间不能为空",
            trigger: "change",
          },
        ],
        activity_end: [
          {
            required: true,
            message: "结束时间不能为空",
            trigger: "change",
          },
        ],

        activity_desc: [
          {
            required: true,
            message: "活动描述不能为空",
            trigger: "blur",
          },
        ],
        is_stock: [
          {
            required: true,
            message: "请选择是否库存品",
            trigger: "change",
          },
        ],

        good_list: [
          {
            type: "array",
            required: true,
            message: "请选择活动商品",
            trigger: "change,blur",
          },
        ],
      },
    };
  },
  mounted() {
    this.initForm();
  },
  methods: {
    async initForm() {
      this.loading = true;
      this.resetFormData();
      this.rulesThis = this.rules;
      await this.resetForm();
      this.loading = false;
    },
    async resetForm() {
      // 重置
      await this.$nextTick(async () => {
        if (this.$refs.ruleForm) {
          this.$refs.ruleForm.resetFields();
          this.$refs.ruleForm.clearValidate();
          this.resetFormData();
        }
      });
    },
    resetFormData() {
      this.ruleForm = {
        activity_name: "",
        platform_code1: [],
        platform_code: [],
        activity_start: "",
        activity_end: "",
        activity_desc: "",
        is_stock: "",
        good_list: [],
      };
    },
    handleClick(row) {
      console.log(row);
    },
    openEdit(type, id) {
      this.showModel = true;
      console.log(type);
      console.log(id);
    },
    async initData() {
      this.loading = true;
      let res = await asyncRequest.detail({ id: this.id });
      this.loading = false;
      if (res.code === 0) {
        await this.resetForm(res.data);
      }
    },
  },
};
</script>
   <style lang="scss" scoped>
.activeAdd {
  .activeAdd-title {
    border-top: 1px solid #ebeef5;
    span {
      height: 50px;
      line-height: 50px;
      font-family: "微软雅黑", sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: 16fpx;
      text-align: left;
    }
  }
  /deep/ .ddiv {
    border-top: 1px solid #dcdfe6;
  }
  /deep/ .dtitle {
    width: 40px;
    text-align: center;
    height: 100%;
    min-height: 100%;
    ul {
      padding: 20px 0 0 0;
    }
  }
  /deep/ .dmain {
    padding: 20px 0 0 0;
    width: calc(100% - 40px);
    border-left: 1px solid #dcdfe6;
  }
}
</style>