循序渐进vue+element前端应用开发(6）---常规element界面组件的使用

<el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
  <span>这是一段信息</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>

    showView(id) {
      var param = { id: id }
      GetProductDetail(param).then(data => {
        Object.assign(this.viewForm, data);
      })
      this.isView = true
    },

<el-table
  v-loading="listLoading"
  :data="productlist"
  border
  fit
  stripe
  highlight-current-row
  :header-cell-style="{background:'#eef1f6',color:'#606266'}"
  @selection-change="selectionChange"
  @row-dblclick="rowDbclick"
>

    rowDbclick(row, column) {
      var id = row.ID
      this.showView(id);
    },

<el-form ref="viewForm" :model="viewForm" label-width="80px">

 <el-form-item label="产品编号">
   <el-input v-model="editForm.ProductNo" />
 </el-form-item>

  <el-form-item
    prop="email"
    label="邮箱"
    :rules="[
      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    ]"
  >
    <el-input v-model="dynamicValidateForm.email"></el-input>
  </el-form-item>

<el-row>
  <el-col :span="12">
    <el-form-item label="产品编号">
      <el-input v-model="editForm.ProductNo" />
    </el-form-item>
  </el-col>
  <el-col :span="12">
    <el-form-item label="条码">
      <el-input v-model="editForm.BarCode" />
    </el-form-item>
  </el-col>
</el-row>

<el-form-item label="商品类型">
  <el-select v-model="editForm.ProductType" filterable="" placeholder="请选择">
    <el-option
      v-for="(item, key) in typeList"
      :key="key"
      :label="item.value"
      :value="item.key"
    />
  </el-select>
</el-form-item>

  created() {
    // 获取产品类型，用于绑定字典等用途
    GetProductType().then(data => {
      if (data) {
        data.forEach(item => {
          this.productTypes.set(item.id, item.name)
          this.typeList.push({ key: item.id, value: item.name })
        })

        // 获取列表信息
        this.getlist()
      }
    });
  },

  <el-tab-pane label="说明" name="second">
    <el-form-item label="说明">
      <el-input v-model="editForm.Description" type="textarea" :rows="10" />
    </el-form-item>
  </el-tab-pane>

  <el-tab-pane label="详细说明">
    <el-form-item label="详细说明">
      <div class="border-radius" v-html="viewForm.Note" />
    </el-form-item>
  </el-tab-pane>

  <el-tab-pane label="图片信息">
    <el-form-item label="封面图片">
      <el-image
        style="width: 100px; height: 100px"
        :src="viewForm.Picture"
        :preview-src-list="[viewForm.Picture]"
      />
    </el-form-item>
    <el-form-item label="Banner图片">
      <el-image
        style="width: 100px; height: 100px"
        :src="viewForm.Banner"
        :preview-src-list="[viewForm.Banner]"
      />
    </el-form-item>
    <el-form-item label="商品展示图片">
      <el-image
        v-for="item in viewForm.pics"
        :key="item.key"
        class="border-radius"
        :src="item.pic"
        style="width: 100px; height: 100px;padding:10px"
        :preview-src-list="getPreviewPics()"
      />
    </el-form-item>
  </el-tab-pane>

    getPreviewPics() {
      // 转换ViewForm.pics里面的pic集合
      var list = []
      if (this.viewForm.pics) {
        this.viewForm.pics.forEach(item => {
          if (item.pic) {
            list.push(item.pic)
          }
        })
      }
      return list
    }

npm install @chenfengyuan/vue-barcode vue

npm install @chenfengyuan/vue-qrcode vue

// 引入barcode,qrcode
import VueBarcode from '@chenfengyuan/vue-barcode';
import VueQrcode from '@chenfengyuan/vue-qrcode';
Vue.component(VueBarcode.name, VueBarcode);

  <el-tab-pane label="详细说明" name="third">
    <el-form-item label="详细说明">
      <tinymce v-model="editForm.Note" :height="300" />
    </el-form-item>
  </el-tab-pane>

<template>
  <el-select v-model="svalue" filterable clearable placeholder="请选择">
    <el-option
      v-for="(item, index) in dictItems"
      :key="index"
      :label="item.Text"
      :value="item.Value"
    />
  </el-select>
</template>

<script>
// 引入API模块类方法
import { GetDictData } from '@/api/dictdata'

export default {
  name: 'MyDictdata', // 组件的名称
  props: {
    typeName: { // 字典类型方式，从后端字典接口获取数据
      type: String,
      default: ''
    },
    options: {// 固定列表方式，直接绑定
      type: Array,
      default: () => { return [] }
    }
  },
  data() {
    return {
      dictItems: [], // 设置的字典列表
      svalue: '' // 选中的值
    }
  },
  watch: {
    // 判断下拉框的值是否有改变
    svalue(val, oldVal) {
      if (val !== oldVal) {
        this.$emit('input', this.svalue);
      }
    }
  },
  mounted() {
    var that = this;

    if (this.typeName && this.typeName !== '') {
      // 使用字典类型，从服务器请求数据
      GetDictData(this.typeName).then(data => {
        if (data) {
          data.forEach(item => {
            if (item && typeof (item.Value) !== 'undefined' && item.Value !== '') {
              that.dictItems.push(item)
            }
          });
        }
      })
    } else if (this.options && this.options.length > 0) {
      // 使用固定字典列表
      this.options.forEach(item => {
        if (item && typeof (item.Value) !== 'undefined' && item.Value !== '') {
          that.dictItems.push(item)
        }
      });
    }
    // 设置默认值
    this.svalue = this.value;
  },
  methods: {

  }
}
</script>

import myDictdata from '@/components/Common/my-dictdata'

export default {
  components: { myDictdata },

<el-select v-model="searchForm.ProductType" filterable clearable placeholder="请选择">
  <el-option
    v-for="(item, key) in typeList"
    :key="key"
    :label="item.value"
    :value="item.key"
  />
</el-select>

<my-dictdata v-model="searchForm.ProductType" type-name="商品类型" />

<my-dictdata v-model="searchForm.Status" :options="Status" />

  Status: [
    { Text: '正常', Value: 0 },
    { Text: '推荐', Value: 1 },
    { Text: '停用', Value: 2 }
  ]