@{
ViewBag.Title = "产品添加";
Layout = "~/Views/Shared/_Iview_Form.cshtml";
}
<style>
#row1 {
padding: 0 30px;
}
#row1 > div {
width: 15.5% !important;
float: left !important;
}
#row1 > div .ivu-form-item-label {
padding: 0;
margin: 0;
float: none;
position: initial;
padding-right: 10px;
}
#row1 > div .ivu-input-default {
padding: 0;
margin: 0;
float: none;
position: initial;
}
#row1 > div .ivu-form-item-content {
margin: 0 !important;
width: 69% !important;
display: inline-block !important;
}
#row1 > div:nth-child(2) {
width: 19% !important;
}
#row1 > div:nth-child(2) .ivu-form-item-content {
width: 40% !important;
}
#row1 > div .ivu-btn {
float: right !important;
}
</style>
<div id="app">
<i-form ref="ProductInfo" :model="ProductInfo" :rules="ruleValidate" :label-width="100" style=" margin-top: 40px; margin-right: 0px; text-align:left">
<row>
<i-col span="11">
<form-item label="产品名称" prop="F_Product_Name">
<i-input v-model="ProductInfo.F_Product_Name" placeholder="输入产品名称"></i-input>
</form-item>
</i-col>
<i-col span="11">
<form-item label="产品规格" prop="F_Product_Guige">
<i-input v-model="ProductInfo.F_Product_Guige" placeholder="输入产品规格"></i-input>
</form-item>
</i-col>
</row>
<row>
<i-col span="11">
<form-item label="市场价" prop="F_Marketprice">
<i-input v-model="ProductInfo.F_Marketprice" placeholder="输入产品市场价"></i-input>
</form-item>
</i-col>
<i-col span="11">
<form-item label="零售价" prop="F_Shopprice">
<i-input v-model="ProductInfo.F_Shopprice" placeholder="输入产品零售价"></i-input>
</form-item>
</i-col>
</row>
<row>
<i-col span="11">
<form-item label="会员价" prop="F_VIPprice">
<i-input v-model="ProductInfo.F_VIPprice" placeholder="输入产品会员价"></i-input>
</form-item>
</i-col>
<i-col span="11">
<form-item label="分类">
<i-input v-model="ProductInfo.F_Brand" placeholder="输入产品分类"></i-input>
</form-item>
</i-col>
</row>
<row>
<i-col span="11">
<form-item label="产品描述">
@*<i-input v-model="ProductInfo.F_Description" id="editor_id" type="textarea" :rows="4" placeholder="输入产品描述"></i-input>*@
<textarea id="editor_id" name="ProductInfo.F_Description" style="width:700px;height:300px;">
{{ProductInfo.F_Description}}
</textarea>
</form-item>
</i-col>
</row>
</i-form>
</div>
@* 引用JS的代码要放在初始化初始化编辑器的上面 *@
<script charset="utf-8" src="~/Content/js/kindeditor/kindeditor-all-min.js"></script>
<script charset="utf-8" src="~/Content/js/kindeditor/lang/zh-CN.js"></script>
<script>
vm = new Vue({
el: '#app',
data: {
lock: false,
ProductInfo: {
F_Product_Name: '',
F_Product_Guige: '',
F_Marketprice: '',
F_Shopprice: '',
F_VIPprice: '',
F_Description: '',
F_Visitnum: 0,
F_Brand: ''
},
editor:null,
ruleValidate: {
F_Product_Name: [
{ required: true, message: '产品名称不能为空', trigger: 'blur' }
],
F_Product_Guige: [
{ required: true, message: '产品规格不能为空', trigger: 'blur' }
],
F_Marketprice: [
{ required: true, message: '产品市场价不能为空', trigger: 'blur' }
],
F_Shopprice: [
{ required: true, message: '产品零售价不能为空', trigger: 'blur' }
],
F_VIPprice: [
{ required: true, message: '产品会员价不能为空', trigger: 'blur' }
]
}
},
mounted() {
this.$Spin.show();
var self = this;
//调用放在Vue中的初始化KindEditor方法
this.initEditor();
var keyValue = $.request("keyValue");
//如果keyValue不为空，则load默认数据到页面
if (!!keyValue) {
$.ajax({
type: "POST",
url: "/SystemOrder/Products/GetForm",
data: { keyValue: keyValue },
dataType: "json",
success: function (data) {
debugger;
if (data != null) {
vm.ProductInfo = data;
//下面的代码不加，修改页面获取到的数据将不能在kindeditor中显示出来
self.editor.html(vm.ProductInfo.F_Description);
}
setTimeout(function () { vm.$Spin.hide(); }, 1000);
}
});
} else {
setTimeout(function () { vm.$Spin.hide(); }, 1000);
}
},
methods: {
//初始化编辑器
initEditor() {
var self = this;
KindEditor.ready(function (K) {
self.editor = K.create('#editor_id', {
cssPath: '/Content/css/index.css',
filterMode: true,
allowFileManager: true,
uploadJson: '/Content/js/kindeditor/asp.net/upload_json.ashx',
fileManagerJson: '/Content/js/kindeditor/asp.net/file_manager_json.ashx'
});
})
},
//提交
handleSubmit(name) {
if (vm.lock) {
vm.$Notice.warning({
title: '错误',
desc: '请不要重复提交',
duration: 0
});
} else {
this.$refs[name].validate((valid) => {
debugger;
if (valid) {
if ($('[name=__RequestVerificationToken]').length > 0) {
vm.ProductInfo.__RequestVerificationToken = $('[name=__RequestVerificationToken]').val();
vm.ProductInfo.F_Description = vm.editor.html();
}
vm.lock = true;
$.ajax({
type: "POST",
url: "/SystemOrder/Products/SubmitForm",
data: vm.ProductInfo,
dataType: "json",
async: false,
success: function (data) {
if (data.state == 'success') {
vm.$Notice.success({
title: '成功',
desc: data.message,
duration: 0
});
} else if (data.state == 'error') {
vm.$Notice.error({
title: '错误',
desc: data.message,
duration: 0
});
}
window.setTimeout(function () {
$.modalClose();
}, 1500);
}
});
} else {
vm.$Notice.warning({
title: '错误',
desc: '请填写完整',
duration: 0
});
}
})
}
},
handleEdit(row) {
vm.$set(row, '$isEdit', true)
},
handleSave(row) {
vm.$set(row, '$isEdit', false)
}
},
})
function submitForm() {
vm.handleSubmit('ProductInfo');
return false;
}
</script>
