<template>
|
<div>
|
<el-form ref="form" size="mini" :model="form" label-width="120px" :rules="formRules">
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="属性编号：">{{form.propId}}</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="属性名称：">{{form.propName}}</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="属性值类型：">{{getLabel(propValueTypeArray,form.propValueType)}}</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-form-item>
|
<el-tag type="warning">{{form.propValueCheckExplain}}</el-tag>
|
</el-form-item>
|
</el-row>
|
<div v-show="showTable && propForm.propShow !== '0'">
|
<el-form-item>
|
<el-button size="mini" type="success" @click="addItem">添加属性值</el-button>
|
</el-form-item>
|
<el-form-item>
|
<el-table size="mini" :data="tableData" border v-loading="tableLoading">
|
<el-table-column label="属性值" prop="propValue"></el-table-column>
|
<el-table-column label="操作">
|
<template slot-scope="scope">
|
<el-button type="primary" size="mini" @click="editItem(scope.row,scope.$index)">编辑</el-button>
|
<el-button type="danger" size="mini" @click="removeItem(scope.row,scope.$index)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-form-item>
|
<div class="pageStyle">
|
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.pageNum"
|
:page-sizes="[10, 20, 30, 50]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
|
</div>
|
</div>
|
<div v-show="!showTable && propForm.propShow !== '0'">
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="属性值：" prop="propValue">
|
<el-input placeholder="请输入属性值" v-model="form.propValue" clearable></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="序号：" prop="indexNum">
|
<el-input-number v-model="form.indexNum" :min="1" @keydown.native="limiInputType" ></el-input-number>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="属性值标识：" prop="propValueTags">
|
<el-input placeholder="请输入属性值标识" v-model="form.propValueTags" clearable></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</div>
|
</el-form>
|
<div slot="footer" class="footer">
|
<el-button size="mini" @click="submit" v-show="!showTable" type="primary" :loading="loading">保存</el-button>
|
<el-button size="mini" @click="cancel">取消</el-button>
|
</div>
|
</div>
|
</template>
|
<script>
|
import { objectCopy } from '@/utils/objectCopyHelper'
|
import productPropMetaValueApi from '@/api/productmanagement/productPropMetaValue'
|
import { getStrLength } from '@/utils/getStrLength'
|
import { limiInputType } from '@/utils/limiInputType'
|
|
export default {
|
props: ['propForm'],
|
data () {
|
return {
|
form: {
|
propId: null,
|
propName: null,
|
propValue: null,
|
indexNum: 1,
|
propValueTags: null,
|
propValueType: null,
|
propValueColor: null,
|
propValueCheckExplain: null
|
},
|
loading: false,
|
showTable: true,
|
tableLoading: false,
|
listQuery: {
|
pageNum: 1,
|
pageSize: 10
|
},
|
tableData: [],
|
total: 0,
|
propValueTypeArray: [
|
{
|
name: '字符类型',
|
id: 0
|
},
|
{
|
name: '数字类型',
|
id: 1
|
},
|
{
|
name: '时间类型',
|
id: 2
|
},
|
{
|
name: '日期类型',
|
id: 3
|
},
|
{
|
name: '日期时间型',
|
id: 4
|
}
|
],
|
formRules: {
|
propValue: [
|
{ required: true, message: '请输入属性值', trigger: 'change' }, {
|
validator: (rule, value, callback) => {
|
callback(getStrLength(rule, value, callback, 128, '属性值'))
|
}
|
}],
|
indexNum: [{ required: true, message: '请输入序号', trigger: 'change' }],
|
propValueTags: [{
|
validator: (rule, value, callback) => {
|
callback(getStrLength(rule, value, callback, 32, '属性值标识'))
|
}
|
}]
|
}
|
}
|
},
|
created () {
|
this.form.propName = this.propForm.propName
|
this.form.propValueCheckExplain = this.propForm.propValueCheckExplain
|
this.form.propValueType = this.propForm.propValueType
|
this.listQuery.propId = this.form.propId = this.propForm.propId
|
this.queryList()
|
},
|
methods: {
|
/**
|
* 限制不能输入数字
|
*/
|
limiInputType (e) {
|
limiInputType(e)
|
},
|
/**
|
* 获取数组的label
|
*/
|
getLabel (array, id) {
|
var lableText = array.find((item) => {
|
return item.id === id
|
})
|
if (lableText) {
|
return lableText.name
|
}
|
return ''
|
},
|
/**
|
* 初始化表单
|
*/
|
initForm () {
|
for (const i in this.form) {
|
if (i !== 'propId' && i !== 'propName' && i !== 'propValueCheckExplain' && i !== 'propValueType') {
|
this.form[i] = null
|
}
|
}
|
this.form.indexNum = 1
|
},
|
queryList () {
|
this.tableLoading = true
|
productPropMetaValueApi.getList(this.listQuery, false).then(res => {
|
if (res.data) {
|
this.tableLoading = false
|
this.tableData = res.data.list
|
this.total = res.data.total
|
}
|
}).catch(() => {
|
this.tableLoading = false
|
})
|
},
|
addItem () {
|
this.showTable = false
|
this.initForm()
|
},
|
/**
|
* 编辑
|
*/
|
editItem (row, index) {
|
this.initForm()
|
objectCopy(row, this.form)
|
this.form.propValueId = row.propValueId
|
this.showTable = false
|
},
|
removeItem (row, index) {
|
this.$confirm('确认删除这条数据吗？', '删除', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
productPropMetaValueApi.deleteItem({ propValueId: row.propValueId }).then(res => {
|
if (res.data) {
|
this.$message({
|
message: '操作成功',
|
type: 'success'
|
})
|
this.queryList()
|
}
|
})
|
}).catch(() => { })
|
},
|
/**
|
* 提交
|
*/
|
submit () {
|
this.$refs.form.validate().then(res => {
|
this.loading = true
|
let resDate = null
|
this.form.state = '1'
|
if (this.form.propValueId) {
|
resDate = productPropMetaValueApi.updateInfo(this.form)
|
} else {
|
resDate = productPropMetaValueApi.addInfo(this.form)
|
}
|
resDate.then(res => {
|
if (res.code !== '0') {
|
this.$message({
|
message: res.msg,
|
type: 'warning'
|
})
|
this.loading = false
|
return
|
}
|
this.loading = false
|
this.queryList()
|
this.showTable = true
|
}).catch(() => {
|
this.loading = false
|
})
|
})
|
},
|
cancel () {
|
if (!this.showTable) {
|
this.showTable = true
|
} else {
|
this.$emit('update:dialogVisible', false)
|
}
|
},
|
handleSizeChange (val) {
|
this.listQuery.pageSize = val
|
this.queryList()
|
},
|
handleCurrentChange (val) {
|
this.listQuery.pageNum = val
|
this.queryList()
|
}
|
}
|
}
|
</script>
|
<style lang="scss">
|
.footer{
|
text-align: right;
|
margin-top: 15px;
|
}
|
</style>
|
