循序渐进VUE+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 }
]