nowwa-system/vue-admin-template-master/src/views/goods/index.vue

<template>
  <div class="container">
    <el-card class="box-card">
      <div class="filter-container">
        <el-button type="primary" @click="dialogVisible = true"
          >新建sku</el-button
        >
      </div>
      <el-table
        :data="tableData"
        style="width: 100%; fontsize: 12px"
        v-loading="listLoading"
        :cell-style="{ padding: '6px 0' }"
      >
        <el-table-column prop="id" label="ID" width="50px"></el-table-column>
        <el-table-column
          prop="category"
          label="category"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="description"
          label="description"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="image"
          show-overflow-tooltip
          label="image"
        ></el-table-column>
        <el-table-column
          prop="name"
          label="name"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="nameeng"
          label="nameeng"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="pricenow"
          label="pricenow"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="priceorigin"
          label="priceorigin"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="property"
          label="property"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="recommendation"
          label="recommendation"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="rule"
          show-overflow-tooltip
          label="rule"
          width="120"
        ></el-table-column>
        <!-- 
        <el-table-column prop="isbuild" label="状态">
          <template slot-scope="{row}">
            <span :style="{color:row.isbuild == 1?'#409EFF':'red'}">{{ row.isbuild | filterBuild }}</span>
          </template>
        </el-table-column>-->
      </el-table>
    </el-card>
    <!-- 弹窗 -->
    <el-dialog title="新增" :visible.sync="dialogVisible">
      <!-- 新增sku -->
      <el-form
        :model="dynamicValidateForm"
        ref="dynamicValidateForm"
        label-width="100px"
        class="demo-dynamic"
        :rules="rules"
      >
        <el-form-item prop="id" label="菜单id">
          <el-row :span="24">
            <el-col :span="10">
              <el-input
                type="number"
                v-model="dynamicValidateForm.id"
                placeholder="菜单id,尽量把同一类别的放一块"
              ></el-input>
            </el-col>
            <el-col :span="10" :offset="1"
              >菜单id,尽量把同一类别的放一块</el-col
            >
          </el-row>
        </el-form-item>

        <el-form-item prop="name" label="名称">
          <el-row :span="24">
            <el-col :span="10">
              <el-input
                v-model="dynamicValidateForm.name"
                placeholder="神奇咖啡"
              ></el-input>
            </el-col>
          </el-row>
        </el-form-item>

        <el-form-item prop="nameeng" label="英文名">
          <el-row :span="24">
            <el-col :span="10">
              <el-input
                v-model="dynamicValidateForm.nameeng"
                placeholder="legend coffee"
              ></el-input>
            </el-col>
          </el-row>
        </el-form-item>

        <el-form-item prop="pricenow" label="现价">
          <el-row :span="24">
            <el-col :span="10">
              <el-input
                type="number"
                v-model="dynamicValidateForm.pricenow"
                placeholder="现价"
              ></el-input>
            </el-col>
            <el-col :span="10" :offset="1">
              <span>现价，2.0/3.0门店有统一折扣，则此字段没什么用</span>
            </el-col>
          </el-row>
        </el-form-item>

        <el-form-item prop="priceorigin" label="原价">
          <el-row :span="24">
            <el-col :span="10">
              <el-input
                type="number"
                v-model="dynamicValidateForm.priceorigin"
                placeholder="原价"
              ></el-input>
            </el-col>
          </el-row>
        </el-form-item>

        <el-form-item prop="image" label="产品图片">
          <el-row :span="24">
            <el-col :span="10">
              <el-input
                v-model="dynamicValidateForm.image"
                placeholder="元气樱樱抹茶拿铁.jpg"
              ></el-input>
            </el-col>
            <el-col :span="10" :offset="1">
              <span>
                请先把该名字命名的大图和小图分别传到mpmedium和mpthumb目录下</span
              >
            </el-col>
          </el-row>
        </el-form-item>

        <el-form-item prop="slides" label="大图轮播">
          <el-row :span="24">
            <el-col :span="10">
              <el-tag
                :key="tag"
                v-for="tag in dynamicValidateForm.slides"
                closable
                :disable-transitions="false"
                @close="handleClose(tag)"
              >
                {{ tag }}
              </el-tag>
              <el-input
                class="input-new-tag"
                v-if="inputVisible"
                v-model="inputValue"
                ref="saveTagInput"
                size="small"
                @keyup.enter.native="handleInputConfirm"
                @blur="handleInputConfirm"
              >
              </el-input>
              <el-button
                v-else
                class="button-new-tag"
                size="small"
                @click="showInput"
                >+</el-button
              >
            </el-col>
            <el-col :span="10" :offset="1">
              <span> 元气樱樱抹茶拿铁.jpg</span>
            </el-col>
          </el-row>
        </el-form-item>

        <el-form-item prop="category" label="新品推荐">
          <el-row :span="24">
            <el-col :span="10">
              <el-input
                v-model="dynamicValidateForm.category"
                placeholder="新品推荐"
              ></el-input>
            </el-col>
            <el-col :span="10" :offset="1">
              <span> 同一类别的咖啡会归一起</span>
            </el-col>
          </el-row>
        </el-form-item>

        <el-form-item prop="recommendation" label="推荐语">
          <el-row :span="24">
            <el-col :span="10">
              <el-input
                type="textarea"
                :rows="2"
                v-model="dynamicValidateForm.recommendation"
                placeholder="有颜有料,樱你而美"
              ></el-input>
            </el-col>
            <el-col :span="10" :offset="1">
              <span> 推荐语,同一类别的咖啡共用一个推荐语</span>
            </el-col>
          </el-row>
        </el-form-item>

        <el-form-item prop="description" label="商品描述">
          <el-row :span="24">
            <el-col :span="10">
              <el-input
                type="textarea"
                :rows="2"
                v-model="dynamicValidateForm.description"
                placeholder="限量赠网红樱花饼干。优选宇治抹茶，精细石 磨研磨，搭配进口樱花粉，碰撞绝妙层次感。"
              ></el-input>
            </el-col>
          </el-row>
        </el-form-item>

        <el-form-item prop="property" label="属性">
          <el-row :span="24">
            <el-col :span="10">
              <el-input
                type="textarea"
                :rows="2"
                v-model="dynamicValidateForm.property"
                placeholder="热,冰,少冰,去冰;标准糖,半糖; 含咖啡"
              ></el-input>
            </el-col>
            <el-col :span="10" :offset="1">
              <span> 不同类的属性用分号隔开，同类属性用逗号隔开</span>
            </el-col>
          </el-row>
        </el-form-item>
        <!-- --------------------------------------------- -->
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel('dynamicValidateForm')">取 消</el-button>
        <el-button type="primary" @click="submitForm('dynamicValidateForm')"
          >确 定</el-button
        >
      </span>

      <div>
        <el-link
          href="https://help.aliyun.com/document_detail/195868.html?spm=a2c4g.11186623.6.620.74d062e7wbqjEy"
          target="_blank"
          type="success"
          >图片上传工具下载</el-link
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getGoodsList } from "@/api/order";
import { createSku } from "@/api/shop";
export default {
  data() {
    return {
      tableData: [],
      listLoading: true,
      dialogVisible: false,
      // form
      inputVisible: false,
      inputValue: "",
      dynamicValidateForm: {
        id: "",
        name: "",
        nameeng: "",
        pricenow: "",
        priceorigin: "",
        image: "",
        slides: [],
        category: "",
        recommendation: "",
        description: "",
        property: ""
      },
      rules: {
        id: [{ required: true, message: " ", trigger: "blur" }],
        name: [{ required: true, message: " ", trigger: "blur" }],
        nameeng: [{ required: true, message: " ", trigger: "blur" }],
        pricenow: [{ required: true, message: " ", trigger: "blur" }],
        priceorigin: [{ required: true, message: " ", trigger: "blur" }],
        image: [{ required: true, message: " ", trigger: "blur" }],
        slides: [{ required: true, message: " ", trigger: "change" }],
        category: [{ required: true, message: " ", trigger: "blur" }],
        recommendation: [{ required: true, message: " ", trigger: "blur" }],
        description: [{ required: true, message: " ", trigger: "blur" }],
        property: [{ required: true, message: " ", trigger: "blur" }]
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.listLoading = true;
      getGoodsList().then(res => {
        console.log(res);
        this.tableData = res;
        this.listLoading = false;
      });
    },
    // form
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let params = Object.assign({}, this.dynamicValidateForm, {
            id: this.dynamicValidateForm.id - 0,
            slides: this.dynamicValidateForm.slides.join(";"),
            pricenow: this.dynamicValidateForm.pricenow - 0,
            priceorigin: this.dynamicValidateForm.priceorigin - 0
          });
          createSku(params)
            .then(res => {
              console.log(res);
              if (res === "OK") {
                this.cancel("dynamicValidateForm");
                this.$message.success("sku创建成功！");
              }
            })
            .catch(err => {
              console.log(err);
            });
          console.log(params);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    cancel(formName) {
      this.dialogVisible = false;
      this.$refs[formName].resetFields();
    },
    // tag
    handleClose(tag) {
      this.dynamicValidateForm.slides.splice(
        this.dynamicValidateForm.slides.indexOf(tag),
        1
      );
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.dynamicValidateForm.slides.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    }
  }
};
</script>

<style lang="scss">
.container {
  padding: 20px;
}
.filter-container {
  padding: 20px;
  // text-align: right;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>