Skip to content

E
emport-web
Commit ef2dd307 by 刘泽志
Options

字典

parent d4b9da19
Showing with 272 additions and 17 deletions
src/views/emport/emport/index.vue
<template> <template>
<div class="container"> <div class="container">
<el-form inline size="small"> <el-form inline size="small">
<el-form-item label="数据年份:" label-width="80px" > <el-form-item label="数据年份:" label-width="80px">
<el-select v-model="queryForm.year" style="width: 150px"> <el-select v-model="queryForm.year" :popper-append-to-body="false">
<el-option label="2022年" value="2022" /> <el-option v-for="item in yearDict" :key="item.id" :label="item.label" :value="item.value">
<span style="float: left">{{ item.label }}</span>
<i class="el-icon-delete option_icon" style="color: #F56C6C;"
@click.stop="deleteYear(item)"></i>
<i class="el-icon-edit-outline option_icon" style="color: #8492a6;"
@click.stop="editYearDialog(item)"></i>
</el-option>
</el-select> </el-select>
<i class="el-icon-circle-plus-outline form_icon" @click="openYearDialog"></i>
</el-form-item> </el-form-item>
<el-form-item label="数据类型:" label-width="80px"> <el-form-item label="数据类型:" label-width="80px">
<el-select v-model="queryForm.orgName"> <el-select v-model="queryForm.orgName" :popper-append-to-body="false">
<el-option label="中医类医院" value="中医类医院" /> <el-option v-for="item in orgDict" :key="item.id" :label="item.label" :value="item.value">
<span style="float: left">{{ item.label }}</span>
<i class="el-icon-delete option_icon" style="color: #F56C6C;" @click.stop="deleteOrg(item)"></i>
<i class="el-icon-edit-outline option_icon" style="color: #8492a6;"
@click.stop="editOrgDialog(item)"></i>
</el-option>
</el-select> </el-select>
<i class="el-icon-circle-plus-outline form_icon" @click="openOrgDialog"></i>
</el-form-item>
<el-form-item label="请选择导入文件:" label-width="120px">
<el-upload :multiple="false" :auto-upload="false" ref="upload" action="xxx" class="upload"
:on-change="fileChange" :http-request="fileUpload">
<el-button size="small" plain>选择文件</el-button>
</el-upload>
</el-form-item>
<el-form-item>
<el-button size="small" icon="el-icon-upload" plain>导入数据</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-divider></el-divider>
<el-form inline size="small">
<el-form-item>
<el-button style="margin-left:6px;" size="small" icon="el-icon-pie-chart" plain>分析并导出</el-button>
<el-button size="small" icon="el-icon-set-up" plain>设置机构字典</el-button>
<el-button size="small" icon="el-icon-refresh" plain>清空数据</el-button>
</el-form-item>
</el-form>
<!-- 年份字典 -->
<el-dialog :title="yearDialog.title" :visible.sync="yearDialog.show" close-on-click-modal append-to-body
width="400px">
<el-form ref="yearForm" size="small" :model="yearDialog.data" label-width="50px">
<el-form-item required prop="label" label="标签">
<el-input v-model="yearDialog.data.label" />
</el-form-item>
<el-form-item required prop="value" label="值">
<el-input v-model="yearDialog.data.value" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitYear">确 定</el-button>
<el-button @click="yearDialog.show = false">取 消</el-button>
</div>
</el-dialog>
<!-- 机构类型字典 -->
<el-dialog :title="orgDialog.title" :visible.sync="orgDialog.show" close-on-click-modal append-to-body
width="400px">
<el-form ref="orgForm" size="small" :model="orgDialog.data" label-width="100px">
<el-form-item required prop="value" label="机构类型">
<el-input v-model="orgDialog.data.value" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitOrg">确 定</el-button>
<el-button @click="orgDialog.show = false">取 消</el-button>
</div>
</el-dialog>
</div> </div>
</template> </template>
<script> <script>
import * as Emport from "@/api/emport/Emport";
export default { export default {
name: 'Emport', name: "Emport",
data(){ data() {
return { return {
// 页面查询字段 // 页面查询字段
queryForm:{ queryForm: {
year: '', year: "",
orgName: '', //数据类型 orgName: "", //数据类型
file: null, file: null,
}, },
yearDict:[], // 年份字典 yearDict: [], // 年份字典
orgDict: [], // 机构类型字典 orgDict: [], // 机构类型字典
yearDialog: { // 年份dialog
} title: '',
show: false,
data: {}
},
orgDialog: { // 机构类型dialog
title: '',
show: false,
data: {}
},
};
}, },
created() { created() {
this.initYearDict(() => {
let now = new Date();
this.queryForm.year = now.getFullYear() + '';
})
this.initOrgDict((list) => {
if (list && list.length > 0) {
this.queryForm.orgName = list[0].value
}
})
}, },
methods:{ methods: {
// 初始化年份字典
initYearDict(callback) {
Emport.queryDict("year").then((res) => {
if (res.code === 200) {
this.yearDict = res.data;
if (callback) callback(res.data)
}
});
},
// 初始化机构类型字典
initOrgDict(callback) {
Emport.queryDict("org").then((res) => {
if (res.code === 200) {
this.orgDict = res.data;
if (callback) callback(res.data)
}
});
},
// 打开年份字典新增框
openYearDialog() {
this.yearDialog.title = "新增年份"
this.yearDialog.data = {
type: 'year',
label: '', value: ''
}
this.yearDialog.show = true
},
// 打开年份字典编辑框
editYearDialog(data) {
this.yearDialog.title = "编辑年份"
this.yearDialog.data = { ...data }
this.yearDialog.show = true
},
// 提交年份dialog
submitYear() {
this.$refs.yearForm.validate(valid => {
if (valid) {
if (this.yearDialog.title === '新增年份') {
Emport.addDict(this.yearDialog.data)
.then(res => {
this.yearDialog.show = false
this.initYearDict()
})
} else {
Emport.updateDict(this.yearDialog.data)
.then(res => {
this.yearDialog.show = false
this.initYearDict()
})
}
}
})
},
// 删除年份字典
deleteYear({ id, label }) {
this.$confirm(`是否删除数据项 ${label} ?`, '删除',
{
type: 'warning',
confirmButtonText: '确定',
cancelButtonText: '取消',
beforeClose: (action, instance, done) => {
if (action === 'confirm') {
Emport.deleteDict(id).then(res => {
done()
this.initYearDict()
})
} else {
done()
}
}
}
)
},
// 打开机构类型字典新增框
openOrgDialog() {
this.orgDialog.title = "新增机构类型"
this.orgDialog.data = { type: 'org', value: '' }
this.orgDialog.show = true
},
// 打开机构类型字典编辑框
editOrgDialog(data) {
this.orgDialog.title = "编辑机构类型"
this.orgDialog.data = { ...data }
this.orgDialog.show = true
},
// 提交机构类型dialog
submitOrg() {
this.$refs.orgForm.validate(valid => {
if (valid) {
if (this.orgDialog.title === '新增机构类型') {
Emport.addDict({
...this.orgDialog.data,
label: this.orgDialog.data.value
})
.then(res => {
this.orgDialog.show = false
this.initOrgDict()
})
} else {
Emport.updateDict({
...this.orgDialog.data,
label: this.orgDialog.data.value
})
.then(res => {
this.orgDialog.show = false
this.initOrgDict()
})
}
}
})
},
// 删除机构类型字典
deleteOrg({ id, label }) {
this.$confirm(`是否删除数据项 ${label} ?`, '删除',
{
type: 'warning',
confirmButtonText: '确定',
cancelButtonText: '取消',
beforeClose: (action, instance, done) => {
if (action === 'confirm') {
Emport.deleteDict(id).then(res => {
done()
this.initOrgDict()
})
} else {
done()
}
}
}
)
},
// 文件列表发生变化
fileChange() {
} },
} // 文件上传方法
fileUpload() {
},
},
};
</script> </script>
<style scoped> <style lang="scss" scoped>
.container {
.form_icon {
cursor: pointer;
color: rgb(170, 173, 179);
font-size: 18px;
margin-left: 5px;
padding-top: 5px;
}
.option_icon {
cursor: pointer;
font-size: 14px;
float: right;
margin-left: 3px;
margin-top: 10px;
}
::v-deep {
.upload {
display: flex;
align-items: center;
}
.el-upload-list__item:first-child {
margin-top: 0;
}
.el-upload-list {
border: 1px solid #dcdfe6;
min-width: 100px;
min-height: 30px;
border-radius: 2px;
}
.el-divider{
margin: -10px 0 10px 0;
}
}
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment