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

<template>
  <div class="goodsOnlineAdd">
    <div
      class="goodsOnlineAdd-main"
      v-if="powers && powers.length > 0 && powers.some((item) => item == '007')"
    >
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rulesThis"
        ref="ruleForm"
        :size="'mini'"
        v-loading="loading"
        label-width="110px"
        class="demo-ruleForm"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="所属平台" prop="platform">
              <search-terrace
                :value="ruleForm.platform"
                :disabled="false"
                :size="'mini'"
                :isDetail="false"
                :placeholder="'所属平台'"
                @searchChange="platform_codesearchChange"
              />
            </el-form-item>
            <el-form-item label="上线原因" prop="online_reason">
              <el-input
                :disabled="false"
                placeholder="上线原因"
                v-model="ruleForm.online_reason"
                maxlength="200"
              />
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="上线备注" prop="online_remark">
              <el-input
                type="textarea"
                :rows="3"
                :disabled="false"
                placeholder="上线备注"
                maxlength="250"
                show-word-limit
                v-model="ruleForm.online_remark"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-table
              :data="tableData"
              stripe
              border
              :size="'mini'"
              style="width: 100%"
            >
              <el-table-column
                prop="spuCode"
                label="商品编号"
                width="180"
                show-overflow-tooltip
              />
              <el-table-column
                prop="good_thumb_img"
                label="图片"
                width="45"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <div
                    v-if="scope.row.good_thumb_img"
                    style="width: 20px; height: 20px"
                    class="hover"
                    v-viewer
                  >
                    <img
                      :src="scope.row.good_thumb_img"
                      style="display: inline-block; width: 100%; height: 100%"
                      alt=""
                    />
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="good_name"
                label="商品名称"
                min-width="160"
                show-overflow-tooltip
              />
              <el-table-column
                prop="cat_name"
                label="分类"
                min-width="110"
                show-overflow-tooltip
              />
              <el-table-column
                prop="good_name"
                label="品牌"
                min-width="brand_name"
                show-overflow-tooltip
              />
              <el-table-column
                prop="good_type"
                label="是否定制"
                min-width="70"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <el-tag
                    :size="'mini'"
                    :type="scope.row.good_type == '1' ? '' : 'warning'"
                    v-text="
                      (
                        options1.find((item) => item.id == scope.row.status) ||
                        {}
                      ).name || '--'
                    "
                  ></el-tag>
                </template>
              </el-table-column>
              <el-table-column
                prop="supplierNo"
                label="供应商编号"
                width="110"
                show-overflow-tooltip
              />
              <el-table-column
                prop="supplier_name"
                label="供应商名称"
                width="110"
                show-overflow-tooltip
              />
              <el-table-column
                prop="companyNo"
                label="业务公司编号"
                width="110"
                show-overflow-tooltip
              />
              <el-table-column
                prop="company"
                label="业务公司名称"
                width="110"
                show-overflow-tooltip
              />
              <el-table-column fixed="right">
                <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="showModel = true"
                    />
                  </el-tooltip>
                </template>
                <template slot-scope="scope">
                  <el-tooltip effect="dark" content="删除" placement="top">
                    <i
                      class="el-icon-delete tb-icon"
                      @click="openDel(scope.$index)"
                    ></i>
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table>
            <!--添加商品-->
            <search-good-modal
              :showModel="showModel"
              :once="false"
              @resultList="resultList"
              @cancel="showModel = false"
            />
          </el-col>
          <el-col :span="24" style="text-align: right; padding: 15px 0 15px 0">
            <el-button :size="'mini'" type="primary" @click="submitForm"
              >保 存
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div v-else>
      <no-auth></no-auth>
    </div>
  </div>
</template>
   <script>
import asyncRequest from "@/apis/service/goodStore/goodsOnline";
import resToken from "@/mixins/resToken";
import { mapGetters } from "vuex";
import searchGoodModal from "@/components/search-good-modal";
import { rules, options1 } from "./columns";
export default {
  name: "goodsOnlineAdd",
  mixins: [resToken],
  props: ["showModel", "id", "type", "sitem"],
  components: {
    searchGoodModal,
  },
  computed: {
    ...mapGetters(["tablebtnSize", "searchSize", "size"]),
    powers() {
      let tran =
        this.$store.getters.btnList.find(
          (item) => item.menu_route == "goodsOnlineAdd"
        ) || {};
      if (tran && tran.action && tran.action.length > 0) {
        return tran.action;
      } else {
        return [];
      }
    },
  },
  watch: {
    newTime: function (val) {
      if (val) {
        this.initForm();
      }
    },
  },
  data() {
    return {
      tableData: [],
      costshowModel: false,
      costmodelIndex: "",
      costsitem: {},
      showModel: false,
      status: "",
      rulesThis: this.rules,
      activeName: "1",
      loading: true,
      //是否定制
      options1: options1,
      ruleForm: {},
      rules: rules,
    };
  },
  mounted() {
    this.initForm();
  },
  methods: {
    async initForm() {
      this.loading = true;
      this.resetFormData();
      this.rulesThis = this.rules;
      await this.resetForm();
      this.loading = false;
    },

    openDel(index) {
      this.tableData.splice(index, 1);
    },
    resultList(e) {
      this.showModel = false;
      let list = JSON.parse(JSON.stringify(e));
      let oldList = JSON.parse(JSON.stringify(this.tableData));
      list.forEach((e, ei) => {
        let index = oldList.findIndex((a) => e.spucode === a.spucode);
        if (index === -1) {
          let item = JSON.parse(JSON.stringify(list[ei]));
          this.tableData.push(item);
        }
      });
    },
    async submitForm() {
      await this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          this.loading = true;
          let model = JSON.parse(JSON.stringify(this.ruleForm));
          let list = JSON.parse(JSON.stringify(this.tableData));
          list.forEach((e) => {
            model.codes.push(e.spuCode);
          });
          // model.platform = model.platform.toString();
          let res = await asyncRequest.add(model);
          this.loading = false;
          if (res && res.code === 0) {
            const { spuCode } = res.data;
            this.$notify.success({
              title: "新建成功",
              message: "",
            });
            this.showModelThis = false;
            // 刷新
            this.routeReGoto("goodsOnline", {});
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    resetFormData() {
      this.ruleForm = {
        platform: "", //string	平台id
        codes: [], //string	无
        online_reason: "", //string	上线原因
        online_remark: "", //string	上线备注
      };
      this.tableData = [];
    },
    async resetForm() {
      // 重置
      await this.$nextTick(async () => {
        if (this.$refs.ruleForm) {
          this.$refs.ruleForm.resetFields();
          this.$refs.ruleForm.clearValidate();
          this.resetFormData();
        }
      });
    },

    platform_codesearchChange(e) {
      const { id, code, label } = e;
      this.ruleForm.platform = id ||"";
      this.$refs.ruleForm.validateField("platform");
    },
  },
};
</script>
   <style lang="scss" scoped>
.goodsOnlineAdd {
  .goodsOnlineAdd-main {
    padding: 30px 20px 0 20px;
  }
}
</style>