使用vue版本：[email protected]
使用element-plus版本：[email protected]
使用axios版本：[email protected]
引用了如下脚本：
<script src="~/lib/vue/vue.global.min.js"></script>
<link href="~/lib/element-plus2/index.min.css" rel="stylesheet" />
<link href="~/lib/element-plus2/theme-chalk/index.min.css" rel="stylesheet" />
<script src="~/lib/element-plus2/index.full.js"></script>
<script src="~/lib/element-plus2/locale/en.js"></script>
<script src="~/lib/element-plus2/locale/zh-cn.js"></script>
<script src="~/lib/element-plus2/icons-vue/dist/global.iife.min.js"></script>
<script src="~/lib/axios/axios.min.js"></script>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
效果如图：
代码如下：
<div id="app" v-cloak>
<el-row type="flex" :gutter="10">
<el-col :span="4">
<el-input placeholder="DictionaryName" v-model="dataDictionaryName" size="mini" clearable></el-input>
</el-col>
<el-col :span="6">
<el-select v-model="DataDictionaryTypeId" placeholder="please select">
<el-option key="0" label="All" value="0">
</el-option>
<el-option v-for="item in dataDictionaryTypeList"
:key="item.dataDictionaryTypeId"
:label="item.dictionaryTypeName"
:value="item.dataDictionaryTypeId">
</el-option>
</el-select>
</el-col>
<el-col :span="2" style="text-align:right">
<el-button type="primary" plain v-on:click="getDataDictionary(1)" size="mini" class="has-gutter">Search</el-button>
</el-col>
</el-row>
<div style="width: 100%; margin-top: 10px;">
<el-button type="primary" icon="Plus" plain circle v-on:click="addDataDictionary" class="has-gutter"></el-button>
<el-button type="primary" icon="Delete" plain circle v-if="dataDictionaryData && dataDictionaryData?.length > 0" v-on:click="deleteDataDictionary" class="has-gutter"></el-button>
</div>
<el-row type="flex" :gutter="10">
<el-table :data="dataDictionaryData" border size="mini" style="width: 100%; margin-top: 10px;" :header-cell-style="getRowClass" v-on:row-click="queryDataDictionaryById" @@selection-change="handleSelectionChange">
<el-table-column type="selection" prop="dataDictionaryId" width="55"></el-table-column>
<el-table-column label="DictionaryName" prop="dictionaryName" width="200"></el-table-column>
<el-table-column label="Dictionary Desc " prop="dictionaryDesc" align="center" width="200"></el-table-column>
<el-table-column label="DataDictionary Type" prop="dataDictionaryType" align="center" width="200"></el-table-column>
<el-table-column label="SequenceNo" prop="sequenceNo" align="center"></el-table-column>
</el-table>
<el-pagination v-show="isPage"
:hide-on-single-page="true"
v-on:current-change="handleCurrentChange"
:current-page="Page.currentPage"
:page-size="Page.pageSize"
:page-sizes="[10,15,20,30,50]"
layout="total,sizes,prev, pager, next,jumper"
:total="Page.totalCount"
style="float:right;margin:10px 20px 0 0;">
</el-pagination>
</el-row>
<el-drawer title="Data Dictionary Info"
v-model="DataDictionary_drawer"
:direction="rtl"
size="46%"
:before-close="DataDictionaryHandleClose" destroy-on-close>
<el-card class="box-card">
<el-form :model="DataDictionaryInfo" ref="DataDictionaryInfo" label-width="180px">
<el-row :gutter="20">
<el-form-item label="DictionaryName">
<el-input v-model="DataDictionaryInfo.dictionaryName" placeholder="Please input" type="text" />
</el-form-item>
<el-form-item label="Dictionary Desc">
<el-input v-model="DataDictionaryInfo.dictionaryDesc" placeholder="Please input" type="text" />
</el-form-item>
<el-form-item label="Dictionary Type">
<el-select v-model="DataDictionaryInfo.dataDictionaryTypeId" placeholder="please select">
<el-option v-for="item in dataDictionaryTypeList"
:key="item.dataDictionaryTypeId"
:label="item.dictionaryTypeName"
:value="item.dataDictionaryTypeId">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="SequenceNo">
<el-input-number v-model="DataDictionaryInfo.sequenceNo" :min="1" :max="9999" />
</el-form-item>
</el-row>
<el-button type="primary" @@click="DataDictionarySave">Save</el-button>
<el-button type="primary" @@click="resetDataDictionaryForm">Reset</el-button>
<el-row :gutter="20">
</el-row>
</el-form>
</el-card>
</el-drawer>
</div>
<script>
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
const loadOptions = {
lock: true,
text: 'Loading...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0)',
fullscreen: true,
}
const Main = {
data() {
return {
dataDictionaryTypeList:@(Json.Serialize(ViewBag.DataDictionaryTypeList)),
dataDictionaryData: [],
isPage: true,
DataDictionary_drawer: false,
isDisabled: false,
Page: {
currentPage: 1,
pageSize: 10,
totalCount: 0
},
DataDictionaryInfo: {
dataDictionaryId:"",
dataDictionaryTypeId: "",
dictionaryName: "",
dictionaryDesc: "",
sequenceNo: "",
},
dataDictionaryName: '',
DataDictionaryTypeId:'',
params: {
PageIndex: 1,
PageSize: 0,
DictionaryName: this.dataDictionaryName,
DataDictionaryType: this.DataDictionaryTypeId,
},
multipleSelectionData: [],
}
},
created() {
this.handleCurrentChange(1);
},
methods: {
//多选内容更新
handleSelectionChange(val) {
this.multipleSelectionData.value = val;
},
//清空内容
resetDataDictionaryForm() {
this.DataDictionaryInfo = {};
this.$refs['DataDictionaryInfo'].resetFields();
},
//保存
DataDictionarySave() {
this.$refs['DataDictionaryInfo'].validate((valid) => {
const loading = this.$loading(loadOptions);
if (valid) {
axios({
method: 'post',
url: '/DataDictionary/DataDictionaryEdit',
responseType: 'application/json',
params: this.DataDictionaryInfo
}).then(response => {
if (response.data) {
this.showMessage(response.data.code, response.data.message,false);
if (response.data.code == 200) {
this.handleCurrentChange(1);
this.DataDictionary_drawer = false;
this.DataDictionaryHandleClose();
}
}
})
.catch(function (error) {
loading.close()
})
.finally(() => {
loading.close()
});
}
});
},
//打开窗口新增
addDataDictionary() {
this.DataDictionary_drawer = true;
this.isDisabled = true;
},
//删除数据
deleteDataDictionary() {
if (!this.multipleSelectionData || !this.multipleSelectionData.value || this.multipleSelectionData.value.length == 0) {
this.$message.warning("please select data!");
return false;
}
this.$confirm('Are you sure you want to delete the data??', 'tips', {
confirmButtonText: 'Yes',
cancelButtonText: 'Cancel',
type: 'warning'
}).then(() => {
axios({
method: 'post',
url: '/DataDictionary/DeleteDataDictionaryById',
responseType: 'json',
data: this.multipleSelectionData.value
}).then(response => {
if (response.data) {
this.handleCurrentChange(1);
}
}).catch(error => {
});
}).catch(() => {
});
},
//查询内容
queryDataDictionaryById(row) {
if (row.dataDictionaryId) {
axios({
method: 'post',
url: '/DataDictionary/QueryDataDictionaryById',
responseType: 'json',
params: {
DictionaryId: row.dataDictionaryId
}
}).then(response => {
if (response.data) {
this.DataDictionaryInfo = response.data;
this.DataDictionary_drawer = true;
this.isDisabled = true;
}
}).catch(error => {
loading.close()
});
}
},
//关闭窗口
DataDictionaryHandleClose(done) {
this.resetDataDictionaryForm();
this.isDisabled = false;
done();
},
//获取列头样式
getRowClass({ row, column, rowIndex, columnIndex }) {
let style = {};
if (rowIndex === 0) {
style = {
backgroundColor: '#7E8796',
color: '#fff',
fontWeight: 'bold'
};
}
else
style = {};
return style;
},
//分页
handleCurrentChange(pageNo) {
this.getDataDictionary(pageNo)
},
getDataDictionary(pageNo) {
const loading = this.$loading(loadOptions);
this.isPage = true;
this.Page.currentPage = pageNo;
axios({
method: 'post',
url: '/DataDictionary/QueryDataDictionary',
responseType: 'json',
params: {
PageIndex: pageNo,
PageSize: this.Page.pageSize,
DictionaryName: this.dataDictionaryName,
DataDictionaryType: this.DataDictionaryTypeId,
}
}).then(response => {
if (response.data) {
this.Page.totalCount= response.data.totalRows;
this.dataDictionaryData = response.data.data;
}
})
.catch(error => {
loading.close()
});
loading.close()
},
//显示操作提示信息
showMessage(msgCode, msgContent, showColse = true) {
var msgType = '';
switch (msgCode) {
case 200:
msgType = 'success';
if (msgContent == undefined || msgContent == "")
msgContent = 'Operation Successfully.';
break;
case 404:
if (msgContent == undefined || msgContent == "")
msgContent= 'Operation Failed.';
msgType = 'error';
break;
default:
if (msgContent == undefined || msgContent == "")
msgContent = 'Form data submission error '
msgType = 'error';
}
this.$message({
showClose: showColse,
message: msgContent,
type: msgType
});
},
}
};
const app = Vue.createApp(Main);
app.use(ElementPlus)
var Icons = Object.entries(ElementPlusIconsVue).filter((item) => { return ["Plus", "Delete"].includes(item[0]) })
for (const [key, component] of Icons) {
app.component(key, component)
}
app.mount("#app");
</script>
<style>
.col2 {
width: 100%;
flex: 1;
padding: 10px;
border: solid 1px #eee;
border-radius: 5px;
float: left;
margin-top: 10px;
}
</style>
标签：vue,msgContent,true,element,loading,UI,DataDictionary,data,response From： https://www.cnblogs.com/bingshao/p/16613758.html