提交 3dc00cb6 编写于 作者: chendeli's avatar chendeli

add

上级 31f2a170
......@@ -8,7 +8,7 @@
<meta name="format-detection" content="telephone=no">
<meta name="full-screen" content="yes">
<meta name="x5-fullscreen" content="true">
<title>云鹊医工作站</title>
<title>云鹊医</title>
</head>
<body id="appBody">
<div id="app">
......
......@@ -2800,7 +2800,8 @@
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"aproba": {
"version": "1.2.0",
......@@ -3215,7 +3216,8 @@
"safe-buffer": {
"version": "5.1.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"safer-buffer": {
"version": "2.1.2",
......@@ -3271,6 +3273,7 @@
"version": "3.0.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
......@@ -3314,12 +3317,14 @@
"wrappy": {
"version": "1.0.2",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"yallist": {
"version": "3.0.2",
"bundled": true,
"dev": true
"dev": true,
"optional": true
}
}
},
......
......@@ -2,12 +2,7 @@ import App from '../App'
const home = r => require.ensure([], () => r(require('../views/home')), 'home')
const blank = r => require.ensure([], () => r(require('../views/blank')), 'blank')
const itemManager = r => require.ensure([], () => r(require('../views/education/item-manager.vue')), 'item-manager')
const itemComponent = r => require.ensure([], () => r(require('../views/education/item-component.vue')), 'item-component')
const createComponent = r => require.ensure([], () => r(require('../views/education/create-component.vue')),'create-component')
const roleManager = r => require.ensure([], () => r(require('../views/system/role.vue')),'role')
const addManager = r => require.ensure([], () => r(require('../views/education/add-manager.vue')), 'add-manager')
const itemRole = r => require.ensure([], () => r(require('../views/system/item-role.vue')), 'item-role')
const discuss = r => require.ensure([], () => r(require('../views/discuss/index.vue')), 'index')
const creatDiscuss = r => require.ensure([], () => r(require('../views/discuss/add-edit.vue')), 'creatDiscuss')
......@@ -25,27 +20,6 @@ export default [{
},{
path: '/home',
component: home
},{
path: '/blank',
component: blank
},{
path: '/item-manager',
component: itemManager
},{
path: '/add-manager',
component: addManager
},{
path: '/item-component',
component: itemComponent
},{
path: '/role',
component: roleManager
},{
path: '/create-component',
component: createComponent
},{
path: '/item-role',
component: itemRole
},
{
......
......@@ -18,7 +18,7 @@ export const envConfig = {
yuequeyiIndexUrl: 'https://dev-saas.yunqueyi.com/pica_index.html'
},
dev: {
baseUrl: 'https://dev-sc.yunqueyi.com/',
baseUrl: 'https://dev-sc.yunqueyi.com',
qiniuFileUrl: "https://dev-sc.yunqueyi.com/contents/admin/qiniu/token1",
qiniuResourceUrl: "https://test1-videos.yunqueyi.com",
qiniuImgUrl: "https://test1-file.yunqueyi.com",
......@@ -27,7 +27,7 @@ export const envConfig = {
yuequeyiIndexUrl: 'https://dev-saas.yunqueyi.com/pica_index.html'
},
test: {
baseUrl: 'https://test1-sc.yunqueyi.com/',
baseUrl: 'https://test1-sc.yunqueyi.com',
qiniuFileUrl: "https://test1-sc.yunqueyi.com/contents/admin/qiniu/token1",
qiniuResourceUrl: "https://test1-videos.yunqueyi.com",
qiniuImgUrl: "https://test1-file.yunqueyi.com",
......@@ -36,7 +36,7 @@ export const envConfig = {
yuequeyiIndexUrl: 'https://test1.yunqueyi.com/pica_index.html'
},
uat: {
baseUrl: 'https://uat-sc.yunqueyi.com/',
baseUrl: 'https://uat-sc.yunqueyi.com',
qiniuFileUrl: "https://uat-sc.yunqueyi.com/contents/admin/qiniu/token1",
qiniuResourceUrl: "https://videos.yunqueyi.com", // 视频
qiniuImgUrl: "https://file.yunqueyi.com",
......@@ -45,7 +45,7 @@ export const envConfig = {
yuequeyiIndexUrl: 'https://uat.yunqueyi.com/pica_index.html'
},
pro: {
baseUrl: 'https://sc.yunqueyi.com/',
baseUrl: 'https://sc.yunqueyi.com',
qiniuFileUrl: "https://sc.yunqueyi.com/contents/admin/qiniu/token1",
qiniuResourceUrl: "https://videos.yunqueyi.com",
qiniuImgUrl: "https://file.yunqueyi.com",
......
<template>
<div class="add-manager-wrap">
<bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
<div class="add-content screenSet" id="screenSet">
<el-row class="step-content">
<el-col :span="14">
<el-steps :active="active" simple class>
<span class="step-num" v-bind:class="{ 'on-step': stepData[0] }">1</span>
<el-step title="基础信息"></el-step>
<span class="step-num" v-bind:class="{ 'on-step': stepData[1] }">2</span>
<el-step title="选择范围">2</el-step>
<span class="step-num" v-bind:class="{ 'on-step': stepData[2] }">3</span>
<el-step title="选择项目组件">3</el-step>
</el-steps>
</el-col>
<el-col :span="5" :offset="5">
<el-button size="small" @click="storage">暂存</el-button>
<el-button v-if="active<2" size="small" class="button-green" @click="nextStep">下一步</el-button>
<el-button v-if="active>=2" size="small" class="button-white" @click="complete">完成</el-button>
</el-col>
</el-row>
<div class="first-step" v-if="active === 0">
<el-form ref="formData" :model="formData" :rules="rules" label-width="150px">
<el-form-item label="项目名称:" prop="projectName">
<el-col :span="13">
<el-input size="mini" v-model="formData.projectName" placeholder="请输入项目名称"></el-input>
</el-col>
</el-form-item>
<el-form-item label="项目时间:" required>
<el-col :span="3">
<el-form-item prop="projectBegintime">
<el-date-picker
v-model="formData.projectBegintime"
size="mini"
type="datetime"
placeholder="请选择开始时间"
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="pickerOptions0"
></el-date-picker>
</el-form-item>
</el-col>
<el-col class="line" :span="0"></el-col>
<el-col :span="4">
<el-form-item label=" " prop="projectEndtime">
<el-date-picker
v-model="formData.projectEndtime"
size="mini"
type="datetime"
placeholder="请选择结束时间"
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="pickerOptions1"
default-time="23:59:59"
></el-date-picker>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label="项目简介:" prop="projectIntro">
<el-col :span="13">
<el-input
size="mini"
type="textarea"
:autosize="{ minRows: 5}"
placeholder="请输入项目简介"
v-model="formData.projectIntro"
></el-input>
</el-col>
</el-form-item>
<el-form-item label="列表图片:" prop="attachmentUrl1">
<el-upload
v-model="formData.attachmentUrl1"
class="bg-uploader"
action="#"
:show-file-list="false"
:before-upload="beforeUploadListPic"
>
<img v-if="formData.attachmentUrl1" :src="formData.attachmentUrl1" class="bg-img">
<img
v-if="!formData.attachmentUrl1"
class="bg-img"
src="../../assets/image/small.png"
>
<!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
<div class="limit-text">
<p>尺寸:115*86</p>
<p>限制大小: 500Kb</p>
<p>支持.jpg,.png格式</p>
</div>
</el-upload>
</el-form-item>
<el-form-item label="封面类型:">
<el-radio-group size="mini" v-model="formData.type" @change="changeCover">
<el-radio :label="1">图片</el-radio>
<el-radio :label="2">视频</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="封面图片(视频):" prop="attachmentUrl2">
<el-upload
v-model="formData.attachmentUrl2"
class="bg-uploader"
action="#"
:show-file-list="false"
:before-upload="beforeUploadCoverPic"
>
<img
v-if="formData.type == 1 && formData.attachmentUrl2"
:src="formData.attachmentUrl2"
class="bg-img"
>
<video
v-if="formData.type == 2 && formData.attachmentUrl2"
width="100"
controls
class="bg-video"
>
<source :src="formData.attachmentUrl2" type="video/mp4">浏览器不支持mp4
</video>
<img
v-if="!formData.attachmentUrl2"
class="bg-img"
src="../../assets/image/small.png"
>
<!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
<div v-show="formData.type == 1" class="limit-text">
<p>尺寸:375*210</p>
<p>限制大小: 2.0 Mb</p>
<p>支持.jpg,.png格式</p>
</div>
<div v-show="formData.type == 2" class="limit-text">
<p></p>
<p>限制大小: 500 Mb</p>
<p>支持.mp4</p>
</div>
</el-upload>
</el-form-item>
<el-form-item label="可下载附件:">
<el-col :span="10">
<el-upload
v-model="formData.attachmentUrl3"
class="upload-pdf"
action="#"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-upload="beforeUploadPDF"
:on-change="handleChange"
:before-remove="beforeRemove"
multiple
:on-exceed="handleExceed"
:file-list="fileList"
>
<el-button class="choose-button" plain icon="el-icon-document">选择文件</el-button>
<div slot="tip" class="el-upload__tip">支持文件类型:pdf</div>
</el-upload>
</el-col>
</el-form-item>
</el-form>
</div>
<div class="second-step" v-else-if="active === 1">
<el-tabs v-model="activeName" @tab-click="handleClickTabs">
<el-tab-pane v-if="idType == 1" label="设定行政范围" name="first">
<el-row :gutter="20">
<el-col class="rim" :span="12">
<!--
:load="loadNode"
lazy
default-expand-all
-->
<el-tree
default-expand-all
:data="treeData"
show-checkbox
node-key="id"
ref="tree"
highlight-current
:props="defaultProps"
@check="onChecked"
>
<span class="custom-tree-node" slot-scope="{ node, data }">
<span>{{ node.label }}</span>
<span>
<el-button
type="text"
icon="el-icon-caret-bottom"
size="mini"
@click="() => append(data,node)"
></el-button>
</span>
</span>
</el-tree>
</el-col>
<el-col :span="11">
<el-tag
v-for="tag in tagsRegion"
:key="tag.name"
closable
:type="tag.type"
@close="handleCloseTree(tag)"
>{{tag.name}}</el-tag>
</el-col>
</el-row>
</el-tab-pane>
<el-tab-pane label="设定机构" name="second">
<el-form :inline="true" :model="formOrganization" class="demo-form-inline">
<el-form-item label>
<!-- <el-select size="mini" v-model="formOrganization.region" placeholder="全部地区">
<el-option
v-for="(item, index) in organizationRegion"
:key="index"
:label="item.label"
:value="item.id"
></el-option>
</el-select> -->
<!-- <el-cascader
expand-trigger="hover"
:options="organizationRegion"
v-model="formOrganization.region"
></el-cascader> -->
</el-form-item>
<el-form-item>
<el-select size="mini" v-model="formOrganization.grade" placeholder="全部医院级别">
<el-option
v-for="(item, index) in organizationRank"
:key="index"
:label="item.label"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label>
<el-input size="mini" v-model="formOrganization.name" placeholder="请输入机构名称"></el-input>
</el-form-item>
<el-form-item>
<el-button size="small" type="primary" @click="getOrganization()">搜索</el-button>
</el-form-item>
<el-form-item style="float:right;">
<el-button-group>
<el-button
size="small"
type="default"
@click="checkAll(true,'multipleOrganization')"
>选择全部</el-button>
<el-button
size="small"
type="default"
@click="checkAll(false,'multipleOrganization')"
>全部不选</el-button>
</el-button-group>
</el-form-item>
</el-form>
<el-table
class="rim"
ref="multipleOrganization"
:data="tableOrganization"
tooltip-effect="dark"
style="width: 100%"
@selection-change="selectionChangeOrganization"
>
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="name" label="医院名称" min-width="100" align="center"></el-table-column>
<el-table-column prop="hospitalLevel" label="医院级别" align="center"></el-table-column>
<el-table-column prop="provinceName" label="所属省份" align="center"></el-table-column>
<el-table-column prop="cityName" label="所属城市" align="center"></el-table-column>
<el-table-column prop="countyName" label="所属区县" align="center"></el-table-column>
<el-table-column prop="townName" label="所属街道" align="center"></el-table-column>
<div slot="empty">
<div class="table-empty">
<img src="../../assets/image/no-content1.png">
<p>没有查询到相关结果</p>
</div>
</div>
</el-table>
<div class="pagination">
<el-pagination
background
@size-change="handleSizeOrganization"
@current-change="handleCurrentOrganization"
:current-page="formOrganization.pageNum"
:page-sizes="[10, 20, 40]"
:page-size="formOrganization.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="totalOrganization"
></el-pagination>
</div>
</el-tab-pane>
<el-tab-pane label="设定科室" name="third">
<el-col :span="8">
<el-table
class="department"
ref="multipleDepartment"
:data="tableDepartment"
tooltip-effect="dark"
style="width: 100%"
@selection-change="selectionChangeDepartment"
>
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="name" label="科室名称" align="center"></el-table-column>
<div slot="empty">
<div class="table-empty">
<img src="../../assets/image/no-content1.png">
<p>没有查询到相关结果</p>
</div>
</div>
</el-table>
</el-col>
</el-tab-pane>
<el-tab-pane label="设定人员" name="fourth">
<el-form :inline="true" :model="formPerson" class="demo-form-inline">
<el-form-item label>
<el-select size="mini" v-model="formPerson.hospital" placeholder="全部医院">
<el-option
v-for="(item, index) in organizationRank"
:key="index"
:label="item.label"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-select size="mini" v-model="formPerson.department" placeholder="全部部门">
<el-option
v-for="(item, index) in organizationRank"
:key="index"
:label="item.label"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button size="small" type="primary" @click="getPeople">搜索</el-button>
</el-form-item>
<el-form-item style="float:right;">
<el-button-group>
<el-button
size="small"
type="default"
@click="checkAll(true,'multiplePerson')"
>选择全部</el-button>
<el-button
size="small"
type="default"
@click="checkAll(false,'multiplePerson')"
>全部不选</el-button>
</el-button-group>
</el-form-item>
</el-form>
<el-table
class="rim"
ref="multiplePerson"
:data="tablePerson"
tooltip-effect="dark"
style="width: 100%"
@selection-change="selectionChangePerson"
>
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="name" label="人员名称" align="center"></el-table-column>
<el-table-column prop="hospitalName" label="所属医院" align="center"></el-table-column>
<el-table-column prop="departmentName" label="所属部门" align="center"></el-table-column>
<el-table-column prop="provinceName" label="所属省份" align="center"></el-table-column>
<el-table-column prop="cityName" label="所属城市" align="center"></el-table-column>
<el-table-column prop="countyName" label="所属区县" align="center"></el-table-column>
<div slot="empty">
<div class="table-empty">
<img src="../../assets/image/no-content1.png">
<p>没有查询到相关结果</p>
</div>
</div>
</el-table>
<div class="pagination">
<el-pagination
background
@size-change="handleSizePerson"
@current-change="handleCurrentPerson"
:current-page="formPerson.pageNum"
:page-sizes="[10, 20, 40]"
:page-size="formPerson.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="totalPerson"
></el-pagination>
</div>
</el-tab-pane>
</el-tabs>
</div>
<div class="third-step" v-else-if="active === 2">
<el-form
ref="formComponent"
label-width="150px"
:model="formComponent"
:rules="rulesComponent"
>
<el-form-item label="选择组件:" prop="component">
<el-col :span="20">
<el-select
v-model="formComponent.component"
multiple
collapse-tags
style="width: 350px"
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;"
@close="handleCloseComponent(tag)"
>{{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 v-show="formComponent.configure == 1" label="选择证书:">
<el-col :span="20">
<el-select
v-model="formComponent.certificate"
placeholder="请选择证书"
style="width: 350px"
>
<el-option
v-for="item in optionsCertificate"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-col>
</el-form-item>
</el-form>
</div>
</div>
</div>
</template>
<script>
import BreadCrumb from "../../components/breadcrumb.vue";
import { doUpload, getFilePath } from "../../utils/qiniu-util";
import { returnData } from "../mock";
import { mapGetters } from "vuex";
import { openLoading, closeLoading } from "../../utils/utils";
import * as commonUtil from "../../utils/utils";
let vm = null;
export default {
components: {
BreadCrumb
},
data() {
const itemOrganization = {
name: "上海市第一人民医院",
grade: "二甲医院",
province: "上海市",
city: "上海市",
district: "浦东新区",
street: "张江街道"
};
const itemPerson = {
name: "云小鹊",
hospital: "上海市第一人民医院",
department: "全科",
province: "上海市",
city: "上海市",
district: "长宁区"
};
return {
idTypeValue: 1,
itemOrganization: itemOrganization,
itemPerson: itemPerson,
projectId: null,
//面包屑
curmbFirst: "教培项目",
curmbSecond: "新建项目",
//页面展示位置
stepData: [true, false, false],
active: 0,
activeName: "first",
//基层信息 数据
imageUrl: "",
formData: {
projectName: "",
projectBegintime: "",
projectEndtime: "",
projectIntro: "",
type: 1,
attachmentUrl1: "",
attachmentUrl2: "",
attachmentUrl3: "",
attachmentMore1: {},
attachmentMore2: {},
},
pickerOptions0: {
disabledDate: time => {
if (this.formData.projectEndtime != "") {
return (
time.getTime() > new Date(this.formData.projectEndtime).getTime()
);
}
}
},
pickerOptions1: {
disabledDate: time => {
return (
time.getTime() < new Date(this.formData.projectBegintime).getTime()
); //减去一天的时间代表可以选择同一天;
}
},
fileList: [],
//设定行政范围 数据
allSelectedKeys: [],
updatedTree: false,
defaultProps: {
children: "children",
label: "label",
isLeaf: "isLeaf"
},
treeData: [],
tagsRegion: [],
//设定机构 数据
checkTableState: {
multipleOrganization: true,
multipleDepartment: true,
multiplePerson: true
},
updatedOrganization: false,
formOrganization: {
name: "",
region: "",
grade: "",
chechAll: true,
pageNum: 1,
pageSize: 10
},
organizationRegion: [
{
id: "100",
label: "上海"
},
{
id: "101",
label: "北京"
}
],
organizationRank: [
{
id: "1",
label: "一甲"
},
{
id: "2",
label: "二甲"
}
],
hasOrganizationInit: false,
tableOrganization: new Array(),
multipleSelectionOrganization: [],
currentOrganization: 1,
totalOrganization: 10,
pageSizeOrganization: 2,
changedOrganization: {},
//设定科室 数据
firstDepartment: true,
formDepartment: {
grade: ""
},
tableDepartment: [],
multipleSelectionDepartment: [],
updatedDepartment: false,
changedDepartment: {},
//设定人员 数据
formPerson: {
hospital: "",
department: "",
pageNum: 1,
pageSize: 10
},
tablePerson: new Array(),
multipleSelectionPerson: [],
currentPerson: 1,
pageSizePerson: 2,
totalPerson: 10,
updatedPerson: false,
changedPerson: {},
//选择项目组件 数据
optionsComponent: [],
optionsCertificate: [],
formComponent: {
component: [],
configure: 2,
certificate: ""
},
tagsComponent: [],
projectStatus: "",
//校验工具 数据
rulesComponent: {
component: [
{ required: true, message: "请选择组件", trigger: "change" }
],
certificate: [
{ required: true, message: "请选择证书", trigger: "change" }
]
},
rules: {
projectName: [
{ required: true, message: "请输入活动名称", trigger: "blur" },
{
min: 2,
max: 20,
message: "输入长度为2-20的内容,可包含中英文、数字及特殊符号",
trigger: "blur"
}
],
duringTime: [
{
required: true,
message: "请选择时间",
trigger: "change"
}
],
projectBegintime: [
{
required: true,
message: "请选择时间",
trigger: "change"
}
],
projectEndtime: [
{
required: true,
message: "请选择时间",
trigger: "change"
}
],
type: [
{
type: "array",
required: true,
message: "请至少选择一个活动性质",
trigger: "change"
}
],
resource: [
{ required: true, message: "请选择活动资源", trigger: "change" }
],
projectIntro: [
{ required: true, message: "请填写项目简介", trigger: "blur" }
],
attachmentUrl1: [
{ required: true, message: "请选择列表图片", trigger: "blur" }
],
attachmentUrl2: [
{ required: true, message: "请选择封面", trigger: "blur" }
]
}
};
},
computed: {
...mapGetters(["_token", "idType"])
},
created() {
vm = this;
(this.projectId = vm.getUrlSearch(window.location.href, "projectId")),
this.editManager();
this.changeOnStep(this.active);
this.getComponentInfo();
this.idTypeValue = vm.idType;
if (vm.idType == 2) {
this.activeName = "second";
}
this.$nextTick(function() {
//this.getDepartment();
//this.idTypeValue = 2;
});
},
// 挂载到Dom完成时
mounted: function() {
commonUtil.resizeHeight();
},
methods: {
//表单校验
submitForm(formName) {
let flag = null;
this.$refs[formName].validate(valid => {
if (valid) {
//console.log("success");
flag = true;
} else {
console.log("error submit!!");
flag = false;
}
});
return flag;
},
//重置表单
resetForm(formName) {
this.$refs[formName].resetFields();
},
//改变封面类型
changeCover(radio) {
this.formData.attachmentUrl2 = "";
//console.log(radio);
},
//设置编辑数据
setEditData(editData) {
//console.log(editData);
//设置基础信息页
this.formData = {
id: vm.getUrlSearch(window.location.href, "projectId"),
projectName: editData.projectData.projectName,
projectBegintime: editData.projectData.projectBegintime,
projectEndtime: editData.projectData.projectEndtime,
projectIntro: editData.projectData.projectIntro,
type: editData.attachmentData[1].attachmentType,
attachmentUrl1: editData.attachmentData[0].attachmentUrl,
attachmentUrl2: editData.attachmentData[1].attachmentUrl,
attachmentUrl3: "",
attachmentMore1: {
attachmentName: editData.attachmentData[0].attachmentName,
attachmentExt: editData.attachmentData[0].attachmentExt,
attachmentSize: editData.attachmentData[0].attachmentSize,
},
attachmentMore2: {
attachmentName: editData.attachmentData[1].attachmentName,
attachmentExt: editData.attachmentData[1].attachmentExt,
attachmentSize: editData.attachmentData[1].attachmentSize,
}
};
if (editData.attachmentData.length > 2) {
for (let i = 2; i < editData.attachmentData.length; i++) {
let pdfItem = {
name: editData.attachmentData[i].attachmentName,
url: editData.attachmentData[i].attachmentUrl,
attachmentExt: editData.attachmentData[i].attachmentExt,
attachmentSize: editData.attachmentData[i].attachmentSize,
};
vm.fileList.push(pdfItem);
}
}
//设置选择项目组件页
let componentEdit = [];
let certificateEdit = 0;
for (let i = 0; i < editData.componentData.length; i++) {
componentEdit.push(editData.componentData[i].relevanceId);
}
this.formComponent.component = componentEdit;
this.changeValue(componentEdit);
if (editData.certificateData.length > 0) {
this.formComponent.configure = 1;
this.formComponent.certificate = editData.componentData[0].relevanceId;
}
},
//编辑管理
editManager(data) {
let req = {};
let projectId = vm.getUrlSearch(window.location.href, "projectId");
if (projectId != null && projectId != "") {
vm.GET("portal/portalInfo/getProjectInfo/" + projectId, req).then(res => {
if (res.code == "000000" && res.data.projectData != null) {
let editData = res.data;
this.setEditData(editData);
this.projectStatus = res.data.projectData.projectStatus;
//console.log('projectStatus:',this.projectStatus)
} else {
console.log(res);
}
});
}
},
//编辑/更新 基础信息
insertOrUpdate(option) {
//console.log(this.formData);
let projectModel = {
projectName: this.formData.projectName,
projectBegintime: this.formData.projectBegintime,
projectEndtime: this.formData.projectEndtime,
projectIntro: this.formData.projectIntro
};
let attachmentModel = [
{
attachmentType: 1,
attachmentUrl: this.formData.attachmentUrl1,
attachmentName: this.formData.attachmentMore1.attachmentName,
attachmentExt: this.formData.attachmentMore1.attachmentExt,
attachmentSize: this.formData.attachmentMore1.attachmentSize,
kind: 1,
seqNo: 1
},
{
attachmentType: this.formData.type,
attachmentUrl: this.formData.attachmentUrl2,
attachmentName: this.formData.attachmentMore2.attachmentName,
attachmentExt: this.formData.attachmentMore2.attachmentExt,
attachmentSize: this.formData.attachmentMore2.attachmentSize,
kind: 2,
seqNo: 1
}
];
let attachmentPDFModel = [];
// if (option == "add") {
for (let i = 0; i < vm.fileList.length; i++) {
let PDFModel = {
attachmentType: 3,
attachmentName: vm.fileList[i].name,
attachmentUrl: vm.fileList[i].url,
attachmentExt: vm.fileList[i].attachmentExt,
attachmentSize: vm.fileList[i].attachmentSize,
kind: 3
};
attachmentPDFModel.push(PDFModel);
}
//}
if (option == "edit") {
//编辑
projectModel.id = this.formData.id;
projectModel.projectStatus = this.projectStatus;
for (let i = 0; i < attachmentModel.length; i++) {
attachmentModel[i].portalProjectId = this.formData.id;
}
for (let i = 0; i < attachmentPDFModel.length; i++) {
attachmentPDFModel[i].portalProjectId = this.formData.id;
}
}
let postData = {
projectModel: JSON.stringify(projectModel),
attachmentModel: JSON.stringify(attachmentModel),
attachmentPDFModel: JSON.stringify(attachmentPDFModel)
};
//console.log(postData);
vm.POST("portal/portalInfo/insertOrUpdate", postData).then(res => {
if (res.code == "000000") {
console.log(res);
this.active++;
this.stepData = [false, true, false];
this.projectId = res.data.id;
this.projectStatus = res.data.projectStatus;
//console.log('projectStatus:',this.projectStatus)
this.initRange();
this.getDepartment();
}
});
},
//查询组件证书信息
getComponentInfo() {
let param = {};
vm.GET("portal/portalInfo/getComponentInfo", param).then(res => {
if (res.code == "000000") {
//console.log(res);
let componentList = res.data.componentList;
let certificateList = res.data.certificateList;
let optionsComponent = [],
optionsCertificate = [];
for (let index = 0; index < componentList.length; index++) {
optionsComponent[index] = {};
optionsComponent[index].value = componentList[index].id;
optionsComponent[index].label = componentList[index].name;
optionsComponent[index].name = componentList[index].name;
}
for (let index = 0; index < certificateList.length; index++) {
optionsCertificate[index] = {};
optionsCertificate[index].value = certificateList[index].id;
optionsCertificate[index].label = certificateList[index].name;
optionsCertificate[index].name = certificateList[index].name;
}
this.optionsComponent = optionsComponent;
this.optionsCertificate = optionsCertificate;
}
});
},
//项目组件信息 暂存/完成
componentDraft(type) {
let param = {
componentIds: this.formComponent.component,
certificateId: this.formComponent.certificate,
projectId: this.projectId,
type: type,
status: this.projectStatus
};
vm.POST("portal/portalInfo/componentDraft", param).then(res => {
console.log(res);
if (res.code == "000000") {
//notify
vm.$message({
type: 'success',
message: '操作成功!'
});
this.$router.push("item-manager");
} else {
vm.$message({
message: res.message,
type: 'warning'
});
}
});
},
//步骤style
changeOnStep(active) {
if (active == 0) {
this.stepData = [true, false, false];
} else if (active == 1) {
this.stepData = [false, true, false];
this.initRange();
} else if (active == 2) {
this.stepData = [false, false, true];
}
},
//选择范围选中所有table被选中
checkAllTable() {
this.$nextTick(function() {
this.$refs.multipleOrganization.toggleAllSelection();
this.$refs.multipleDepartment.toggleAllSelection();
this.$refs.multiplePerson.toggleAllSelection();
});
},
//点击暂存
storage() {
console.log("暂存步骤" + (this.active + 1));
if (this.active == 0) {
//暂存步骤1
let formName = "formData";
let state = this.submitForm(formName);
if (state === true) {
this.insertOrUpdate();
}
} else if (this.active == 1) {
//暂存步骤2
let req = {
projectId: this.projectId,
setKindOfAdministrative: this.getKind("administrativeScope"),
setKindOfOrganization: this.getKind("organization"),
setKindOfDepartment: this.getKind("department"),
setKindOfPeople: this.getKind("person")
};
if (req.setKindOfAdministrative == 3) {
req.scopeOfAdministrative = this.getScope("administrativeUpdate");
}
if (req.setKindOfOrganization == 2 || req.setKindOfOrganization == 3) {
req.scopeOfOrganization = this.getScopeOrganization(
req.setKindOfOrganization
);
}
if (req.setKindOfDepartment == 3) {
req.scopeOfDepartment = this.getScopeDepartment();
}
if (req.setKindOfPeople == 2 || req.setKindOfPeople == 3) {
req.scopeOfPeople = this.getScopePeople(req.setKindOfPeople);
}
vm.POST("portal/scope", req).then(res => {
//暂存范围
console.log(res);
vm.$message({
type: 'info',
message: res.message
});
});
} else if (this.active == 2) {
//暂存步骤3
let formName = "formComponent";
let completeState = this.submitForm(formName);
if (completeState === true) {
this.componentDraft(1);
}
}
},
//点击完成
complete() {
//type 1:暂存 2:完成
let formName = "formComponent";
let completeState = this.submitForm(formName);
if (completeState === true) {
this.componentDraft(2);
}
},
//点击下一步
nextStep() {
if (this.active == 0) {
let formName = "formData";
let removeState = this.submitForm(formName);
console.log("判断移动" + removeState);
if (removeState === true) {
//校验名字
let projectId = vm.getUrlSearch(window.location.href, "projectId");
if (projectId == null) {
//新建
let param = {
projectName: this.formData.projectName
};
vm.GET("portal/portalInfo/checkProjectName", param).then(res => {
if (res.code == "000000") {
//移动到第二页 选择范围
this.insertOrUpdate("add");
// this.active++;
// this.stepData = [false, true, false];
//this.initRange();
//this.checkAllTable();
} else {
this.$message.error("项目名称" + res.message);
}
});
} else {
//编辑
this.insertOrUpdate("edit");
// this.active++;
// this.stepData = [false, true, false];
//this.initRange();
}
}
} else if (this.active == 1) {
if (this.idType == 1) {
//内部管理员
if (this.tagsRegion.length > 0) {
//选择了范围
let req = {
projectId: this.projectId,
setKindOfAdministrative: this.getKind("administrativeScope"),
//scopeOfAdministrative: "000:2|000_110:1",
setKindOfOrganization: this.getKind("organization"),
//scopeOfOrganization: "2|3|4|5|6|7",
setKindOfDepartment: this.getKind("department"),
//scopeOfDepartment: "54",
setKindOfPeople: this.getKind("person")
//scopeOfPeople: ""
};
if (req.setKindOfAdministrative == 3) {
req.scopeOfAdministrative = this.getScope("administrativeUpdate");
}
if (
req.setKindOfOrganization == 2 ||
req.setKindOfOrganization == 3
) {
req.scopeOfOrganization = this.getScopeOrganization(
req.setKindOfOrganization
);
}
if (req.setKindOfDepartment == 3) {
req.scopeOfDepartment = this.getScopeDepartment();
}
if (req.setKindOfPeople == 2 || req.setKindOfPeople == 3) {
req.scopeOfPeople = this.getScopePeople(req.setKindOfPeople);
}
vm.POST("portal/scope", req).then(res => {
if (res.code == "000000") {
//移动到选择项目组件
console.log(res);
this.active++;
this.stepData = [false, false, true];
} else {
vm.$message({
type: 'info',
message: res.message
});
}
});
} else {
//没有选择范围
vm.$message({
showClose: true,
message: "选择项目范围后才能进行下一步操作",
type: "error"
});
}
} else {
//外部人员
let req = {
projectId: this.projectId,
setKindOfAdministrative: 0,
setKindOfOrganization: this.getKind("organization"),
setKindOfDepartment: this.getKind("department"),
setKindOfPeople: this.getKind("person")
};
if (
req.setKindOfOrganization == 2 ||
req.setKindOfOrganization == 3
) {
req.scopeOfOrganization = this.getScopeOrganization(
req.setKindOfOrganization
);
}
if (req.setKindOfDepartment == 3) {
req.scopeOfDepartment = this.getScopeDepartment();
}
if (req.setKindOfPeople == 2 || req.setKindOfPeople == 3) {
req.scopeOfPeople = this.getScopePeople(req.setKindOfPeople);
}
vm.POST("portal/scope", req).then(res => {
if (res.code == "000000") {
//移动到选择项目组件
console.log(res);
this.active++;
this.stepData = [false, false, true];
} else {
vm.$message({
type: 'info',
message: res.message
});
}
});
}
}
},
//图片上传
handleAvatarSuccess(res, file) {
this.imageUrl = URL.createObjectURL(file.raw);
},
//上传列表图片
beforeUploadListPic(file) {
let fileLimit = {
width: 115,
height: 86,
size: 0.5,
sizeText: "500K",
key: "attachmentUrl1",
more: "attachmentMore1",
};
this.beforeAvatarUpload(file, fileLimit);
},
//上传封面图片
beforeUploadCoverPic(file) {
let fileLimit = {
width: 375,
height: 210,
size: 2,
sizeText: "2.0M",
key: "attachmentUrl2",
more: "attachmentMore2",
};
if (this.formData.type == 1) {
this.beforeAvatarUpload(file, fileLimit);
} else {
this.beforeUploadMp4(file);
}
},
//上传PDF
beforeUploadPDF(file) {
// console.log(file);
// console.log(this.fileList);
const isPDF = file.type === "application/pdf";
if (!isPDF) {
this.$message.error("请上传PDF格式文件!");
} else {
openLoading(vm);
doUpload(
vm,
file,
getFilePath(file, null),
"preview4",
"progress1",
1
).then(function(path) {
closeLoading(vm);
console.log(path);
let fileItem = {
name: path.name,
url: path.fullPath,
attachmentExt: path.ext,
attachmentSize: path.size,
};
vm.fileList.push(fileItem);
vm.$message.success("上传成功");
});
}
},
handleChange(file, fileList) {
//this.fileList3 = fileList.slice(-3);
},
//上传mp4
beforeUploadMp4(file) {
console.log(file);
const isMP4 = file.type === "video/mp4";
const isLt = file.size / 1024 / 1024 < 500;
if (!isLt) {
this.$message.error("上传视频大小不能超过500M !");
return;
}
if (!isMP4) {
this.$message.error("请上传MP4格式文件!");
} else {
openLoading(vm);
doUpload(
vm,
file,
getFilePath(file, null),
"preview4",
"progress1",
1
).then(function(path) {
closeLoading(vm);
console.log(path);
vm.formData.attachmentUrl2 = path.fullPath;
vm.$message.success("上传成功");
});
}
},
//上传图片校验
beforeAvatarUpload(file, fileLimit) {
const isJPG = file.type === "image/jpeg";
const isPNG = file.type === "image/png";
const isLt2M = file.size / 1024 / 1024 < fileLimit.size;
if (!isJPG && !isPNG) {
this.$message.error("上传头像图片只能是 JPG 格式!");
return;
}
if (!isLt2M) {
this.$message.error(
"上传头像图片大小不能超过 " + fileLimit.sizeText + "!"
);
return;
}
let _img = new FileReader();
_img.readAsDataURL(file);
_img.onload = function(theFile) {
let image = new Image();
image.src = theFile.target.result;
image.onload = function() {
let _this = this;
if (
_this.width != fileLimit.width ||
_this.height != fileLimit.height
) {
vm.$message.info("上传图片长宽不合适,请重新上传");
} else {
openLoading(vm);
doUpload(
vm,
file,
getFilePath(file, null),
"preview4",
"progress1",
1
).then(function(path) {
closeLoading(vm);
console.log(path);
vm.formData[fileLimit.key] = path.fullPath;
vm.formData[fileLimit.more] = {
attachmentName: path.name,
attachmentExt: path.ext,
attachmentSize: path.size,
};
vm.$message.success("上传成功");
});
}
};
};
return isJPG && isLt2M;
},
handleRemove(file, fileList) {
for (let i = 0; i < vm.fileList.length; i++) {
if (vm.fileList[i].name == file.name) {
vm.fileList.splice(i, 1);
console.log("删除" + i);
}
}
},
handlePreview(file) {
//console.log(file);
},
handleExceed(files, fileList) {
this.$message.warning(
`当前限制选择 3 个文件,本次选择了 ${
files.length
} 个文件,共选择了 ${files.length + fileList.length} 个文件`
);
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${file.name}?`);
},
//第二步 选择范围 初始化
initRange() {
let projectId = this.projectId;
if (projectId == null) {
//新建
} else {
//编辑
if (this.idType == 1) {
this.getAdministrative();
} else {
this.activeName = "second";
this.getOrganization();
}
}
},
//切换tabs
handleClickTabs(tab, event) {
let tabName = tab.name;
if (tabName == "second") {
//设定机构
this.getOrganization();
} else if (tabName == "third") {
//设定科室
// if (this.checkTableState.multipleDepartment && this.firstDepartment) {
// this.$refs.multipleDepartment.toggleAllSelection();
// this.firstDepartment = false;
// }
} else if (tabName == "fourth") {
//设定人员
this.getPeople();
}
},
//初始化范围树
setTreeData(administrative) {
let treeIdList = [];
let checkList = [];
for (let i = 0; i < administrative.length; i++) {
treeIdList.push(administrative[i].id);
checkList[i] = {};
checkList[i].name = administrative[i].label;
checkList[i].key = administrative[i].id;
}
//console.log(treeIdList);
this.$refs.tree.setCheckedKeys(treeIdList);
this.tagsRegion = checkList;
},
//查询行政范围(树)
getAdministrative() {
let req = {
projectId: this.projectId
};
openLoading(vm);
vm.GET("portal/scope/v1/administrative", req).then(res => {
closeLoading(vm);
if (res.code == "000000") {
//console.log(res.data);
let administrativeAll = res.data.administrativeAll;
let administrative = res.data.administrative;
this.treeData = [];
this.treeData[0] = administrativeAll;
this.setTreeData(administrative);
//console.log("treeData", this.treeData);
}
});
},
//列举选中地区
initCheckList(allSelectedKeys) {
this.tagsRegion = [];
// console.log(allSelectedKeys);
// console.log(this.$refs.tree.getCheckedNodes());
let nodeData = this.$refs.tree.getCheckedNodes();
for (let i = 0; i < nodeData.length; i++) {
for (let j = 0; j < allSelectedKeys.length; j++) {
if (
allSelectedKeys[j].type == 1 &&
nodeData[i].id == allSelectedKeys[j].key
) {
let tagObj = {};
tagObj.name = nodeData[i].label;
tagObj.key = nodeData[i].id;
this.tagsRegion.push(tagObj);
}
}
}
},
//添加子节点
append(data, node) {
console.log("data:", data);
console.log("node:", node);
if (data.children.length == 0) {
let id = data.id + "add";
const newChild = [
{ id: id, label: "testtest", children: [] },
{ id: id, label: "22", children: [] }
];
//data.children.push(newChild);
let req = {
id: data.id
};
vm.GET("portal/scope/v1/administrative/children", req).then(res => {
if (res.code == "000000") {
let administrative = res.data.administrative;
console.log(administrative);
data.children = administrative;
//data.children.push(newChild);
}
});
}
},
//树结构
loadNode(node, resolve) {
if (node.level === 0) {
return resolve([{ label: "全国", id: "000", status: 0 }]);
}
if (node.level === 1) {
let req = {
//projectId: vm.getUrlSearch(window.location.href, "projectId"),
projectId: 54
};
vm.GET("portal/scope/v1/administrative", req).then(res => {
if (res.code == "000000") {
let administrativeAll = res.data.administrativeAll;
let administrative = res.data.administrative;
let children = administrativeAll.children;
//console.log(administrativeAll);
return resolve(children);
}
});
}
if (node.level === 2 || node.level === 3 || node.level === 4) {
let req = {
id: node.data.id
};
vm.GET("portal/scope/v1/administrative/children", req).then(res => {
if (res.code == "000000") {
let administrative = res.data.administrative;
return resolve(administrative);
}
});
}
if (node.level === 5) return resolve([]);
},
getCheckedKeys() {
console.log(this.$refs.tree.getCheckedKeys());
},
onChecked() {
let cData = [],
oldData = (this.treeData.length && this.treeData.slice()) || [],
checkedKeys = this.$refs.tree.getCheckedKeys(),
halfCheckedKeys = this.$refs.tree.getHalfCheckedKeys(),
savedCheckedKeys = this.handlerCheckedData(oldData, checkedKeys).map(
key => {
return { type: 1, key: key };
}
),
savedHalfCheckedKeys = halfCheckedKeys.map(key => {
return { type: 2, key: key };
}),
allSelectedKeys = savedCheckedKeys.concat(savedHalfCheckedKeys);
this.allSelectedKeys = allSelectedKeys;
this.initCheckList(allSelectedKeys);
//console.log("allSelectedKeys", allSelectedKeys);
//改变行政范围后,更新设定机构和设定人员
this.updateOrganizationAndPerson(allSelectedKeys);
this.updatedTree = true;
},
getTreeCheck() {
let cData = [],
oldData = (this.treeData.length && this.treeData.slice()) || [],
checkedKeys = this.$refs.tree.getCheckedKeys(),
halfCheckedKeys = this.$refs.tree.getHalfCheckedKeys(),
savedCheckedKeys = this.handlerCheckedData(oldData, checkedKeys).map(
key => {
return { type: 1, key: key };
}
),
savedHalfCheckedKeys = halfCheckedKeys.map(key => {
return { type: 2, key: key };
}),
allSelectedKeys = savedCheckedKeys.concat(savedHalfCheckedKeys);
return allSelectedKeys;
},
// 递归删除列表中所有子节点
delSubKeysByNode(node, checkedKeys) {
let idIndex;
if (node.children && node.children.length) {
if (node.children && node.children.length) {
node.children.forEach(elm => {
idIndex = checkedKeys.findIndex(id => {
return id === elm.id;
});
if (idIndex > -1) {
checkedKeys.splice(idIndex, 1);
}
if (elm.children && elm.children.length) {
this.delSubKeysByNode(elm, checkedKeys);
}
});
}
}
},
// 去除子节点
handlerCheckedData(oldData, checkedKeys) {
oldData.forEach(element => {
for (let i = 0; i < checkedKeys.length; i++) {
// 如果此节点被选中,则删除所有子节点
if (element.id === checkedKeys[i]) {
this.delSubKeysByNode(element, checkedKeys);
} else {
if (element.children && element.children.length) {
this.handlerCheckedData(element.children, checkedKeys);
}
}
}
});
return checkedKeys;
},
//通过key设置tree
setCheckedKeys(tagsRegion) {
console.log(tagsRegion);
let treeKeyList = [];
for (let index = 0; index < tagsRegion.length; index++) {
treeKeyList[index] = tagsRegion[index].key;
}
console.log(treeKeyList);
this.$refs.tree.setCheckedKeys(treeKeyList);
},
//删除label节点 同步树结构
handleCloseTree(tag) {
this.tagsRegion.splice(this.tagsRegion.indexOf(tag), 1);
this.setCheckedKeys(this.tagsRegion);
},
//获取反选数据
getDifference(a, b) {
if (a.constructor === Array && b.constructor === Array) {
let set1 = new Set(a);
let set2 = new Set(b);
return Array.from(new Set([...set1].filter(x => !set2.has(x))));
}
return null;
},
getReverseData(data, check) {
let reverse = [];
//console.log('data',data,'check',check);
for (let i = 0; i < data.length; i++) {
for (let j = 0; j < check.length; j++) {
if (data[i].id !== check[j].id) {
reverse.push(data[i]);
}
}
}
return reverse;
},
//改变 设定机构选项
selectionChangeOrganization(val) {
this.multipleSelectionOrganization = val;
//console.log(val.length , this.formOrganization.pageSize , this.updatedOrganization)
if (
val.length != 0 &&
val.length != this.formOrganization.pageSize &&
this.updatedOrganization == false
) {
this.updatedOrganization = true;
console.log("机构被更新", this.updatedOrganization);
}
if (this.updatedOrganization == true) {
this.changedOrganization[this.formOrganization.pageNum] = [];
this.changedOrganization[
this.formOrganization.pageNum
][0] = this.multipleSelectionOrganization;
let reverse = this.getDifference(
this.tableOrganization,
this.multipleSelectionOrganization
);
this.changedOrganization[this.formOrganization.pageNum][1] = reverse;
console.log("check机构:", this.changedOrganization);
}
},
//改变机构 table 的check状态
selectionChangeDepartment(val) {
this.multipleSelectionDepartment = val;
//console.log(this.multipleSelectionDepartment);
},
//改变人员 table的check状态
selectionChangePerson(val) {
this.multipleSelectionPerson = val;
//console.log(this.multipleSelectionPerson);
if (
val.length != 0 &&
val.length != this.formPerson.pageSize &&
this.updatedPerson == false
) {
this.updatedPerson = true;
console.log("人员被更新", this.updatedPerson);
}
if (this.updatedPerson == true) {
this.changedPerson[this.formPerson.pageNum] = [];
this.changedPerson[
this.formPerson.pageNum
][0] = this.multipleSelectionPerson;
let reverse = this.getDifference(
this.tablePerson,
this.multipleSelectionPerson
);
this.changedPerson[this.formPerson.pageNum][1] = reverse;
console.log("check人员:", this.changedPerson);
}
},
//设定机构table全选
checkAll(flag, name) {
//console.log(flag + " " + name);
if (name == "multipleOrganization") {
this.changedOrganization = {};
} else if (name == "multiplePerson") {
this.changedPerson = {};
}
if (flag === true) {
if (this.checkTableState[name] === false) {
this.$refs[name].toggleAllSelection();
this.checkTableState[name] = true;
}
} else {
this.$refs[name].clearSelection();
this.checkTableState[name] = false;
}
},
//获取用户类型
getKind(type) {
let kind = 0;
if (type == "administrative") {
console.log("this.updatedTree", this.updatedTree);
if (this.tagsRegion.length > 0 && this.updatedTree == true) {
kind = 3;
}
} else if (type == "administrativeScope") {
if (this.tagsRegion.length > 0) {
kind = 3;
}
} else if (type == "organization") {
if (this.checkTableState.multipleOrganization == true) {
//设置机构类别0:无 1:全选 2:去掉 3:选中
kind = 1;
for (let key in this.changedOrganization) {
if (this.changedOrganization[key][1].length > 0) {
kind = 2;
}
}
} else {
//全部不选
kind = 0;
for (let key in this.changedOrganization) {
if (this.changedOrganization[key][0].length > 0) {
kind = 3;
}
}
}
} else if (type == "department") {
if (this.multipleSelectionDepartment.length > 0) {
kind = 3;
}
} else if (type == "person") {
if (this.checkTableState.multiplePerson == true) {
//设置机构类别0:无 1:全选 2:去掉 3:选中
kind = 1;
for (let key in this.changedPerson) {
if (this.changedPerson[key][1].length > 0) {
kind = 2;
}
}
} else {
//全部不选
kind = 0;
for (let key in this.changedPerson) {
if (this.changedPerson[key][0].length > 0) {
kind = 3;
}
}
}
}
return kind;
},
//设定的行政范围内容
getScope(type) {
let scope = "";
if (type == "administrative") {
for (let i = 0; i < this.tagsRegion.length; i++) {
scope += this.tagsRegion[i].key;
if (i < this.tagsRegion.length - 1) {
scope += "|";
}
}
} else if (type == "administrativeUpdate") {
//console.log(this.allSelectedKeys.length);
if (this.allSelectedKeys.length > 0) {
for (let i = 0; i < this.allSelectedKeys.length; i++) {
scope +=
this.allSelectedKeys[i].key + ":" + this.allSelectedKeys[i].type;
if (i < this.allSelectedKeys.length - 1) {
scope += "|";
}
}
} else {
let noChangeTree = this.getTreeCheck();
console.log(noChangeTree);
for (let i = 0; i < noChangeTree.length; i++) {
scope += noChangeTree[i].key + ":" + noChangeTree[i].type;
if (i < noChangeTree.length - 1) {
scope += "|";
}
}
}
}
//console.log(scope);
return scope;
},
//查询机构列表
getOrganization() {
let req = {
projectId: this.projectId,
setKind: this.getKind("administrative"),
// scope: "000_110",
pageNum: this.formOrganization.pageNum,
pageSize: this.formOrganization.pageSize
};
if (req.setKind == 3) {
req.scope = this.getScope("administrative");
}
openLoading(vm);
vm.POST("portal/scope/v1/organization", req).then(res => {
closeLoading(vm);
if (res.code == "000000") {
//console.log(res.data);
this.tableOrganization = res.data.organizationList;
this.totalOrganization = res.data.total;
console.log("changedOrganization", this.changedOrganization);
//console.log('机构状态:'+this.checkTableState.multipleOrganization);
if (this.checkTableState.multipleOrganization == true) {
//全选
if (
this.updatedOrganization == true &&
this.changedOrganization[this.formOrganization.pageNum] !=
undefined
) {
//机构table 勾选被更新过
let rowCheck = this.changedOrganization[
this.formOrganization.pageNum
][0];
//console.log("rowCheck:",rowCheck);
rowCheck.forEach(row => {
// console.log("row", row);
let rowItem = {};
for (let i = 0; i < this.tableOrganization.length; i++) {
if (this.tableOrganization[i].id == row.id) {
rowItem = this.tableOrganization[i];
}
}
this.$nextTick(function() {
this.$refs.multipleOrganization.toggleRowSelection(rowItem);
});
});
} else {
this.$refs.multipleOrganization.toggleAllSelection();
}
} else {
//全不选
if (
this.updatedOrganization == true &&
this.changedOrganization[this.formOrganization.pageNum] !=
undefined
) {
let rowCheck = this.changedOrganization[
this.formOrganization.pageNum
][0];
//console.log("rowCheck:",rowCheck);
rowCheck.forEach(row => {
// console.log("row", row);
let rowItem = {};
for (let i = 0; i < this.tableOrganization.length; i++) {
if (this.tableOrganization[i].id == row.id) {
rowItem = this.tableOrganization[i];
}
}
this.$nextTick(function() {
this.$refs.multipleOrganization.toggleRowSelection(rowItem);
});
});
}
}
}
});
},
//获取科室信息
getDepartment() {
let req = {
projectId: this.projectId
};
vm.GET("portal/scope/v1/department", req).then(res => {
if (res.code == "000000") {
this.tableDepartment = res.data.department;
let rowCheck = this.tableDepartment;
rowCheck.forEach(row => {
if (row.status == 1) {
this.$nextTick(function() {
this.$refs.multipleDepartment.toggleRowSelection(row);
});
}
});
}
});
},
//获取机构id列表
getScopeOrganization(type) {
let scope = "";
if (type == 2) {
for (let key in this.changedOrganization) {
let organizationItem = this.changedOrganization[key][1];
console.log("organizationItem:", organizationItem);
for (let i = 0; i < organizationItem.length; i++) {
scope += organizationItem[i].id + "|";
}
}
} else if (type == 3) {
for (let key in this.changedOrganization) {
let organizationItem = this.changedOrganization[key][0];
for (let i = 0; i < organizationItem.length; i++) {
scope += organizationItem[i].id + "|";
}
}
}
scope = scope.substring(0, scope.length - 1);
console.log("scope", scope);
return scope;
},
//获取人员id列表
getScopePeople(type) {
let scope = "";
if (type == 2) {
for (let key in this.changedPerson) {
let peopleItem = this.changedPerson[key][1];
//console.log("peopleItem:", peopleItem);
for (let i = 0; i < peopleItem.length; i++) {
scope += peopleItem[i].id + "|";
}
}
} else if (type == 3) {
for (let key in this.changedPerson) {
let peopleItem = this.changedPerson[key][0];
for (let i = 0; i < peopleItem.length; i++) {
scope += peopleItem[i].id + "|";
}
}
}
scope = scope.substring(0, scope.length - 1);
console.log("scope people", scope);
return scope;
},
//获取科室列表
getScopeDepartment() {
let scope = "";
for (let i = 0; i < this.multipleSelectionDepartment.length; i++) {
scope += this.multipleSelectionDepartment[i].id + "|";
}
scope = scope.substring(0, scope.length - 1);
return scope;
},
//查询人员列表
getPeople() {
let req = {
projectId: this.projectId,
setKindOfAdministrative: this.getKind("administrative"),
//scopeOfAdministrative: "000_110",
setKindOfOrganization: this.getKind("organization"),
//scopeOfOrganization: "2|3|4|5|6|7",
setKindOfDepartment: this.getKind("department"),
//scopeOfDepartment: 54,
pageNum: this.formPerson.pageNum,
pageSize: this.formPerson.pageSize
};
if (req.setKindOfAdministrative == 3) {
req.scopeOfAdministrative = this.getScope("administrative");
}
if (req.setKindOfOrganization == 2 || req.setKindOfOrganization == 3) {
req.scopeOfOrganization = this.getScopeOrganization(
req.setKindOfOrganization
);
}
if (req.setKindOfDepartment == 3) {
req.scopeOfDepartment = this.getScopeDepartment();
}
openLoading(vm);
vm.POST("portal/scope/v1/people", req).then(res => {
closeLoading(vm);
if (res.code == "000000") {
console.log(res);
this.tablePerson = res.data.people;
this.totalPerson = res.data.total;
if (this.checkTableState.multiplePerson == true) {
//全选
if (
this.updatedPerson == true &&
this.changedPerson[this.formPerson.pageNum] != undefined
) {
//机构table 勾选被更新过
let rowCheck = this.changedPerson[this.formPerson.pageNum][0];
//console.log("rowCheck:",rowCheck);
rowCheck.forEach(row => {
// console.log("row", row);
let rowItem = {};
for (let i = 0; i < this.tablePerson.length; i++) {
if (this.tablePerson[i].id == row.id) {
rowItem = this.tablePerson[i];
}
}
this.$nextTick(function() {
this.$refs.multiplePerson.toggleRowSelection(rowItem);
});
});
} else {
this.$refs.multiplePerson.toggleAllSelection();
}
} else {
//person 全不选
if (
this.updatedPerson == true &&
this.changedPerson[this.formPerson.pageNum] != undefined
) {
let rowCheck = this.changedPerson[this.formPerson.pageNum][0];
//console.log("rowCheck:",rowCheck);
rowCheck.forEach(row => {
// console.log("row", row);
let rowItem = {};
for (let i = 0; i < this.tablePerson.length; i++) {
if (this.tablePerson[i].id == row.id) {
rowItem = this.tablePerson[i];
}
}
this.$nextTick(function() {
this.$refs.multiplePerson.toggleRowSelection(rowItem);
});
});
}
}
}
});
},
//机构table修改
handleSizeOrganization(val) {
console.log(`每页 ${val} 条`);
this.formOrganization.pageSize = val;
},
handleCurrentOrganization(val) {
//console.log(`当前页: ${val}`);
this.formOrganization.pageNum = val;
this.getOrganization();
},
//角色table修改
handleSizePerson(val) {
console.log(`每页 ${val} 条`);
this.formPerson.pageSize = val;
},
handleCurrentPerson(val) {
console.log(`当前页: ${val}`);
this.formPerson.pageNum = val;
this.getPeople();
},
//行政范围改变更新设定机构和设定人员
updateOrganizationAndPerson(allSelectedKeys) {
this.tableOrganization = [];
this.tablePerson = [];
},
//设定机构改变更新设定人员
updatePerson(organization) {
if (this.hasOrganizationInit === true) {
this.tablePerson = [];
}
this.hasOrganizationInit = true;
},
//选择项目组件
//改变组件选择情况
changeValue(value) {
//console.log('value',value,'optionsComponent',this.optionsComponent);
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++;
}
}
}
//console.log('this.tagsComponent',this.tagsComponent);
},
//选择组件数据绑定
handleCloseComponent(tag) {
this.tagsComponent.splice(this.tagsComponent.indexOf(tag), 1);
this.formComponent.component = [];
for (let j = 0; j < this.tagsComponent.length; j++) {
this.formComponent.component[j] = this.tagsComponent[j].value;
}
}
}
};
</script>
<style lang="scss">
.add-manager-wrap {
.add-content {
background: #fff;
}
.rim {
border: 1px solid #dddddd;
}
.step-content {
overflow: hidden;
height: 60px;
margin-top: 66px;
padding-top: 15px;
border-bottom: 1px solid #fff;
.is-text {
display: none;
}
.el-steps--simple {
background: #fff;
}
.button-green {
color: #ffffff;
background: #449284;
border-color: #bfdad5;
border-radius: 2px;
}
.button-white {
color: #606266;
background: #ffffff;
border-color: #ecedf1;
border-radius: 2px;
}
.step-num {
display: block;
font-size: 12px;
border: 2px solid #b8babe;
border-radius: 50%;
width: 25px;
height: 20px;
line-height: 15px;
text-align: center;
color: #b8babe;
}
.is-finish {
color: #c0c4cc;
}
.on-step {
color: #747476;
border-color: #747476;
}
}
.first-step {
margin-top: 20px;
.bg-uploader {
img {
float: left;
}
.bg-img {
width: 84px;
height: 100px;
}
.bg-video {
float: left;
width: 100px;
height: 100px;
}
.limit-text {
float: left;
margin-left: 10px;
margin-top: -10px;
p {
font-size: 12px;
color: #999;
}
}
}
.el-upload__tip {
position: absolute;
top: -6px;
left: 130px;
}
.choose-button {
background: #fff;
color: #409eff;
border: 1px solid #409eff;
}
}
.second-step {
margin: 10px 0 0 20px;
//隐藏树展开
.table-empty {
img {
width: 100px;
}
p {
margin-top: -50px;
}
}
.el-tree-node__expand-icon {
display: none;
}
.el-table__header-wrapper {
.el-checkbox__inner {
//display: none;
//visibility: hidden;
}
}
.department {
margin-top: 20px;
border: 1px solid #dddddd;
}
.el-tabs__nav-wrap::after {
display: none;
}
.el-tabs__active-bar {
display: none;
}
#tab-first,
#tab-second,
#tab-third {
padding-right: 0px;
}
#tab-first::after,
#tab-second::after,
#tab-third::after {
color: #c7cbd2;
margin-left: 20px;
content: "•";
}
.el-tag {
margin: 0 10px 10px 0;
border: 1.3px solid #48a8fe;
color: #1e92fe;
background-color: #e7f6fe;
.el-icon-close {
width: 13px;
height: 13px;
line-height: 13px;
font-size: 12px;
background-color: #0486fe;
border-radius: 50%;
color: #d4edfe;
}
}
}
.third-step {
margin: 30px 0 0px 30px;
padding-bottom: 30px;
}
}
</style>
\ No newline at end of file
<template>
<div class="create-component-wrap">
<bread-crumb
:curmbFirst="curmbFirst"
:curmbSecond="curmbSecond"
:curmbThird="curmbThird"
:jumPathThird="jumPathThird">
</bread-crumb>
<div class="create-content screenSet" id="screenSet">
<div class="step-content">
<el-steps :active="stepNum" simple>
<span class="step-one" :class="stepNum == 1 ? 'class-1' : 'class-2'">1</span>
<el-step title="基础信息" :class="stepNum == 1 ? 'class-1-text' : 'class-2-text'"></el-step>
<span class="step-two" :class="stepNum == 2 ? 'class-1' : 'class-2'">2</span>
<el-step title="选择模块" :class="stepNum == 2 ? 'class-1-text' : 'class-2-text'"></el-step>
</el-steps>
<div class="btn-container">
<el-button v-if="stepNum == 1 && (componentStatus == 1 || !componentStatus)" @click="storageAndNext(1)" type="default" size="small">暂存</el-button>
<el-button v-if="stepNum == 1" @click="storageAndNext(2)" type="primary" size="small" style="margin-left:0;">下一步</el-button>
<el-button v-if="stepNum == 2 && (componentStatus == 1 || !componentStatus)" :disabled="conditionSelect" @click="finishConponent(1)" type="default" size="small">暂存</el-button>
<el-button v-if="stepNum == 2" @click="finishConponent(2)" :disabled="conditionSelect" type="primary" size="small" style="margin-left:0;">完成</el-button>
</div>
</div>
<div class="first-step" v-if="stepNum == 1">
<el-form ref="basicInfoForm" class="basic-form" :model="portalComponent" :rules="rules" label-width="125px" label-suffix=":" size="mini" style="margin-bottom:30px;">
<el-form-item label="组件名称" prop="name">
<el-input type="text" v-model="portalComponent.name" @blur="componentName" size="mini" placeholder="请输入组件名称" style="width:30%;"></el-input>
<span class="word-num">{{(portalComponent.name).replace(/\s+/g,"").length}}/20</span>
<p class="component-name" v-if="isStorage">输入组件名称</p>
</el-form-item>
<el-form-item label="组件简介" prop="introduce">
<el-input type="textarea" rows="4" cols="10" v-model="portalComponent.introduce" size="mini" placeholder="请输入组件简介" style="width:37%;"></el-input>
<span class="word-num">{{(portalComponent.introduce).replace(/\s+/g,"").length}}/150</span>
</el-form-item>
<el-form-item label="组件图片" prop="imageUrl">
<el-upload
v-model="portalComponent.imageUrl"
class="bg-uploader"
action="#"
:show-file-list="false"
:before-upload="beforeAvatarUpload">
<img v-if="portalComponent.imageUrl" :src="portalComponent.imageUrl" class="bg-img">
<img v-if="!portalComponent.imageUrl" class="bg-img" src="../../assets/image/small.png">
<div class="limit-text">
<p>尺寸大小:750*420</p>
<p>限制大小: 2.0 Mb</p>
<p>支持.jpg,.png格式</p>
</div>
</el-upload>
</el-form-item>
<el-row>
<el-col :span="6">
<el-form-item label="配置证书">
<el-radio-group v-model="certificateLable" @change="selectCertificate">
<el-radio label="是"></el-radio>
<el-radio label="否"></el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="10" v-if="hasCertificate">
<el-form-item label="选择证书" prop="certificateId">
<el-select v-model="portalComponent.certificateId" @change="selectChange" placeholder="请选择证书" style="width: 352px;">
<el-option
v-for="(item,index) in certificateIdSelect"
:key="index"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-form-item v-if="hasCertificate" label="组件完成(%)" prop="certificateCondition">
<el-input-number
v-model="portalComponent.certificateCondition"
controls-position="right"
@change="handleChange"
:step="10"
:min="10"
:max="100">
</el-input-number>
</el-form-item>
</el-form>
</div>
<div class="" v-if="stepNum == 2">
<div class="model-btn">
<el-button v-if="idType == 1" :disabled="conditionSelect" type="primary" size="small" @click="addModule">添加空白模块</el-button>
<el-button :disabled="conditionSelect" type="primary" size="small" @click="addFromModule" style="margin-left:0;">从预设模块添加</el-button>
</div>
<div class="tab-content">
<el-tabs type="card" v-model="firstTab" :closable="!conditionSelect" @tab-remove="removeTab">
<el-tab-pane v-for="(item,index) in componentList.moduleModelList" :key="index" :label="'模块' + parseInt(index + 1)" :name='"" + parseInt(index + 1)'>
<div>
<el-form ref="moduleForm" :model="item" :rules="moduleRules" label-suffix=":" label-width="130px" style="width:100%;">
<el-row>
<el-col :span="10">
<el-form-item label="模块名称" prop="name">
<el-input v-model="item.name" :disabled="conditionSelect || idType == 2 || item.moduleType == 2 || (item.id != '' && item.openFlag == 2)" size="mini" placeholder="请选择模块名称" style="width:288px;"></el-input>
</el-form-item>
</el-col>
<el-col :span="10" v-if="idType == 1">
<el-form-item label="是否对外开放" prop="openFlag">
<el-radio-group v-model="item.openFlag" @change="selectIsOpen(index)" :disabled="conditionSelect || item.moduleType == 2 || (item.id != '' && item.openFlag == 2)">
<el-radio :label="2" @change="moduleOpenChange"></el-radio>
<el-radio :label="1" @change="moduleOpenChange"></el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div class="template-btn" v-if="idType == 1">
<span class="word-size">添加一个模板</span>
<el-button
:disabled="conditionSelect || item.moduleType == 2 || (item.id != '' && item.openFlag == 2)"
v-for="(_item,_index) in templateDataList"
:key="_index"
type="primary"
size="small"
@click="addTemplate(_item,index)"
style="margin-right:0px;">{{_item.name}}</el-button>
</div>
<div v-for="(item1,index1) in item.templetModelList" :key="index1">
<el-form ref="templateForm" :model="item1" label-suffix=":" label-width="110px" style="width:100%;">
<div class="template-content">
<div class="template-content-div">
<div class="title">
{{item1.name}}
<span v-if="conditionAnd && item.moduleType == 1 && (item.id == '' || (item.id != '' && item.openFlag == 1)) && idType == 1">
变更顺序:
<i class="el-icon-caret-bottom" @click="sortUp(index,index1)" style="font-size:17px;"></i>
<i class="el-icon-caret-top" @click="sortDown(index,index1)" style="font-size:17px;"></i>
<i class="el-icon-delete" @click="deleteTemplate(index,index1)" style="color:red;"></i>
</span>
</div>
<div v-for="(item2,index2) in item1.partModelList" :key="index2">
<!-- 考试 -->
<div v-if="item2.type == 1">
<div class="partText" v-if="index2 > 0">{{item2.introduce}}</div>
<div v-for="(item3,index3) in item2.partContentModelList" :key="index3">
<el-row>
<el-col :span="10" class="item-icon">
<span class="require">*</span>
<el-form-item label="考试名称">
<el-input v-model="item3.content1" :disabled="conditionSelect || item.moduleType == 2 || (item.id != '' && item.openFlag == 2) || idType == 2" size="mini" maxlength='30' placeholder="请输入考试名称" style="width:288px;"></el-input>
<span v-if="conditionAnd && item2.numFlag == 2 && index3 == 0 && item.moduleType == 1 && idType == 1 && (item.id == '' || (item.id != '' && item.openFlag == 1))"><i class="el-icon-circle-plus" @click="addMatterCourse(index,index1,index2)" style="color:#449284;"></i></span>
<span v-if="conditionAnd && item2.numFlag == 2 && index3 > 0 && item.moduleType == 1 && idType == 1 && (item.id == '' || (item.id != '' && item.openFlag == 1))"><i class="el-icon-delete" @click="deleteMatterCourse(index,index1,index2,index3)" style="color:red;"></i></span>
</el-form-item>
</el-col>
<el-col :span="10" class="item-icon">
<span class="require">*</span>
<el-form-item label="关联考试">
<el-select v-model="item3.content2" @focus="examIDfocus(index,index1,index2,index3)" @change="changeExamID" :disabled="conditionSelect || item.moduleType == 2 || idType == 2 || (item.id != '' && item.openFlag == 2)" size="mini" placeholder="请选择考试ID" style="width:288px;">
<el-option
v-for="(itemTest,indexTest) in testIdSelect"
:key="indexTest"
:label="itemTest.onlineExamName"
:value="itemTest.id + ''">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="10" class="item-icon">
<span class="require">*</span>
<el-form-item label="配置证书">
<el-radio-group v-model="item3.certificateFlag" :disabled="conditionSelect || item.moduleType == 2 || idType == 2 || (item.id != '' && item.openFlag == 2)">
<el-radio :label="2"></el-radio>
<el-radio :label="1"></el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="10" v-if="item3.certificateFlag == 2" class="item-icon">
<span class="require">*</span>
<el-form-item label="选择证书">
<el-select v-model="item3.content3" :disabled="conditionSelect || item.moduleType == 2 || idType == 2 || (item.id != '' && item.openFlag == 2)" size="mini" placeholder="请选择证书" style="width:288px;">
<el-option
v-for="(itemCertificate,indexCertificate) in certificateIdSelect"
:key="indexCertificate"
:label="itemCertificate.name"
:value="itemCertificate.id + ''">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
</div>
</div>
<!-- 课程 -->
<div v-if="item2.type == 2">
<div class="partText" v-if="index2 > 0">{{item2.introduce}}</div>
<el-row v-for="(item3,index3) in item2.partContentModelList" :key="index3">
<el-col :span="10" class="item-icon">
<span class="require">*</span>
<el-form-item label="课程名称">
<el-input v-model="item3.content1" :disabled="conditionSelect || item.moduleType == 2 || idType == 2 || (item.id != '' && item.openFlag == 2)" size="mini" maxlength='30' placeholder="请输入课程名称" style="width:288px;"></el-input>
<span v-if="conditionAnd && item2.numFlag == 2 && index3 == 0 && item.moduleType == 1 && idType == 1 && (item.id == '' || (item.id != '' && item.openFlag == 1))"><i class="el-icon-circle-plus" @click="addMatterCourse(index,index1,index2)" style="color:#449284;"></i></span>
<span v-if="conditionAnd && item2.numFlag == 2 && index3 > 0 && item.moduleType == 1 && idType == 1 && (item.id == '' || (item.id != '' && item.openFlag == 1))"><i class="el-icon-delete" @click="deleteMatterCourse(index,index1,index2,index3)" style="color:red;"></i></span>
</el-form-item>
</el-col>
<el-col :span="10" class="item-icon">
<span class="require">*</span>
<el-form-item label="关联课程">
<el-select v-model="item3.content2" @focus="courseIDfocus(index,index1,index2,index3)" @change="changeCourseID" :disabled="conditionSelect || item.moduleType == 2 || idType == 2 || (item.id != '' && item.openFlag == 2)" size="mini" placeholder="请选择课程ID" style="width:288px;">
<el-option
v-for="(itemCourse,indexCourse) in courseIdSelect"
:key="indexCourse"
:label="itemCourse.name"
:value="itemCourse.id + ''">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
</div>
</div>
</div>
</div>
</el-form>
</div>
</div>
</el-tab-pane>
</el-tabs>
</div>
</div>
</div>
<el-dialog :title="dialogTitle" :visible.sync="columnFormVisible" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false">
<el-form ref="resourceForm" class="creat-form" :model="selectResource" label-width="145px" label-suffix=":" size="mini">
<el-form-item label="请选择一个模块" prop="">
<el-select v-model="selectResource.resourceModuleSelect" @change="selectChange" placeholder="请选择资源包" style="width:60%;">
<el-option
v-for="(item,index) in resourceArray"
:key="index"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-form>
<div class="default-module" v-for="(item,index) in dialogData.templetModelList" :key="index">
<el-form ref="dialogEmplateForm" label-suffix=":" label-width="80px" style="width:100%;">
<div class="dialog-template-content">
<div v-for="(item1,index1) in item.partModelList" :key="index1">
<!-- 考试 -->
<div v-if="item1.type == 1">
<div v-for="(item2,index2) in item1.partContentModelList" :key="index2">
<el-row>
<el-col :span="10">
<el-form-item label="考试名称">
<span>{{item2.content1}}</span>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="10">
<el-form-item label="配置证书">
<span v-if="item1.content2"></span>
<span v-else></span>
</el-form-item>
</el-col>
</el-row>
</div>
</div>
<!-- 课程 -->
<div v-if="item1.type == 2">
<el-row v-for="(item2,index2) in item1.partContentModelList" :key="index2">
<el-col :span="10">
<el-form-item label="课程名称">
<span>{{item2.content1}}</span>
</el-form-item>
</el-col>
</el-row>
</div>
</div>
</div>
</el-form>
</div>
<span slot="footer" class="dialog-footer dialog-foot">
<el-button type="default" size="small" @click="columnFormVisible = false">取 消</el-button>
<el-button type="primary" size="small" @click="submitDialog">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import BreadCrumb from '../../components/breadcrumb.vue'
import { doUpload, getFilePath } from "../../utils/qiniu-util"
// import { validateWord150 } from "../../utils/validate.js"
import { mapGetters } from 'vuex'
import { openLoading, closeLoading, isNotEmptyUtils, isEmptyList } from '../../utils/utils'
import * as commonUtil from '../../utils/utils'
let vm = null
// 判断组件是否重名
let validateRepeatWord = function(rule, value, callback, message) {
let req = {
token: vm._token,
name: value,
idType: vm.idType // 1内部 2外部
}
if(vm.itemName != value) {
vm.GET('portal/portalComponent/checkComponentName',req).then((res) => {
if(res.code == '000000') {
if(res.data.resultFlag == 2) {
callback(new Error(message))
}else {
callback()
}
}
})
}else {
callback()
}
}
// 判断模块是否重名(对外开放时候验证)
let validateModuleName = function(rule, value, callback, message) {
for(let i = 0;i<vm.componentList.moduleModelList.length;i++) {
if(vm.componentList.moduleModelList[i].openFlag == 2) {
vm.GET('portal/portalComponent/checkModuleName',{name: value}).then((res) => {
if(res.code == '000000') {
if(res.data.resultFlag > 0) {
callback(new Error(message))
return
}else {
callback()
}
}
})
}else {
callback()
}
}
}
export default {
components: {
BreadCrumb
},
data() {
return {
columnFormVisible: false,
itemName: '',
examName: '',
examIndex: '',
examIndex1: '',
examIndex2: '',
examIndex3: '',
courseName: '',
courseIndex: '',
courseIndex1: '',
courseIndex2: '',
courseIndex3: '',
stepNum: 1,
componentId: '',
componentStatus: '',
resultFlag: '',
conditionSelect: false,
conditionAnd: true,
isStorage: false,
dialogTitle: '选择模板',
curmbFirst: '教培项目',
curmbSecond: '项目组件',
curmbThird: '新增项目组件',
jumPathThird: '/item-component',
firstTab: '1',
hasCertificate: false,
certificateLable: '否',
portCertificateLable: '否',
moduleIndex: '',
editableTabs: [{
title: '模块 1',
name: '1'
}],
templateDataList: [],
templetIndex: 0,
testIdSelect: [], // 考试ID下拉列表
certificateIdSelect: [], // 证书下拉列表
courseIdSelect: [], // 课程下拉列表
dialogData: [],
portalComponent: {
idType: '',
organizationId: '',
name: '',
id: '',
introduce: '',
imageUrl:'',
seqNo: '',
certificateId: '', // 0 没有证书,配置证书为否
certificateCondition: '60', // 证书完成率
status: ''
},
componentList: {
moduleModelList: [{
id: '',
name: '',
openFlag: '', // 1不开放 2开放
templetModelList: []
}]
},
resourceArray: [],
selectResource: {
resourceModuleSelect: ''
},
rules: {
"name": [
{ required: true, message: '输入组件名称', trigger: 'blur' },
{ min: 2, max: 20, message: '输入长度为2-20个字符', trigger: 'blur' },
{ validator: function(rule, value, callback) {
validateRepeatWord(rule, value, callback, '该组件名称已存在,请使用一个新的组件名称')
},
trigger: 'blur' }
],
"introduce": [
{ required: true, message: '请输入组件简介', trigger: 'blur' },
{ min: 1, max: 150, message: '超出可输入的最大长度', trigger: 'blur' }
],
"imageUrl": [
{ required: true, message: '请上传组件图片', trigger: 'blur' },
],
"certificateId": [
{ required: true, message: '请选择证书', trigger: 'blur' },
],
"certificateCondition": [
{ required: true, message: '请选择获得证书完成率', trigger: 'blur' },
]
},
moduleRules: {
"name": [
{ required: true, message: '请输入模块名称', trigger: 'blur' },
{ min: 2, max: 20, message: '输入长度为2-20个字符', trigger: 'blur' },
{ validator: function(rule, value, callback) {
validateModuleName(rule, value, callback, '模块名称已存在,请修改名称后保存')
},
trigger: 'blur' }
],
"openFlag": [
{ required: true, message: '请选择是否对外开放', trigger: 'blur' }
]
}
}
},
computed: {
...mapGetters([
'_token',
'idType'
])
},
created() {
vm = this
vm.componentId = vm.$route.query.id
vm.componentStatus = vm.$route.query.status // 3 启用 4 禁用
vm.resultFlag = vm.$route.query.resultFlag // 判断可编辑范围是基础信息还是全部信息 1 为全部 2 为基础
vm.getCertificateList() // 获取证书列表
vm.componentBasicInfo() // 根据ID查询组件基本信息
vm.conditionSelect = vm.resultFlag == 2 || vm.componentStatus == 3 || vm.componentStatus == 4
if(vm.componentStatus && vm.resultFlag) {
vm.conditionAnd = vm.resultFlag == 1 && vm.componentStatus != 3 && vm.componentStatus != 4
}
},
// 挂载到Dom完成时
mounted: function() {
commonUtil.resizeHeight()
},
methods: {
// 根据ID查询组件基本信息
componentBasicInfo() {
if(vm.componentId) {
openLoading(vm)
vm.GET('portal/portalComponent/queryPortalComponentById',{id: vm.componentId}).then((res) => {
closeLoading(vm)
if( res.code == '000000') {
vm.portalComponent = res.data.portalComponent
vm.itemName = vm.portalComponent.name
if(!vm.portalComponent.certificateId) {
vm.hasCertificate = false
vm.certificateLable = '否'
} else {
vm.hasCertificate = true
vm.certificateLable = '是'
}
}
})
}
},
// 是否配置证书
selectCertificate(val) {
vm.portalComponent.certificateId = ''
if(val == '否') {
vm.hasCertificate = false
vm.portalComponent.certificateCondition = 0
}else{
vm.hasCertificate = true
vm.portalComponent.certificateCondition = 60
}
},
// 获取组件完成率
handleChange(value) {
vm.portalComponent.certificateCondition = value
},
// 获取证书下拉列表
getCertificateList() {
vm.GET('portal/portalComponent/CertificateList').then((res) => {
if( res.code == '000000') {
vm.certificateIdSelect = res.data.certificateList
}
})
},
// 暂存(下一步)
storageAndNext(flag) {
vm.itemName = vm.portalComponent.name
if(vm.componentId) { // 编辑
vm.submitBasicData(flag,'portal/portalComponent/updatePortalComponent')
}else{ // 新增
vm.submitBasicData(flag,'portal/portalComponent/insertPortalComponent')
}
},
submitBasicData(flag,url) {
if(flag == 1) { // 暂存
vm.portalComponent.status = 1
if(!vm.portalComponent.name) {
vm.isStorage = true
return
}else{
vm.isStorage = false
}
vm.submitBasic(flag,url)
}else{ // 下一步
vm.isStorage = false
if(!vm.componentId) {
vm.portalComponent.status = 1
}
vm.$refs.basicInfoForm.validate((valid) => {
if (valid) {
vm.submitBasic(flag,url)
} else {
return false
}
})
}
},
componentName() {
vm.isStorage = false
},
submitBasic(flag,url) {
vm.portalComponent.idType = vm.idType
vm.portalComponent.id = vm.componentId
vm.POST(url,{ model: vm.portalComponent }).then((res) => {
if( res.code == '000000') {
if(!vm.componentId) {
vm.componentId = res.data
}
if(flag == 2) {
vm.stepNum = 2
vm.getTemplateData()
vm.getModuleData()
vm.getTestListData()
vm.getCourseData()
} else {
vm.$message.info("暂存成功!")
}
}
})
},
// 上传组件图片
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg'
const isPNG = file.type === 'image/png'
const isLt2M = file.size / 1024 / 1024 < 2
if ( !isJPG && !isPNG && !isLt2M ) {
vm.$message.error('图片不符合规范,请根据规范上传图片')
return;
}
let _img = new FileReader()
_img.readAsDataURL(file)
_img.onload = function(theFile) {
let image = new Image()
image.src = theFile.target.result
image.onload = function() {
let _this = this
if(_this.width != 750 || _this.height != 420) {
vm.$message.info('图片不符合规范,请根据规范上传图片')
}else {
openLoading(vm)
doUpload(vm,file, getFilePath(file,null), 'preview4', 'progress1', 1).then(function (path) {
closeLoading(vm)
vm.portalComponent.imageUrl = path.fullPath
});
}
}
}
},
// 获取考试下拉列表
getTestListData() {
vm.GET('portal/portalComponent/OnlineExamList').then((res) => {
if( res.code == '000000') {
vm.testIdSelect = res.data.onlineExamList
}
})
},
// 根据考试ID填充考试名称
changeExamID(value) {
let examName = ''
for(let i = 0;i<vm.testIdSelect.length;i++) {
if(value == vm.testIdSelect[i].id) {
examName = vm.testIdSelect[i].onlineExamName
}
}
if(!vm.componentList.moduleModelList[vm.examIndex].templetModelList[vm.examIndex1].partModelList[vm.examIndex2].partContentModelList[vm.examIndex3].content1) {
vm.componentList.moduleModelList[vm.examIndex].templetModelList[vm.examIndex1].partModelList[vm.examIndex2].partContentModelList[vm.examIndex3].content1 = examName
}
},
examIDfocus(index,index1,index2,index3) {
vm.examIndex = index
vm.examIndex1 = index1
vm.examIndex2 = index2
vm.examIndex3 = index3
},
// 获取课程下拉列表
getCourseData() {
vm.GET('portal/portalComponent/CourseList').then((res) => {
if( res.code == '000000') {
vm.courseIdSelect = res.data.courseList
}
})
},
// 根据课程ID填充课程名称
changeCourseID(value) {
let courseName = ''
for(let i = 0;i<vm.courseIdSelect.length;i++) {
if(value == vm.courseIdSelect[i].id) {
courseName = vm.courseIdSelect[i].name
}
}
if(!vm.componentList.moduleModelList[vm.courseIndex].templetModelList[vm.courseIndex1].partModelList[vm.courseIndex2].partContentModelList[vm.courseIndex3].content1) {
vm.componentList.moduleModelList[vm.courseIndex].templetModelList[vm.courseIndex1].partModelList[vm.courseIndex2].partContentModelList[vm.courseIndex3].content1 = courseName
}
},
courseIDfocus(index,index1,index2,index3) {
vm.courseIndex = index
vm.courseIndex1 = index1
vm.courseIndex2 = index2
vm.courseIndex3 = index3
},
// 获取默认模板
getTemplateData() {
vm.GET('portal/portalComponent/TempletConfigList').then((res) => {
if( res.code == '000000') {
vm.templateDataList = res.data.templetConfigModelList
}
})
},
// 通过编辑获取模块信息
getModuleData() {
vm.GET('portal/portalComponent/ModuleList',{componentId: vm.componentId}).then((res) => {
if( res.code == '000000') {
vm.componentList.moduleModelList = res.data.moduleModelList
}
})
},
// 模块是否对外开放
selectIsOpen(index) {
vm.moduleIndex = index
vm.componentList.moduleModelList[index].openFlag = vm.componentList.moduleModelList[index].openFlag == 1 ? 2 : 1
},
moduleOpenChange(value) {
for(let i = 0; i < vm.componentList.moduleModelList.length; i++) {
if(vm.moduleIndex == i) {
if(value == '1') {
vm.componentList.moduleModelList[i].openFlag = 2
}else{
vm.componentList.moduleModelList[i].openFlag = 1
}
break
}
}
},
// 删除tab
removeTab(targetName) {
for(let i = 0;i<vm.componentList.moduleModelList.length;i++) {
if((targetName - 1) == i) {
// if(vm.componentList.moduleModelList[i].id) {
// if(vm.componentList.moduleModelList[i].templetModelList) {
// vm.$confirm('删除模块会将改模块下已有模板同时删除,确认需要删除吗?', '提示', {
// confirmButtonText: '确定',
// cancelButtonText: '取消',
// type: 'warning'
// }).then(() => {
// vm.GET('portal/portalComponent/deletePortalModuleById',{id:vm.componentList.moduleModelList[i].id}).then((res) => {
// if( res.code == '000000') {
// vm.$message.info('成功删除模块!')
// }
// vm.getModuleData()
// vm.firstTab = i + ''
// })
// }).catch(() => {
// vm.$message({
// type: 'info',
// message: '已取消删除'
// })
// })
// }else {
// vm.GET('portal/portalComponent/deletePortalModuleById',{id:vm.componentList.moduleModelList[i].id}).then((res) => {
// if( res.code == '000000') {
// vm.$message.info('成功删除模块!')
// }
// vm.getModuleData()
// vm.firstTab = i + ''
// })
// }
// }else {
// vm.componentList.moduleModelList.splice(i,1)
// vm.firstTab = i + ''
// }
if(vm.componentList.moduleModelList[i].templetModelList) {
vm.$confirm('删除模块会将改模块下已有模板同时删除,确认需要删除吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
if(vm.componentList.moduleModelList[i].id) {
vm.GET('portal/portalComponent/deletePortalModuleById',{id:vm.componentList.moduleModelList[i].id}).then((res) => {
if( res.code == '000000') {
vm.$message.info('成功删除模块!')
}
vm.getModuleData()
vm.firstTab = i + ''
})
}else {
vm.componentList.moduleModelList.splice(i,1)
vm.firstTab = i + ''
}
}).catch(() => {
vm.$message({
type: 'info',
message: '已取消删除'
})
})
}else {
vm.GET('portal/portalComponent/deletePortalModuleById',{id:vm.componentList.moduleModelList[i].id}).then((res) => {
if( res.code == '000000') {
vm.$message.info('成功删除模块!')
}
vm.getModuleData()
vm.firstTab = i + ''
})
}
break
}
}
},
// 添加空白模块
addModule() {
vm.componentList.moduleModelList.push({
id: '',
name: '',
openFlag: 1, // 1不开放 2开放
moduleType: 1, // 2为从预设模块中添加
templetModelList: []
})
},
// 添加模板
addTemplate(item,index) {
vm.templetIndex = vm.componentList.moduleModelList[index].templetModelList.length
vm.componentList.moduleModelList[index].templetModelList.push({
name: item.name,
type: item.type,
partModelList: []
})
for(let i = 0; i < item.partConfigModelList.length; i++) {
if(item.partConfigModelList[i].type == 1) { // 考试
vm.componentList.moduleModelList[index].templetModelList[vm.templetIndex].partModelList.push({
titleName: '',
type: 1, // 1考试 2课程
name: '',
id: '', // 新增时为空
seqNo: '',
conditionFlag: item.partConfigModelList[i].conditionFlag, // 1为没有限制 2有限制
numFlag: item.partConfigModelList[i].numFlag, // 1为单个 2为可以无限添加
templetSeqNo: '',
introduce: item.partConfigModelList[i].introduce,
partContentModelList: [{
certificateFlag: 1, // 是否有证书 1无 2有
id: '',
seqNo: '',
content1: '',
content2: '',
content3: ''
}]
})
}else if(item.partConfigModelList[i].type == 2) { // 课程
vm.componentList.moduleModelList[index].templetModelList[vm.templetIndex].partModelList.push({
titleName: '',
type: 2, // 1考试 2课程
name: '',
id: '', // 新增时为空
seqNo: '',
conditionFlag: item.partConfigModelList[i].conditionFlag, // 1为没有限制 2有限制
numFlag: item.partConfigModelList[i].numFlag, // 1为单个 2为可以无限添加
templetSeqNo: '',
introduce: item.partConfigModelList[i].introduce,
partContentModelList: [{
id: '',
seqNo: '',
content1: '',
content2: ''
}]
})
}
}
vm.templetIndex ++
},
// 删除模板
deleteTemplate(index,index1) {
for(let i = 0; i < vm.componentList.moduleModelList.length; i++) {
if(index == i) {
if(vm.componentList.moduleModelList[i].templetModelList[index1].id) {
vm.GET('portal/portalComponent/deletePortalTemplateById',{id: vm.componentList.moduleModelList[i].templetModelList[index1].id}).then((res) => {
if( res.code == '000000') {
vm.$message.info('成功删除模板!')
vm.getModuleData()
}
})
} else {
vm.componentList.moduleModelList[i].templetModelList.splice(index1,1)
}
break
}
}
},
// 添加多个课程
addMatterCourse(index,index1,index2) {
for(let i = 0; i < vm.componentList.moduleModelList.length; i++) {
if(index == i) {
for(let j = 0; j < vm.componentList.moduleModelList[i].templetModelList.length; j++) {
if(index1 == j) {
for(let q = 0; q < vm.componentList.moduleModelList[i].templetModelList[j].partModelList.length;q++){
if(index2 == q) {
vm.componentList.moduleModelList[i].templetModelList[j].partModelList[q].partContentModelList.push({
id: '',
seqNo: '',
content1: '',
content2: ''
})
break
}
}
break
}
}
break
}
}
},
// 删除多个课程(多个考试)元件
deleteMatterCourse(index,index1,index2,index3) {
for(let i = 0; i < vm.componentList.moduleModelList.length; i++) {
if(index == i) {
for(let j = 0; j < vm.componentList.moduleModelList[i].templetModelList.length; j++) {
if(index1 == j) {
for(let q = 0; q < vm.componentList.moduleModelList[i].templetModelList[j].partModelList.length;q++){
if(index2 == q) {
if(vm.componentList.moduleModelList[i].templetModelList[j].partModelList[q].partContentModelList[index3].id) {
vm.GET('portal/portalComponent/deletePortalPartById',{id: vm.componentList.moduleModelList[i].templetModelList[j].partModelList[q].partContentModelList[index3].id}).then((res) => {
if( res.code == '000000') {
vm.$message.info('成功删除模板元件内容!')
vm.getModuleData()
}
})
}else{
vm.componentList.moduleModelList[i].templetModelList[j].partModelList[q].partContentModelList.splice(index3,1)
}
break
}
}
break
}
}
break
}
}
},
// 模板下移
sortUp(index,index1) {
for(let i = 0; i < vm.componentList.moduleModelList.length; i++) {
if(index == i) {
if(index1 != vm.componentList.moduleModelList[i].templetModelList.length - 1) { // 判断是最后一个不能下移
let temp = vm.componentList.moduleModelList[i].templetModelList[index1]
vm.$set(vm.componentList.moduleModelList[i].templetModelList,index1,vm.componentList.moduleModelList[i].templetModelList[index1 + 1])
vm.$set(vm.componentList.moduleModelList[i].templetModelList,parseInt(index1+1),temp)
}
break
}
}
},
// 模板下移
sortDown(index,index1) {
for(let i = 0; i < vm.componentList.moduleModelList.length; i++) {
if(index == i) {
if(index1 != 0) { // 判断是第一个不能上移
let temp = vm.componentList.moduleModelList[i].templetModelList[index1]
vm.$set(vm.componentList.moduleModelList[i].templetModelList,index1,vm.componentList.moduleModelList[i].templetModelList[index1 - 1])
vm.$set(vm.componentList.moduleModelList[i].templetModelList,parseInt(index1-1),temp)
}
break
}
}
},
// 完成(暂存)
finishConponent(flag) {
let req = null
if(vm.componentList.moduleModelList && vm.componentList.moduleModelList.length > 0) {
for(let i = 0; i < vm.componentList.moduleModelList.length; i++) {
if(flag == 2) { // 完成
req = {
id: vm.componentId,
status: 2
}
if(!vm.componentList.moduleModelList[i].name) {
vm.$message.info("请输入模块名称")
return
}
if(isEmptyList(vm.componentList.moduleModelList[i].templetModelList)) {
vm.$message.info("模块内容不能为空")
return
}
for(let j = 0; j < vm.componentList.moduleModelList[i].templetModelList.length; j++) {
for(let k = 0; k < vm.componentList.moduleModelList[i].templetModelList[j].partModelList.length; k++) {
if(!vm.componentList.moduleModelList[i].templetModelList[j].partModelList[k].partContentModelList[0].content1) {
vm.$message.info( vm.componentList.moduleModelList[i].templetModelList[j].name + "中名称为空,请添加内容后保存")
return
}
}
}
}else{ // 暂存
req = {
id: vm.componentId,
status: 1
}
}
vm.componentList.moduleModelList[i].componentId = vm.componentId
}
vm.finishModule(req,flag)
}else {
vm.$message.info("请添加有效模块后再保存")
return
}
},
finishModule(req, flag) {
vm.POST('portal/portalComponent/insertOrUpdatePortalModule',{model: vm.componentList.moduleModelList,status: flag}).then((res) => {
if( res.code == '000000') {
vm.enableComponent(req, flag)
}
})
},
// 启用
enableComponent(req, flag) {
vm.GET('portal/portalComponent/disableOrStart',req).then((res) => {
if(res.code == "000000") {
if(flag == 2) {
vm.$router.push({ path: 'item-component' })
} else {
vm.$message.info("暂存成功!")
}
} else {
vm.$message({
message: res.message,
type: 'warning'
});
}
})
},
// 从资源包中添加模块
addFromModule() {
vm.columnFormVisible = true
vm.GET('portal/portalComponent/ModuleList',{openFlag: 2}).then((res) => {
if( res.code == '000000') {
vm.resourceArray = res.data.moduleModelList
for(let i = 0; i < vm.componentList.moduleModelList.length; i++) {
vm.compareArray(vm.componentList.moduleModelList[i].id)
}
}
})
},
compareArray(id) {
for(let j = 0; j < vm.resourceArray.length; j++) {
if( id == vm.resourceArray[j].id) {
vm.resourceArray.splice(j,1)
}
}
},
// 选择资源包
selectChange(val) {
if(vm.resourceArray && vm.resourceArray.length > 0) {
for(let i = 0; i < vm.resourceArray.length; i++) {
if(val == vm.resourceArray[i].id) {
vm.dialogData = vm.resourceArray[i]
break
}
}
}
},
// 确定选择预设模块
submitDialog() {
vm.columnFormVisible = false
if(isNotEmptyUtils(vm.dialogData)) {
vm.dialogData.moduleType = 2
vm.dialogData.mappingId = null
vm.componentList.moduleModelList.push(vm.dialogData)
vm.firstTab = vm.componentList.moduleModelList.length + ''
vm.dialogData = []
vm.selectResource.resourceModuleSelect = ''
}
}
}
}
</script>
<style lang="scss">
.create-component-wrap {
.create-content {
background: #fff;
}
.first-step {
padding-top: 20px;
.el-form-item {
margin-bottom: 25px;
}
.bg-img {
width: 84px;
height: 100px;
}
.word-num {
font-size: 12px;
color: #999;
padding-top: 5px;
}
.bg-uploader {
img {
float: left;
}
.limit-text {
float: left;
margin-left: 10px;
padding-top: 20px;
p {
font-size: 12px;
color: #999;
}
}
}
.component-name {
color: #F56C6C;
font-size: 12px;
line-height: 1;
padding-top: 1px;
position: absolute;
top: 100%;
left: 0;
}
}
.step-content {
overflow: hidden;
height: 60px;
border-bottom: 1px solid #efefef;
.el-step.is-simple .el-step__head {
display: none;
}
.class-1 {
color: #449284;
border: 1px solid #449284 !important;
}
.class-2 {
color: #999;
border: 1px solid #999 !important;
}
.class-1-text .el-step__title{
color: #449284 !important;
}
.class-2-text .el-step__title{
color: #999 !important;
}
.el-steps--simple {
float: left;
padding: 20px 0 0 5%;
width: 350px;
background: #fff;
.el-step__icon {
display: none;
}
.el-step__title {
font-size: 12px;
}
.el-step.is-simple .el-step__arrow::after, .el-step.is-simple .el-step__arrow::before {
height: 11px;
}
.step-one, .step-two {
display: block;
font-size: 12px;
border: 1px solid #ccc;
border-radius: 50%;
width: 22px;
height: 16px;
line-height: 13px;
padding-left: 3px;
margin-top: 3px;
margin-right: 10px;
}
}
.btn-container {
float: right;
margin: 12px 20px 0;
span {
display: inline-block;
width: 40px;
line-height: 12px;
}
button:nth-child(2) span {
color: #fff;
}
}
}
.model-btn {
padding: 20px;
span {
color: #fff;
}
}
.tab-content {
.el-tabs__header {
margin-left: 20px;
.el-tabs__item {
font-size: 12px;
}
}
.template-btn {
background: #F3F3F3;
padding: 10px;
}
.template-content-div {
margin: 20px;
border-bottom: 1px dotted #ccc;
.title {
margin-bottom: 20px;
span {
float: right;
color: #666;
font-size: 12px;
}
}
.item-icon {
position: relative;
span.require {
position: absolute;
left: 37px;
top: 12px;
color: #F56C6C;
}
}
}
.matter-test,.train-test, .matter-train-test{
.tip {
font-size: 12px;
color: #aaa;
margin-left: 57px;
margin-bottom: 20px;
}
}
.partText {
font-size: 12px;
margin-left: 44px;
color: #999;
padding: 0px 0 15px;
}
}
.module-form {
.el-input__inner {
border: none;
}
.el-select .el-input__inner{
border: 1px solid #dcdfe6;
}
}
.el-dialog {
.el-dialog__header {
padding: 15px;
border-bottom: 1px solid #e1e1e1;
.el-dialog__title {
color: #449284;
font-size: 16px;
}
}
.el-dialog__footer {
text-align: center;
padding-top: 30px;
// border-top: 1px solid #e1e1e1;
}
.default-module {
border-bottom: 1px dotted #e1e1e1;
.dialog-template-content {
input {
border: none;
}
.el-form-item {
margin-bottom: 0px;
}
span {
font-size: 12px;
}
}
}
}
}
</style>
<template>
<div class="item-component-wrap">
<bread-crumb
:curmbFirst="curmbFirst"
:curmbSecond="curmbSecond">
</bread-crumb>
<div class="component-content screenSet" id="screenSet">
<div class="search-title">查询条件</div>
<el-row :gutter="30" class="row" type="flex" style="margin-top: 10px;">
<el-form ref="serchForm" :model="searchParam" label-width="75px" style="width:100%;">
<el-col :span="6">
<el-form-item label="组件名称:">
<el-input v-model="searchParam.name" size="mini" placeholder="请输入组件名称"></el-input>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="发布状态:">
<el-select v-model="searchParam.status" size="mini" placeholder="请选择发布状态">
<el-option
v-for="(item,index) in statuSelect"
:key="index"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="13" style="padding:0;text-align:right;padding-right:15px;">
<el-button type="primary" size="small" @click="search">查询</el-button>
<el-button type="default" size="small" @click="reseat" style="margin-left:0;">重置</el-button>
</el-col>
</el-form>
</el-row>
<el-row :gutter="10" class="row create-button" style="margin-right:0;">
<el-button type="primary" size="small" @click="createComponent">新建项目组件</el-button>
</el-row>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column prop="id" label="ID编号" min-width="100" align="center"></el-table-column>
<el-table-column prop="name" label="组件名称" min-width="200" align="center"></el-table-column>
<el-table-column prop="createdName" label="发起人" min-width="100" align="center"></el-table-column>
<el-table-column prop="status" label="状态" min-width="80" align="center">
<template slot-scope="scope">
<span>{{ scope.row.status | statusFileter }}</span>
</template>
</el-table-column>
<el-table-column label="操作" fixed="right" align="center" min-width="200">
<template slot-scope="scope">
<el-button type="primary" size="small" @click="editComponentList(scope.row)">编辑</el-button>
<el-button type="primary" v-if="scope.row.status == 2 || scope.row.status == 4" size="small" @click="enableAndDisable(scope.row,1)">启用</el-button>
<el-button type="primary" v-if="scope.row.status == 3" size="small" @click="enableAndDisable(scope.row,2)">禁用</el-button>
<el-button type="primary" v-if="scope.row.status == 1 || scope.row.status == 2" size="small" @click="deleteComponent(scope.row)">删除</el-button>
</template>
</el-table-column>
<div slot="empty">
<div class="table-empty">
<img src="../../assets/image/no-content1.png" />
<p>没有查询到相关结果</p>
</div>
</div>
</el-table>
<!-- 分页 -->
<div class="pagination">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="searchParam.pageNo"
:page-sizes="[15, 30, 50, 100, 200, 500, 700, 1000, 1500, 2000]"
:page-size="searchParam.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="totalRows">
</el-pagination>
</div>
</div>
</div>
</template>
<script>
import BreadCrumb from '../../components/breadcrumb.vue'
import { doUpload, getFilePath } from "../../utils/qiniu-util"
import { validateWord } from "../../utils/validate.js"
import { mapGetters } from 'vuex'
import { openLoading, closeLoading } from '../../utils/utils'
import * as commonUtil from '../../utils/utils'
let vm = null
export default {
components: {
BreadCrumb
},
data() {
return {
curmbFirst: '教培项目',
curmbSecond: '项目组件',
searchParam: {
idType: '',
name: '',
status: '',
pageNo: 1,
pageSize: 15
},
statuSelect: [
{
label: '草稿',
value: '1'
},{
label: '未启用',
value: '2'
},{
label: '已启用',
value: '3'
},{
label: '已禁用',
value: '4'
}
],
tableData: [],
totalRows: 0,
basicRule: {
"name": [
{ required: true, message: '输入长度为2-20个中文', trigger: 'blur' },
{ validator: function(rule, value, callback) {
validateWord(rule, value, callback, '输入长度为2-20个中文')
},
trigger: 'blur' }
],
"introduce": [
{ required: true, message: '请输入组件简介', trigger: 'blur' },
],
}
}
},
computed: {
...mapGetters([
'_token',
'idType'
])
},
created() {
vm = this
vm.search()
},
// 挂载到Dom完成时
mounted: function() {
commonUtil.resizeHeight()
},
methods: {
// 列表查询
search() {
vm.searchParam.idType = vm.idType
openLoading(vm)
vm.GET('portal/portalComponent/queryPortalComponent',vm.searchParam).then((res) => {
closeLoading(vm)
if( res.code == '000000' ) {
vm.tableData = res.data.queryList
vm.totalRows = res.data.total
}
})
},
// 重置
reseat() {
vm.searchParam = Object.assign({},{
idType: '',
name: '',
status: '',
pageNo: 1,
pageSize: 15
})
vm.search()
},
// 新建组件
createComponent() {
vm.$router.push({path: 'create-component'})
},
// 编辑(验证可编辑范围)
editComponentList(row) {
let req = {
token: vm._token,
componentId: row.id
}
vm.GET('portal/portalComponent/componentEditRange',req).then((res) => {
if(res.code == "000000") {
vm.$router.push({path: 'create-component',query: {id:row.id,status: row.status,resultFlag: res.data.resultFlag}})
}
})
},
// 启用(禁用)
enableAndDisable(row,flag) {
let req = null
let text = ''
if(flag == 1) { // 启用
req = {
id: row.id,
status: 3
}
text = '组件一经启用,将无法进行修改,确定启用吗?'
}else if(flag == 2) { // 禁用
req = {
id: row.id,
status: 4
}
text = '确定禁用吗?'
}
vm.$confirm(text, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
vm.GET('portal/portalComponent/disableOrStart',req).then((res) => {
if(res.code == "000000") {
vm.$message({
type: 'success',
message: '操作成功!'
});
vm.search()
if(res.message != 'success') {
vm.$message({
message: res.message,
type: 'warning'
})
}
}
}).catch(function (error) {
vm.$message.error(error);
});
}).catch(() => {
vm.$message({
type: 'info',
message: '已取消'
});
});
},
// 删除
deleteComponent(row) {
vm.$confirm('确定要删除该组件吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
vm.GET('portal/portalComponent/deleteComponentById',{id: row.id}).then((res) => {
if(res.code == "000000") {
vm.$message({
type: 'success',
message: '删除成功!'
});
vm.search()
}
}).catch(function (error) {
vm.$message.error(error);
});
}).catch(() => {
vm.$message({
type: 'info',
message: '已取消'
})
})
},
handleSizeChange(value) {
vm.searchParam.pageSize = value
vm.search()
},
handleCurrentChange(value) {
vm.searchParam.pageNo = value
vm.search()
}
}
}
</script>
<style lang="scss">
.item-component-wrap {
.component-content {
padding: 10px;
background: #fff;
// margin: 84px 20px 20px;
.search-title {
padding: 10px 12px;
font-size: 12px;
color: #449284;
border-bottom: 1px solid #efefef;
}
.create-button {
padding: 0 0 15px;
margin-top: 0 !important;
text-align: right;
}
.table-empty {
img{
width: 100px;
}
p {
margin-top: -50px;
}
}
}
}
</style>
<template>
<div class="item-manager-wrap">
<bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
<div class="component-content screenSet" id="screenSet">
<div class="header-title">项目管理</div>
<el-row :gutter="30" class="row" type="flex" style="margin-top: 10px;">
<el-form ref="formInline" :model="formInline" label-width="75px" style="width:100%;">
<el-col :span="5">
<el-form-item label="项目名称:">
<el-input v-model="formInline.projectName" size="mini" placeholder="请输入项目名称"></el-input>
</el-form-item>
</el-col>
<!-- <el-col :span="8">
<el-form-item label="项目时间:">
<el-date-picker
v-model="formInline.duringTime"
size="mini"
type="daterange"
start-placeholder="请选择开始时间"
end-placeholder="请选择结束时间"
value-format="yyyy-MM-dd HH:mm:ss"
></el-date-picker>
</el-form-item>
</el-col>-->
<el-col :span="6">
<el-form-item label="项目时间:">
<el-date-picker
v-model="formInline.projectBegintime"
size="mini"
type="datetime"
placeholder="请选择开始时间"
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="pickerOptions0"
></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="~">
<el-date-picker
v-model="formInline.projectEndtime"
size="mini"
type="datetime"
placeholder="请选择结束时间"
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="pickerOptions1"
default-time="23:59:59"
></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="8" style="padding:0;text-align:right;padding-right:15px;">
<el-button type="primary" size="small" @click="getProjectList">查询</el-button>
<el-button type="default" size="small" @click="resetForm" style="margin-left:0;">重置</el-button>
</el-col>
</el-form>
</el-row>
<el-row>
<el-col :span="5">
<el-form ref="formInline" :model="formInline" label-width="75px" style="width:100%;">
<el-form-item label="发布状态:">
<el-select size="mini" v-model="formInline.projectStatus" placeholder="请选择发布状态">
<el-option
v-for="item in optionStatus"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
</el-form>
</el-col>
</el-row>
<el-form :model="formInline" class="demo-form-inline">
<el-form-item>
<el-button class="add-button" size="small" type="primary" @click="toPage()">新建项目</el-button>
</el-form-item>
</el-form>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="id" label="ID编号" min-width="100" align="center"></el-table-column>
<el-table-column prop="projectName" label="项目名称" min-width="100" align="center"></el-table-column>
<el-table-column prop="createdName" label="创建人" align="center"></el-table-column>
<el-table-column prop="projectIntro" label="项目简介" align="center" min-width="100" show-overflow-tooltip></el-table-column>
<el-table-column prop="projectBegintime" label="项目开始时间" align="center"></el-table-column>
<el-table-column prop="projectEndtime" label="项目结束时间" align="center"></el-table-column>
<el-table-column prop="projectStatus" label="状态" align="center">
<template slot-scope="scope">
<span>{{ scope.row.projectStatus | statusProject }}</span>
</template>
</el-table-column>
<el-table-column fixed="right" label="操作" min-width="200" align="center">
<template slot-scope="scope">
<el-button
@click="changeStatus(scope.row,0)"
v-show="showButton(scope.row,0)"
type="primary"
size="small"
>编辑</el-button>
<el-button
@click="changeStatus(scope.row,1)"
v-show="showButton(scope.row,1)"
type="primary"
size="small"
>暂存</el-button>
<el-button
@click="changeStatus(scope.row,2)"
v-show="showButton(scope.row,2)"
type="primary"
size="small"
>完成</el-button>
<el-button
@click="changeStatus(scope.row,3)"
v-show="showButton(scope.row,3)"
type="primary"
size="small"
>上架</el-button>
<el-button
@click="changeStatus(scope.row,4)"
v-show="showButton(scope.row,4)"
type="primary"
size="small"
>通过</el-button>
<el-button
@click="changeStatus(scope.row,5)"
v-show="showButton(scope.row,5)"
type="primary"
size="small"
>下架</el-button>
<el-button
@click="changeStatus(scope.row,7)"
v-show="showButton(scope.row,7)"
type="primary"
size="small"
>提醒审核</el-button>
<el-button
@click="changeStatus(scope.row,8)"
v-show="showButton(scope.row,8)"
type="primary"
size="small"
>取消审核</el-button>
<el-button
@click="changeStatus(scope.row,6)"
v-show="showButton(scope.row,6)"
type="primary"
size="small"
>拒绝</el-button>
<el-button
@click="delItem(scope.row,9)"
v-show="showButton(scope.row,9)"
type="primary"
size="small"
>删除</el-button>
</template>
</el-table-column>
<div slot="empty">
<div class="table-empty">
<img src="../../assets/image/no-content1.png">
<p>没有查询到相关结果</p>
</div>
</div>
</el-table>
<div class="pagination">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="formInline.pageNo"
:page-sizes="[10, 30, 50, 100]"
:page-size="formInline.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="totalRows"
></el-pagination>
</div>
</div>
</div>
</template>
<script>
import BreadCrumb from "../../components/breadcrumb.vue";
import { create } from "domain";
import { returnData } from "../mock";
import { openLoading, closeLoading } from "../../utils/utils";
import * as commonUtil from "../../utils/utils";
let vm = null;
export default {
components: {
BreadCrumb
},
data() {
return {
curmbFirst: "教培项目",
curmbSecond: "项目管理",
searchParam: {
name: "",
status: "",
pageNo: 1,
pageSize: 10
},
optionStatus: [
{
value: 1,
label: "草稿"
},
{
value: 2,
label: "未上架"
},
{
value: 3,
label: "审核中/待审核"
},
{
value: 4,
label: "已上架"
},
{
value: 5,
label: "已下架"
},
{
value: 6,
label: "已拒绝/未上架"
}
],
tableData: [],
totalRows: 0,
loading: true,
timingTime: "",
currentPage: 1,
formInline: {
projectName: "",
projectBegintime: "",
projectEndtime: "",
projectStatus: "",
pageNo: 1,
pageSize: 10
},
pickerOptions0: {
disabledDate: time => {
if (this.formInline.projectEndtime != "") {
return (
time.getTime() >
new Date(this.formInline.projectEndtime).getTime()
);
}
}
},
pickerOptions1: {
disabledDate: time => {
return (
time.getTime() <
new Date(this.formInline.projectBegintime).getTime()
); //减去一天的时间代表可以选择同一天;
}
}
};
},
created() {
vm = this;
this.getProjectList();
},
// 挂载到Dom完成时
mounted: function() {
commonUtil.resizeHeight();
},
methods: {
toPage() {
this.$router.push("add-manager");
},
//查询项目列表
getProjectList() {
let req = {};
req = this.formInline;
openLoading(vm);
vm.GET("portal/portalInfo/getProjectList", req).then(res => {
closeLoading(vm);
if (res.code == "000000") {
vm.tableData = res.data.data;
vm.totalRows = res.data.totalRows;
}
});
},
//按钮展示情况
showButton(row, type) {
// 按钮type类型: 0-编辑
// 1-暂存 2-完成 3-上架 4-通过 5-下架 6-拒绝
// 7- 提醒审核 8(5)-取消审核 9-删除
let projectStatus = row.projectStatus;
let idType = row.idType;
let level = row.level;
let flag = false;
let typeStr = parseInt(type);
//console.log("状态:"+projectStatus+ "等级:" + level + " 按钮类型:" + type);
//console.log('idType',idType);
let buttonStatus = "";
if (idType == 1) {
//内部项目
buttonStatus = returnData().buttonStatusIn;
} else {
//外部项目
buttonStatus = returnData().buttonStatusOut;
}
if (level != null) {
let statusSet = buttonStatus[projectStatus - 1][level];
let flagValue = statusSet.indexOf(typeStr);
if (flagValue >= 0) {
flag = true;
} else {
flag = false;
}
}
//flag = true;
return flag;
},
//改变状态
changeStatus(row, type) {
let projectId = row.id;
if (type === 0) {
//编辑
this.$router.push("add-manager?projectId=" + projectId);
} else if (type === 7) {
//提醒审核
let req = {
portalProjectId: projectId,
warnType: 1
};
vm.GET("portal/portalCheck/remindPortalCheck", req).then(res => {
if (res.code == "000000") {
console.log(res);
vm.$message.info(res.message);
}
});
} else {
if (type === 8) {
//取消审批值对应5
type = 5;
}
if (type == 4 || type == 6) {
//发送消息
let warnType = "";
if (type == 4) {
warnType = 3;
} else if (type == 6) {
warnType = 4;
}
let req = {
portalProjectId: projectId,
warnType: warnType
};
vm.GET("portal/portalCheck/remindPortalCheck", req).then(res => {
if (res.code == "000000") {
console.log(res);
vm.$message.info(res.message);
}
});
}
let req = {
projectId: projectId,
changeStatus: type
};
vm.POST("portal/portalInfo/changeStatus", req).then(res => {
if (res.code == "000000") {
console.log(res);
vm.$message.info(res.message);
this.getProjectList();
}
});
}
},
//删除项目
delItem(row) {
let req = {};
console.log(row);
vm.DELETE("portal/portalInfo/delete/" + row.id, req).then(res => {
if (res.code == "000000") {
console.log(res);
vm.$message({
type: 'success',
message: '删除成功!'
});
vm.getProjectList();
}
});
},
//重置表单
resetForm() {
vm.formInline = Object.assign(
{},
{
projectName: "",
projectBegintime: "",
projectEndtime: "",
projectStatus: "",
pageNo: 1,
pageSize: 10,
duringTime: ""
}
);
vm.getProjectList();
},
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.formInline.pageSize = val;
this.handleCurrentChange(this.searchParam.pageNo);
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.formInline.pageNo = val;
this.getProjectList();
//需要判断是否检索
// if (!this.flag) {
// this.currentChangePage(this.tableDataEnd);
// } else {
// this.currentChangePage(this.filterTableDataEnd);
// }
}, //组件自带监控当前页码
currentChangePage(list) {
let from = (this.currentPage - 1) * this.pageSize;
let to = this.currentPage * this.pageSize;
this.tableDataEnd = [];
for (; from < to; from++) {
if (list[from]) {
this.tableDataEnd.push(list[from]);
}
}
}
}
};
</script>
<style lang="scss">
.item-manager-wrap {
.component-content {
background: #fff;
//margin-top: 88px;
padding: 10px;
.header-title {
padding: 10px 12px;
font-size: 12px;
color: #449284;
border-bottom: 1px solid #efefef;
}
// .table-option span {
// color: #409eff;
// }
.add-button {
float: right;
}
.table-empty {
img {
width: 100px;
}
p {
margin-top: -50px;
}
}
}
}
</style>
\ No newline at end of file
let data = {
"projectModel":
{
"projectBegintime": 1551948983468,
"projectEndtime": 1551948983468,
"projectIntro": "测试用例",
"projectName": "testProjectName"
},
"attachmentModel": [
{
"attachmentType": 1,
"attachmentUrl": "www.baidu.com",
"kind": 1, "seqNo": 1
},
{
"attachmentType": 2,
"attachmentUrl": "www.qq.com",
"kind": 2, "seqNo": 1
}
],
"attachmentPDFModel": [
{
"attachmentType": 3,
"attachmentUrl": "www.pdf.com",
"kind": 3
}
]
};
let req = {
projectModel:
'{"id":6,"projectBegintime":1551853576789,"projectEndtime":1551853576789,"projectIntro":"测试用例","projectName":"testProjectName"}',
attachmentModel:
'[{"attachmentType":1,"attachmentUrl":"www.baidu.com","kind":1,"portalProjectId":6,"seqNo":1},{"attachmentType":2,"attachmentUrl":"www.qq.com","kind":2,"portalProjectId":6,"seqNo":1}]',
attachmentPDFModel:
'[{"attachmentType":3,"attachmentUrl":"www.pdf.com","kind":3,"portalProjectId":6},{"attachmentType":3,"attachmentUrl":"www.pdf.com","kind":3,"portalProjectId":6}]'
};
/**
projectModel
ProjectBegintime ProjectEndtime 开始结束时间
projectIntro 项目简介 test
ProjectName 项目名称
attachmentModel 附件信息
attachmentType 1:项目列表 2:封面信息(图片和视频) 3:PDF
attachmenturl 链接
kind 1:图片 2:视频 3:PDF
attachmentName 附件名称
attachment_ext 附件格式
attachment_size 附件大小
*/
\ No newline at end of file
<template>
<div>
<el-tree
:data="data2"
show-checkbox
default-expand-all
node-key="id"
ref="tree"
highlight-current
:props="defaultProps"
@check="onChecked"
></el-tree>
<!-- <base1
:data="data2"
show-checkbox
default-expand-all
node-key="id"
ref="tree"
highlight-current
:props="defaultProps"
></base1>-->
<span></span>
<div class="buttons">
<el-button @click="getCheckedNodes">通过 node 获取</el-button>
<el-button @click="getCheckedKeys">通过 key 获取</el-button>
<el-button @click="setCheckedNodes">通过 node 设置</el-button>
<el-button @click="setCheckedKeys">通过 key 设置</el-button>
<el-button @click="resetChecked">清空</el-button>
</div>
</div>
</template>
<script>
import { ELTree1 } from "element-ui/lib/checkbox";
// import Vue from 'vue'
// require("element-ui/lib/checkbox"
export default {
// components: {
// base1
// },
mounted() {
// const base1 = Vue.extend(ELTree)
// Vue.component('base1', base1)
},
data() {
return {
data2: [
{
id: 11,
label: "一级 1",
children: [
{
id: 1,
label: "一级 1",
children: [
{
id: 4,
label: "二级 1-1",
children: [
{
id: 9,
label: "三级 1-1-1"
},
{
id: 10,
label: "三级 1-1-2"
}
]
}
]
},
{
id: 2,
label: "一级 2",
children: [
{
id: 5,
label: "二级 2-1"
},
{
id: 6,
label: "二级 2-2"
}
]
},
{
id: 3,
label: "一级 3",
children: [
{
id: 7,
label: "二级 3-1"
},
{
id: 8,
label: "二级 3-2"
}
]
}
]
}
],
defaultProps: {
children: "children",
label: "label"
}
};
},
methods: {
getCheckedNodes() {
console.log(this.$refs.tree.getCheckedNodes());
},
getCheckedKeys() {
console.log(this.$refs.tree.getCheckedKeys());
},
setCheckedNodes() {
this.$refs.tree.setCheckedNodes([
{
id: 5,
label: "二级 2-1"
},
{
id: 9,
label: "三级 1-1-1"
}
]);
},
setCheckedKeys() {
this.$refs.tree.setCheckedKeys([3]);
},
resetChecked() {
this.$refs.tree.setCheckedKeys([]);
},
onChecked() {
let cData = [],
oldData = (this.data2.length && this.data2.slice()) || [],
checkedKeys = this.$refs.tree.getCheckedKeys(),
halfCheckedKeys = this.$refs.tree.getHalfCheckedKeys(),
savedCheckedKeys = this.handlerCheckedData(oldData, checkedKeys).map(
key => {
return { type: 2, key: key };
}
),
savedHalfCheckedKeys = halfCheckedKeys.map(key => {
return { type: 1, key: key };
}),
allSelectedKeys = savedCheckedKeys.concat(savedHalfCheckedKeys);
console.log("treeData", this.data2);
console.log(allSelectedKeys);
},
// 递归删除列表中所有子节点
delSubKeysByNode(node, checkedKeys) {
let idIndex;
if (node.children && node.children.length) {
if (node.children && node.children.length) {
node.children.forEach(elm => {
idIndex = checkedKeys.findIndex(id => {
return id === elm.id;
});
if (idIndex > -1) {
checkedKeys.splice(idIndex, 1);
}
if (elm.children && elm.children.length) {
this.delSubKeysByNode(elm, checkedKeys);
}
});
}
}
},
// 去除子节点
handlerCheckedData(oldData, checkedKeys) {
oldData.forEach(element => {
for (let i = 0; i < checkedKeys.length; i++) {
// 如果此节点被选中,则删除所有子节点
if (element.id === checkedKeys[i]) {
this.delSubKeysByNode(element, checkedKeys);
} else {
if (element.children && element.children.length) {
this.handlerCheckedData(element.children, checkedKeys);
}
}
}
});
return checkedKeys;
}
}
};
</script>
\ No newline at end of file
<template>
<div class="item-role-wrap">
<bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond" :curmbThird="curmbThird"></bread-crumb>
<div class="component-content screenSet" id="screenSet">
<div class="header-title">查询条件</div>
<el-row :gutter="30" class="row" type="flex" style="margin-top: 10px;">
<el-form :model="formInline" ref="formInline" label-width="75px" class="form-inline">
<el-col :span="5">
<el-form-item label="姓名:">
<el-input size="mini" v-model="formInline.name" placeholder="请输入名称"></el-input>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="角色:">
<el-select size="mini" v-model="formInline.projeceRole" placeholder="请选择角色">
<el-option
v-for="(item, index) in roleList"
:key="index"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="所属机构:">
<el-select size="mini" v-model="formInline.organizationName" placeholder="请选择所属机构">
<el-option
v-for="(item, index) in organizationList"
:key="index"
:label="item"
:value="item"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="所属科室:">
<el-select size="mini" v-model="formInline.departmentsName" placeholder="请选择所属科室">
<el-option
v-for="(item, index) in departmentsList"
:key="index"
:label="item"
:value="item"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4" style="padding:0;text-align:right;padding-right:10px;">
<el-button type="primary" size="small" @click="queryRoleList()">查询</el-button>
<el-button
type="default"
size="small"
@click="resetForm('formInline')"
style="margin-left:0;"
>重置</el-button>
</el-col>
</el-form>
</el-row>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="userId" label="用户ID" align="center"></el-table-column>
<el-table-column prop="userName" label="姓名" align="center"></el-table-column>
<el-table-column prop="projeceRole" label="角色" align="center">
<template slot-scope="scope">
<span>{{ scope.row.projeceRole | projeceRoleType }}</span>
</template>
</el-table-column>
<el-table-column prop="organizationName" label="所属机构" align="center"></el-table-column>
<el-table-column prop="departmentsName" label="科室" align="center"></el-table-column>
<el-table-column fixed="right" label="操作" width="300" align="center">
<template slot-scope="scope">
<el-button
type="primary"
size="small"
v-show="showButton(scope.row,'L2')"
@click="openDialog(scope.row,'L2')"
>升级项目负责人</el-button>
<el-button
type="primary"
size="small"
v-show="showButton(scope.row,'L3')"
@click="openDialog(scope.row,'L3')"
>升级次级负责人</el-button>
<el-button
type="primary"
size="small"
v-show="showButton(scope.row,'L0')"
@click="openDialog(scope.row,'L0')"
>降为普通用户</el-button>
</template>
</el-table-column>
<div slot="empty">
<div class="table-empty">
<img src="../../assets/image/no-content1.png">
<p>没有查询到相关结果</p>
</div>
</div>
</el-table>
<div class="pagination">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="formInline.pageNo"
:page-sizes="[10, 20, 30, 100]"
:page-size="formInline.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="totalRows"
></el-pagination>
</div>
<el-dialog title :visible.sync="dialog.show" width="30%" center>
<p class="dialog-p">
确认将{{ dialog.role }}
<span class="user-name">"{{ dialog.name }}"</span>
{{ dialog.option }}吗?"
</p>
<span slot="footer" class="dialog-footer">
<el-button type="default" size="small" @click="dialog.show = false">取消</el-button>
<el-button type="primary" size="small" @click="changeRole()">确定</el-button>
</span>
</el-dialog>
<el-dialog title :visible.sync="dialogFull" width="30%" center>
<p class="dialog-p">
无法操作,项目负责人已满
<span class="user-name">5人</span>
</p>
<span slot="footer" class="dialog-footer">
<el-button type="default" size="small" @click="dialogFull = false">取消</el-button>
<el-button type="primary" size="small" @click="dialogFull = false">确定</el-button>
</span>
</el-dialog>
</div>
</div>
</template>
<script>
import BreadCrumb from "../../components/breadcrumb.vue";
import { create } from "domain";
import { openLoading, closeLoading } from "../../utils/utils";
import * as commonUtil from '../../utils/utils'
let vm = null;
export default {
components: {
BreadCrumb
},
data() {
const item = {
userId: "298490",
userName: "李雪",
projeceRole: "L0",
organizationName: "浙江省人民医院",
departmentsName: "外科"
};
return {
curmbFirst: "系统管理",
curmbSecond: "角色管理",
curmbThird: "项目角色",
tableData: [],
loading: true,
timingTime: "",
totalRows: 0,
currentPage: 1,
formInline: {
portalProjectId: "",
pageNo: 1,
pageSize: 10,
departmentsName: "",
organizationName: "",
projeceRole: "",
userName: ""
},
departmentsList: [],
organizationList: [],
roleList: [
{
label: "内部管理员",
value: "L1"
},
{
label: "项目管理员",
value: "L2"
},
{
label: "次级负责人",
value: "L3"
},
{
label: "普通用户",
value: "L0"
}
],
numL2: 0,
dialog: {
show: false,
role: "项目负责人",
name: "李雷",
option: "升级为项目负责人",
full: false
},
dialogFull: false,
scopeRow: {}
};
},
created() {
vm = this;
this.queryRoleList();
},
// 挂载到Dom完成时
mounted: function() {
commonUtil.resizeHeight();
},
methods: {
//查询用户列表
queryRoleList() {
this.formInline.portalProjectId = vm.getUrlSearch(
window.location.href,
"portalProjectId"
);
if (this.formInline.portalProjectId == null) {
this.formInline.portalProjectId = "";
}
let req = {};
req = this.formInline;
openLoading(vm);
vm.GET("portal/portalProjectOrRole/queryRoleList", req).then(res => {
closeLoading(vm);
if (res.code == "000000") {
vm.tableData = res.data.projectRoleInfoModels;
vm.totalRows = res.data.total;
//this.roleList = setRoleList(res.data.roleList);
this.organizationList = res.data.organizationList;
this.departmentsList = res.data.departmentsList;
this.numL2 = res.data.numL2;
}
});
},
//改变等级
changeRole() {
let req = {
portalProjectId: this.formInline.portalProjectId,
updateL: this.scopeRow.updateL,
userId: this.scopeRow.userId,
numL2: this.numL2,
nowL: this.scopeRow.projeceRole
};
vm.GET("portal/portalProjectOrRole/roleLevelUpdate", req).then(res => {
this.dialog.show = false;
if (res.code == "000000") {
console.log(res);
this.queryRoleList();
}
vm.$message({
type: 'info',
message: res.message,
})
});
},
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.formInline.pageSize = val;
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.formInline.pageNo = val;
this.queryRoleList();
},
//重置表单
resetForm() {
vm.formInline = Object.assign(
{},
{
portalProjectId: "",
pageNo: 1,
pageSize: 10,
departmentsName: "",
organizationName: "",
projeceRole: "",
userName: ""
}
);
vm.queryRoleList();
},
//按钮展示情况
showButton(row, projeceRole) {
let flag = false;
//console.log("当前等级 " + row.projeceRole + " 改变成等级 " + projeceRole);
if (row.projeceRole == "L2") {
if (projeceRole == "L0") {
flag = true;
}
} else if (row.projeceRole == "L3") {
if (projeceRole == "L2" || projeceRole == "L0") {
flag = true;
}
} else if (row.projeceRole == "L0") {
if (projeceRole == "L2" || projeceRole == "L3") {
flag = true;
}
}
return flag;
},
//打开弹出框
openDialog(row, projeceRole) {
console.log(row);
if (projeceRole == "L2" && this.numL2 >= 5) {
this.dialogFull = true;
} else {
this.dialog.show = true;
}
this.dialog.name = row.userName;
this.scopeRow = row;
this.scopeRow.updateL = projeceRole;
if (row.projeceRole == "L2") {
this.dialog.role = "项目负责人";
if (projeceRole == "L0") {
this.dialog.option = "降级为普通用户";
}
} else if (row.projeceRole == "L3") {
this.dialog.role = "次级负责人";
if (projeceRole == "L2") {
this.dialog.option = "升级为项目负责人";
} else if (projeceRole == "L0") {
this.dialog.option = "降级为普通用户";
}
} else if (row.projeceRole == "L0") {
this.dialog.role = "普通用户";
if (projeceRole == "L2") {
this.dialog.option = "升级为项目负责人";
} else if (projeceRole == "L3") {
this.dialog.option = "升级为次级负责人";
}
}
}
}
};
</script>
<style lang="scss">
.item-role-wrap {
.component-content {
padding: 10px;
background: #fff;
.form-inline {
margin-left: 30px;
}
.header-title {
padding: 10px 12px;
font-size: 12px;
color: #449284;
border-bottom: 1px solid #efefef;
}
.dialog-p {
text-align: center;
span {
color: #449284;
}
}
.table-empty {
img {
width: 100px;
}
p {
margin-top: -50px;
}
}
}
}
</style>
\ No newline at end of file
<template>
<div class="role-wrap">
<bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
<div class="component-content screenSet" id="screenSet">
<div class="header-title">查询条件</div>
<el-row :gutter="30" class="row" type="flex" style="margin-top: 10px;">
<el-form ref="formInline" :model="formInline" label-width="75px" style="width:100%;">
<el-col :span="6">
<el-form-item label="项目名称:">
<el-input v-model="formInline.projectName" size="mini" placeholder="请输入项目名称"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="项目时间:">
<el-date-picker
v-model="formInline.projectBegintime"
size="mini"
type="datetime"
placeholder="请选择开始时间"
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="pickerOptions0"
></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="~">
<el-date-picker
v-model="formInline.projectEndtime"
size="mini"
type="datetime"
placeholder="请选择结束时间"
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="pickerOptions1"
default-time="23:59:59"
></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="8" style="padding:0;text-align:right;padding-right:15px;">
<el-button type="primary" size="small" @click="search">查询</el-button>
<el-button type="default" size="small" @click="resetForm" style="margin-left:0;">重置</el-button>
</el-col>
</el-form>
</el-row>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="id" label="ID编号" min-width="100" align="center"></el-table-column>
<el-table-column prop="projectName" label="项目名称" min-width="100" align="center"></el-table-column>
<el-table-column prop="createdName" label="创建人" align="center"></el-table-column>
<el-table-column prop="projectIntro" label="项目简介" align="center" min-width="100" show-overflow-tooltip></el-table-column>
<el-table-column prop="projectBegintime" label="项目开始时间" align="center"></el-table-column>
<el-table-column prop="projectEndtime" label="项目结束时间" align="center"></el-table-column>
<el-table-column prop="projectStatus" label="状态" align="center">
<template slot-scope="scope">
<span>{{ scope.row.projectStatus | statusProject }}</span>
</template>
</el-table-column>
<el-table-column fixed="right" label="操作" width="200" align="center">
<template slot-scope="scope">
<el-button type="primary" size="small" @click="toPage(scope.row)">查看项目人员</el-button>
</template>
</el-table-column>
<div slot="empty">
<div class="table-empty">
<img src="../../assets/image/no-content1.png">
<p>没有查询到相关结果</p>
</div>
</div>
</el-table>
<div class="pagination">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="formInline.pageNo"
:page-sizes="[10, 30, 50, 100]"
:page-size="formInline.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="totalRows"
></el-pagination>
</div>
</div>
</div>
</template>
<script>
import BreadCrumb from "../../components/breadcrumb.vue";
import { create } from "domain";
import { openLoading, closeLoading } from "../../utils/utils";
import * as commonUtil from "../../utils/utils";
let vm = null;
export default {
components: {
BreadCrumb
},
data() {
return {
curmbFirst: "系统管理",
curmbSecond: "角色管理",
tableData: [],
loading: false,
timingTime: "",
currentPage: 1,
duringTime: 0,
totalRows: 0,
formInline: {
projectName: "",
projectBegintime: "",
projectEndtime: "",
pageNo: 1,
pageSize: 10,
type: 2
},
pickerOptions0: {
disabledDate: time => {
if (this.formInline.projectEndtime != "") {
return (
time.getTime() >
new Date(this.formInline.projectEndtime).getTime()
);
}
}
},
pickerOptions1: {
disabledDate: time => {
return (
time.getTime() <
new Date(this.formInline.projectBegintime).getTime()
); //减去一天的时间代表可以选择同一天;
}
}
};
},
created() {
vm = this;
this.search();
},
// 挂载到Dom完成时
mounted: function() {
commonUtil.resizeHeight();
},
methods: {
search() {
let req = {};
//console.log(this.formInline);
req = this.formInline;
openLoading(vm);
vm.GET("portal/portalInfo/getProjectList", req).then(res => {
closeLoading(vm);
if (res.code == "000000") {
vm.tableData = res.data.data;
vm.totalRows = res.data.totalRows;
}
});
},
resetForm() {
vm.formInline = Object.assign(
{},
{
projectName: "",
projectBegintime: "",
projectEndtime: "",
duringTime: "",
pageNo: 1,
pageSize: 10
}
);
vm.search();
},
toPage(row) {
this.$router.push("item-role?portalProjectId=" + row.id);
},
handleSizeChange(val) {
this.formInline.pageSize = val;
this.search();
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
this.formInline.pageNo = val;
this.search();
console.log(`当前页: ${val}`);
}
}
};
</script>
<style lang="scss">
.role-wrap {
.component-content {
padding: 10px;
background: #fff;
.header-title {
padding: 10px 12px;
font-size: 12px;
color: #449284;
border-bottom: 1px solid #efefef;
}
.to-right {
float: right;
}
.add-button {
float: right;
}
.table-empty {
img {
width: 100px;
}
p {
margin-top: -50px;
}
}
}
}
</style>
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册