Skip to content

P
pica.cloud.web-education-admin
提交 ebaf9ec8 编写于 作者: zhentian.jia's avatar zhentian.jia
浏览文件
操作

完成 新建项目的：选择范围和选择组件的step

上级 9f3e420d
显示空白字符变更
内嵌 并排
正在显示 包含 214 行增加 和 15 行删除
src/views/education/add-manager.vue
浏览文件 @ ebaf9ec8
...@@ -107,7 +107,7 @@ ...@@ -107,7 +107,7 @@
<el-tabs v-model="activeName" @tab-click="handleClick"> <el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="设定行政范围" name="first"> <el-tab-pane label="设定行政范围" name="first">
<el-row :gutter="20"> <el-row :gutter="20">
<el-col class="tree" :span="12"> <el-col class="rim" :span="12">
<el-tree :props="treeProp" :load="loadNode" lazy show-checkbox></el-tree> <el-tree :props="treeProp" :load="loadNode" lazy show-checkbox></el-tree>
</el-col> </el-col>
<el-col :span="11"> <el-col :span="11">
...@@ -137,6 +137,7 @@ ...@@ -137,6 +137,7 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-table <el-table
class="rim"
ref="multipleTable" ref="multipleTable"
:data="tableData" :data="tableData"
tooltip-effect="dark" tooltip-effect="dark"
...@@ -144,20 +145,120 @@ ...@@ -144,20 +145,120 @@
@selection-change="handleSelectionChange" @selection-change="handleSelectionChange"
> >
<el-table-column type="selection" width="55"></el-table-column> <el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="name" label="医院名称" ></el-table-column> <el-table-column prop="name" label="医院名称"></el-table-column>
<el-table-column prop="grade" label="医院级别" show-overflow-tooltip></el-table-column> <el-table-column prop="grade" label="医院级别"></el-table-column>
<el-table-column prop="province" label="所属省份" show-overflow-tooltip></el-table-column> <el-table-column prop="province" label="所属省份"></el-table-column>
<el-table-column prop="city" label="所属城市" show-overflow-tooltip></el-table-column> <el-table-column prop="city" label="所属城市"></el-table-column>
<el-table-column prop="district" label="所属区县" show-overflow-tooltip></el-table-column> <el-table-column prop="district" label="所属区县"></el-table-column>
<el-table-column prop="street" label="所属街道" show-overflow-tooltip></el-table-column> <el-table-column prop="street" label="所属街道" show-overflow-tooltip></el-table-column>
</el-table> </el-table>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="设定科室" name="third">设定科室</el-tab-pane> <el-tab-pane label="设定科室" name="third">
<el-tab-pane label="设定人员" name="fourth">设定人员</el-tab-pane> <el-col :span="8">
<el-select v-model="formDepartment.grade" placeholder="全部医院级别">
<el-option label="全部医院级别" value></el-option>
<el-option label="三家" value="3"></el-option>
<el-option label="二甲" value="2"></el-option>
<el-option label="一甲" value="1"></el-option>
</el-select>
<el-table
class="department"
ref="multipleTable"
:data="tableData2"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="name" label="科室名称"></el-table-column>
</el-table>
</el-col>
</el-tab-pane>
<el-tab-pane label="设定人员" name="fourth">
<el-form :inline="true" :model="formPersonnel" class="demo-form-inline">
<el-form-item label>
<el-select v-model="formPersonnel.hospital" placeholder="全部医院">
<el-option label="全部医院" value></el-option>
<el-option label="上海第一人民医院" value="shanghai"></el-option>
<el-option label="北京医院" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-select v-model="formPersonnel.department" placeholder="全部部门">
<el-option label="全部部门" value></el-option>
<el-option label="内科" value="3"></el-option>
<el-option label="外科" value="2"></el-option>
<el-option label="心内科" value="1"></el-option>
</el-select>
</el-form-item>
</el-form>
<el-table
class="rim"
ref="multipleTablePerson"
:data="tablePerson"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="name" label="人员名称"></el-table-column>
<el-table-column prop="hospital" label="所属医院"></el-table-column>
<el-table-column prop="department" label="所属部门"></el-table-column>
<el-table-column prop="province" label="所属省份"></el-table-column>
<el-table-column prop="city" label="所属城市"></el-table-column>
<el-table-column prop="district" label="所属区县" show-overflow-tooltip></el-table-column>
</el-table>
</el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
<div class="step2" v-else-if="active === 2"> <div class="step2" v-else-if="active === 2">
<h1>第三页</h1> <el-form ref="formData" :model="formComponent" :rules="rulesComponent">
<el-form-item label="选择组件：">
<el-col :span="20">
<el-select
v-model="formComponent.component"
multiple
collapse-tags
style="margin-left: 20px;width: 300px"
placeholder="请选择组件"
@change="changeValue"
>
<el-option
v-for="item in optionsComponent"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-col>
</el-form-item>
<el-form-item label="已选择：">
<el-col :span="20">
<el-tag
v-for="tag in tagsComponent"
:key="tag.name"
closable
:type="tag.type"
style="margin-left: 10px;"
>{{tag.name}}</el-tag>
</el-col>
</el-form-item>
<el-form-item label="配置证书：">
<el-radio-group v-model="formComponent.configure">
<el-radio :label="1">是</el-radio>
<el-radio :label="2">否</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="选择证书：">
<el-col :span="20">
<el-select v-model="formComponent.certificate" placeholder="请选择证书">
<el-option label="证书1" value="1"></el-option>
<el-option label="证书2" value="2"></el-option>
<el-option label="证书3" value="3"></el-option>
</el-select>
</el-col>
</el-form-item>
</el-form>
</div> </div>
</el-main> </el-main>
</div> </div>
...@@ -176,15 +277,23 @@ export default { ...@@ -176,15 +277,23 @@ export default {
province: "上海市", province: "上海市",
city: "上海市", city: "上海市",
district: "浦东新区", district: "浦东新区",
street: '-*-' street: "张江街道"
};
const itemPerson = {
name: "云小鹊",
hospital: "上海市第一人民医院",
department: "全科",
province: "上海市",
city: "上海市",
district: "长宁区"
}; };
return { return {
//面包屑 //面包屑
curmbFirst: "教培项目", curmbFirst: "教培项目",
curmbSecond: "新建项目", curmbSecond: "新建项目",
//页面展示位置 //页面展示位置
active: 1, active: 2,
activeName: "second", activeName: "third",
currentPage: 2, currentPage: 2,
//基层信息 数据 //基层信息 数据
imageUrl: "", imageUrl: "",
...@@ -211,13 +320,70 @@ export default { ...@@ -211,13 +320,70 @@ export default {
}, },
tags: [{ name: "高新区", type: "" }], tags: [{ name: "高新区", type: "" }],
tableData: Array(10).fill(item), tableData: Array(10).fill(item),
multipleSelection: [],
//设定机构 数据 //设定机构 数据
formInline: { formInline: {
name: "", name: "",
region: "", region: "",
grade: "" grade: ""
}, },
//设定科室 数据
formDepartment: {
grade: ""
},
tableData2: [
{ name: "全科" },
{ name: "内科" },
{ name: "外科" },
{ name: "心内科" },
{ name: "内分泌科" }
],
//设定人员 数据
formPersonnel: {
hospital: "",
department: ""
},
tablePerson: Array(10).fill(itemPerson),
//选择项目组件 数据
optionsComponent: [
{
value: "1",
label: "浙江心血管疾病预防 基础版",
name: "浙江心血管疾病预防 基础版"
},
{
value: "2",
label: "浙江心血管疾病预防 进阶版",
name: "浙江心血管疾病预防 进阶版"
},
{
value: "3",
label: "浙江心血管疾病预防 深入版",
name: "浙江心血管疾病预防 深入版"
}
],
formComponent: {
component: [],
configure: 1,
certificate: ""
},
tagsComponent: [],
// tagsComponent: [
// { name: "标签一", type: "" },
// { name: "标签二", type: "" },
// { name: "标签三", type: "" }
// ],
//校验工具 数据 //校验工具 数据
rulesComponent: {
certificate: [
{
type: "array",
required: true,
message: "请至少选择一个活动性质",
trigger: "change"
}
]
},
rules: { rules: {
name: [{ required: true, message: "请输入活动名称", trigger: "blur" }], name: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
date1: [ date1: [
...@@ -282,7 +448,9 @@ export default { ...@@ -282,7 +448,9 @@ export default {
} }
}; };
}, },
create() {}, created() {
//this.checkAll();
},
methods: { methods: {
nextStep() { nextStep() {
if (this.active++ > 2) this.active = 0; if (this.active++ > 2) this.active = 0;
...@@ -350,6 +518,32 @@ export default { ...@@ -350,6 +518,32 @@ export default {
}, },
handleSelectionChange(val) { handleSelectionChange(val) {
this.multipleSelection = val; this.multipleSelection = val;
},
checkAll() {
this.$refs.multipleTable.toggleAllSelection();
},
toggleSelection(rows) {
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
changeValue(value) {
this.tagsComponent = [];
let len = 0;
for (let i = 0; i < value.length; i++) {
for (let j = 0; j < this.optionsComponent.length; j++) {
if (value[i] == this.optionsComponent[j].value) {
this.tagsComponent[len] = {};
this.tagsComponent[len].value = this.optionsComponent[j].value;
this.tagsComponent[len].name = this.optionsComponent[j].label;
len++;
}
}
}
} }
} }
}; };
...@@ -394,8 +588,13 @@ export default { ...@@ -394,8 +588,13 @@ export default {
top: -6px; top: -6px;
left: 130px; left: 130px;
} }
.tree { .rim {
min-height: 700px;
border: 1px solid #dddddd;
}
.department {
margin-top: 20px;
min-height: 700px; min-height: 700px;
border: 3px solid #dddddd; border: 1px solid #dddddd;
} }
</style> </style>
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或