项目初始化
This commit is contained in:
@@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<el-breadcrumb class="app-breadcrumb" separator="/">
|
||||
<transition-group name="breadcrumb">
|
||||
<el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
|
||||
<span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect">{{ item.meta.title }}</span>
|
||||
<a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
|
||||
</el-breadcrumb-item>
|
||||
</transition-group>
|
||||
</el-breadcrumb>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
levelList: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
$route(route) {
|
||||
// if you go to the redirect page, do not update the breadcrumbs
|
||||
if (route.path.startsWith('/redirect/')) {
|
||||
return
|
||||
}
|
||||
this.getBreadcrumb()
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getBreadcrumb()
|
||||
},
|
||||
methods: {
|
||||
getBreadcrumb() {
|
||||
// only show routes with meta.title
|
||||
let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
|
||||
const first = matched[0]
|
||||
|
||||
if (!this.isDashboard(first)) {
|
||||
matched = [{ path: '/index', meta: { title: '首页' }}].concat(matched)
|
||||
}
|
||||
|
||||
this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
|
||||
},
|
||||
isDashboard(route) {
|
||||
const name = route && route.name
|
||||
if (!name) {
|
||||
return false
|
||||
}
|
||||
return name.trim() === 'Index'
|
||||
},
|
||||
handleLink(item) {
|
||||
const { redirect, path } = item
|
||||
if (redirect) {
|
||||
this.$router.push(redirect)
|
||||
return
|
||||
}
|
||||
this.$router.push(path)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.app-breadcrumb.el-breadcrumb {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
line-height: 50px;
|
||||
margin-left: 8px;
|
||||
|
||||
.no-redirect {
|
||||
color: #97a8be;
|
||||
cursor: text;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<el-form size="small">
|
||||
<el-form-item>
|
||||
<el-radio v-model='radioValue' :label="1">
|
||||
日，允许的通配符[, - * ? / L W]
|
||||
</el-radio>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-radio v-model='radioValue' :label="2">
|
||||
不指定
|
||||
</el-radio>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-radio v-model='radioValue' :label="3">
|
||||
周期从
|
||||
<el-input-number v-model='cycle01' :min="1" :max="30" /> -
|
||||
<el-input-number v-model='cycle02' :min="cycle01 ? cycle01 + 1 : 2" :max="31" /> 日
|
||||
</el-radio>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-radio v-model='radioValue' :label="4">
|
||||
从
|
||||
<el-input-number v-model='average01' :min="1" :max="30" /> 号开始，每
|
||||
<el-input-number v-model='average02' :min="1" :max="31 - average01 || 1" /> 日执行一次
|
||||
</el-radio>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-radio v-model='radioValue' :label="5">
|
||||
每月
|
||||
<el-input-number v-model='workday' :min="1" :max="31" /> 号最近的那个工作日
|
||||
</el-radio>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-radio v-model='radioValue' :label="6">
|
||||
本月最后一天
|
||||
</el-radio>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-radio v-model='radioValue' :label="7">
|
||||
指定
|
||||
<el-select clearable v-model="checkboxList" placeholder="可多选" multiple style="width:100%">
|
||||
<el-option v-for="item in 31" :key="item" :value="item">{{item}}</el-option>
|
||||
</el-select>
|
||||
</el-radio>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
radioValue: 1,
|
||||
workday: 1,
|
||||
cycle01: 1,
|
||||
cycle02: 2,
|
||||
average01: 1,
|
||||
average02: 1,
|
||||
checkboxList: [],
|
||||
checkNum: this.$options.propsData.check
|
||||
}
|
||||
},
|
||||
name: 'crontab-day',
|
||||
props: ['check', 'cron'],
|
||||
methods: {
|
||||
// 单选按钮值变化时
|
||||
radioChange() {
|
||||
('day rachange');
|
||||
if (this.radioValue !== 2 && this.cron.week !== '?') {
|
||||
this.$emit('update', 'week', '?', 'day')
|
||||
}
|
||||
|
||||
switch (this.radioValue) {
|
||||
case 1:
|
||||
this.$emit('update', 'day', '*');
|
||||
break;
|
||||
case 2:
|
||||
this.$emit('update', 'day', '?');
|
||||
break;
|
||||
case 3:
|
||||
this.$emit('update', 'day', this.cycleTotal);
|
||||
break;
|
||||
case 4:
|
||||
this.$emit('update', 'day', this.averageTotal);
|
||||
break;
|
||||
case 5:
|
||||
this.$emit('update', 'day', this.workday + 'W');
|
||||
break;
|
||||
case 6:
|
||||
this.$emit('update', 'day', 'L');
|
||||
break;
|
||||
case 7:
|
||||
this.$emit('update', 'day', this.checkboxString);
|
||||
break;
|
||||
}
|
||||
('day rachange end');
|
||||
},
|
||||
// 周期两个值变化时
|
||||
cycleChange() {
|
||||
if (this.radioValue == '3') {
|
||||
this.$emit('update', 'day', this.cycleTotal);
|
||||
}
|
||||
},
|
||||
// 平均两个值变化时
|
||||
averageChange() {
|
||||
if (this.radioValue == '4') {
|
||||
this.$emit('update', 'day', this.averageTotal);
|
||||
}
|
||||
},
|
||||
// 最近工作日值变化时
|
||||
workdayChange() {
|
||||
if (this.radioValue == '5') {
|
||||
this.$emit('update', 'day', this.workdayCheck + 'W');
|
||||
}
|
||||
},
|
||||
// checkbox值变化时
|
||||
checkboxChange() {
|
||||
if (this.radioValue == '7') {
|
||||
this.$emit('update', 'day', this.checkboxString);
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'radioValue': 'radioChange',
|
||||
'cycleTotal': 'cycleChange',
|
||||
'averageTotal': 'averageChange',
|
||||
'workdayCheck': 'workdayChange',
|
||||
'checkboxString': 'checkboxChange',
|
||||
},
|
||||
computed: {
|
||||
// 计算两个周期值
|
||||
cycleTotal: function () {
|
||||
const cycle01 = this.checkNum(this.cycle01, 1, 30)
|
||||
const cycle02 = this.checkNum(this.cycle02, cycle01 ? cycle01 + 1 : 2, 31, 31)
|
||||
return cycle01 + '-' + cycle02;
|
||||
},
|
||||
// 计算平均用到的值
|
||||
averageTotal: function () {
|
||||
const average01 = this.checkNum(this.average01, 1, 30)
|
||||
const average02 = this.checkNum(this.average02, 1, 31 - average01 || 0)
|
||||
return average01 + '/' + average02;
|
||||
},
|
||||
// 计算工作日格式
|
||||
workdayCheck: function () {
|
||||
const workday = this.checkNum(this.workday, 1, 31)
|
||||
return workday;
|
||||
},
|
||||
// 计算勾选的checkbox值合集
|
||||
checkboxString: function () {
|
||||
let str = this.checkboxList.join();
|
||||
return str == '' ? '*' : str;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,120 @@
|
||||
<template>
|
||||
<el-form size="small">
|
||||
<el-form-item>
|
||||
<el-radio v-model='radioValue' :label="1">
|
||||
小时，允许的通配符[, - * /]
|
||||
</el-radio>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-radio v-model='radioValue' :label="2">
|
||||
周期从
|
||||
<el-input-number v-model='cycle01' :min="0" :max="22" /> -
|
||||
<el-input-number v-model='cycle02' :min="cycle01 ? cycle01 + 1 : 1" :max="23" /> 小时
|
||||
</el-radio>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-radio v-model='radioValue' :label="3">
|
||||
从
|
||||
<el-input-number v-model='average01' :min="0" :max="22" /> 小时开始，每
|
||||
<el-input-number v-model='average02' :min="1" :max="23 - average01 || 0" /> 小时执行一次
|
||||
</el-radio>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-radio v-model='radioValue' :label="4">
|
||||
指定
|
||||
<el-select clearable v-model="checkboxList" placeholder="可多选" multiple style="width:100%">
|
||||
<el-option v-for="item in 24" :key="item" :value="item-1">{{item-1}}</el-option>
|
||||
</el-select>
|
||||
</el-radio>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
radioValue: 1,
|
||||
cycle01: 0,
|
||||
cycle02: 1,
|
||||
average01: 0,
|
||||
average02: 1,
|
||||
checkboxList: [],
|
||||
checkNum: this.$options.propsData.check
|
||||
}
|
||||
},
|
||||
name: 'crontab-hour',
|
||||
props: ['check', 'cron'],
|
||||
methods: {
|
||||
// 单选按钮值变化时
|
||||
radioChange() {
|
||||
if (this.cron.min === '*') {
|
||||
this.$emit('update', 'min', '0', 'hour');
|
||||
}
|
||||
if (this.cron.second === '*') {
|
||||
this.$emit('update', 'second', '0', 'hour');
|
||||
}
|
||||
switch (this.radioValue) {
|
||||
case 1:
|
||||
this.$emit('update', 'hour', '*')
|
||||
break;
|
||||
case 2:
|
||||
this.$emit('update', 'hour', this.cycleTotal);
|
||||
break;
|
||||
case 3:
|
||||
this.$emit('update', 'hour', this.averageTotal);
|
||||
break;
|
||||
case 4:
|
||||
this.$emit('update', 'hour', this.checkboxString);
|
||||
break;
|
||||
}
|
||||
},
|
||||
// 周期两个值变化时
|
||||
cycleChange() {
|
||||
if (this.radioValue == '2') {
|
||||
this.$emit('update', 'hour', this.cycleTotal);
|
||||
}
|
||||
},
|
||||
// 平均两个值变化时
|
||||
averageChange() {
|
||||
if (this.radioValue == '3') {
|
||||
this.$emit('update', 'hour', this.averageTotal);
|
||||
}
|
||||
},
|
||||
// checkbox值变化时
|
||||
checkboxChange() {
|
||||
if (this.radioValue == '4') {
|
||||
this.$emit('update', 'hour', this.checkboxString);
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'radioValue': 'radioChange',
|
||||
'cycleTotal': 'cycleChange',
|
||||
'averageTotal': 'averageChange',
|
||||
'checkboxString': 'checkboxChange'
|
||||
},
|
||||
computed: {
|
||||
// 计算两个周期值
|
||||
cycleTotal: function () {
|
||||
const cycle01 = this.checkNum(this.cycle01, 0, 22)
|
||||
const cycle02 = this.checkNum(this.cycle02, cycle01 ? cycle01 + 1 : 1, 23)
|
||||
return cycle01 + '-' + cycle02;
|
||||
},
|
||||
// 计算平均用到的值
|
||||
averageTotal: function () {
|
||||
const average01 = this.checkNum(this.average01, 0, 22)
|
||||
const average02 = this.checkNum(this.average02, 1, 23 - average01 || 0)
|
||||
return average01 + '/' + average02;
|
||||
},
|
||||
// 计算勾选的checkbox值合集
|
||||
checkboxString: function () {
|
||||
let str = this.checkboxList.join();
|
||||
return str == '' ? '*' : str;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,430 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-tabs type="border-card">
|
||||
<el-tab-pane label="秒" v-if="shouldHide('second')">
|
||||
<CrontabSecond
|
||||
@update="updateCrontabValue"
|
||||
:check="checkNumber"
|
||||
:cron="crontabValueObj"
|
||||
ref="cronsecond"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="分钟" v-if="shouldHide('min')">
|
||||
<CrontabMin
|
||||
@update="updateCrontabValue"
|
||||
:check="checkNumber"
|
||||
:cron="crontabValueObj"
|
||||
ref="cronmin"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="小时" v-if="shouldHide('hour')">
|
||||
<CrontabHour
|
||||
@update="updateCrontabValue"
|
||||
:check="checkNumber"
|
||||
:cron="crontabValueObj"
|
||||
ref="cronhour"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="日" v-if="shouldHide('day')">
|
||||
<CrontabDay
|
||||
@update="updateCrontabValue"
|
||||
:check="checkNumber"
|
||||
:cron="crontabValueObj"
|
||||
ref="cronday"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="月" v-if="shouldHide('month')">
|
||||
<CrontabMonth
|
||||
@update="updateCrontabValue"
|
||||
:check="checkNumber"
|
||||
:cron="crontabValueObj"
|
||||
ref="cronmonth"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="周" v-if="shouldHide('week')">
|
||||
<CrontabWeek
|
||||
@update="updateCrontabValue"
|
||||
:check="checkNumber"
|
||||
:cron="crontabValueObj"
|
||||
ref="cronweek"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="年" v-if="shouldHide('year')">
|
||||
<CrontabYear
|
||||
@update="updateCrontabValue"
|
||||
:check="checkNumber"
|
||||
:cron="crontabValueObj"
|
||||
ref="cronyear"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
<div class="popup-main">
|
||||
<div class="popup-result">
|
||||
<p class="title">时间表达式</p>
|
||||
<table>
|
||||
<thead>
|
||||
<th v-for="item of tabTitles" width="40" :key="item">{{item}}</th>
|
||||
<th>Cron 表达式</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<td>
|
||||
<span>{{crontabValueObj.second}}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span>{{crontabValueObj.min}}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span>{{crontabValueObj.hour}}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span>{{crontabValueObj.day}}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span>{{crontabValueObj.month}}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span>{{crontabValueObj.week}}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span>{{crontabValueObj.year}}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span>{{crontabValueString}}</span>
|
||||
</td>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<CrontabResult :ex="crontabValueString"></CrontabResult>
|
||||
|
||||
<div class="pop_btn">
|
||||
<el-button size="small" type="primary" @click="submitFill">确定</el-button>
|
||||
<el-button size="small" type="warning" @click="clearCron">重置</el-button>
|
||||
<el-button size="small" @click="hidePopup">取消</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CrontabSecond from "./second.vue";
|
||||
import CrontabMin from "./min.vue";
|
||||
import CrontabHour from "./hour.vue";
|
||||
import CrontabDay from "./day.vue";
|
||||
import CrontabMonth from "./month.vue";
|
||||
import CrontabWeek from "./week.vue";
|
||||
import CrontabYear from "./year.vue";
|
||||
import CrontabResult from "./result.vue";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tabTitles: ["秒", "分钟", "小时", "日", "月", "周", "年"],
|
||||
tabActive: 0,
|
||||
myindex: 0,
|
||||
crontabValueObj: {
|
||||
second: "*",
|
||||
min: "*",
|
||||
hour: "*",
|
||||
day: "*",
|
||||
month: "*",
|
||||
week: "?",
|
||||
year: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
name: "vcrontab",
|
||||
props: ["expression", "hideComponent"],
|
||||
methods: {
|
||||
shouldHide(key) {
|
||||
if (this.hideComponent && this.hideComponent.includes(key)) return false;
|
||||
return true;
|
||||
},
|
||||
resolveExp() {
|
||||
// 反解析 表达式
|
||||
if (this.expression) {
|
||||
let arr = this.expression.split(" ");
|
||||
if (arr.length >= 6) {
|
||||
//6 位以上是合法表达式
|
||||
let obj = {
|
||||
second: arr[0],
|
||||
min: arr[1],
|
||||
hour: arr[2],
|
||||
day: arr[3],
|
||||
month: arr[4],
|
||||
week: arr[5],
|
||||
year: arr[6] ? arr[6] : "",
|
||||
};
|
||||
this.crontabValueObj = {
|
||||
...obj,
|
||||
};
|
||||
for (let i in obj) {
|
||||
if (obj[i]) this.changeRadio(i, obj[i]);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// 没有传入的表达式 则还原
|
||||
this.clearCron();
|
||||
}
|
||||
},
|
||||
// tab切换值
|
||||
tabCheck(index) {
|
||||
this.tabActive = index;
|
||||
},
|
||||
// 由子组件触发，更改表达式组成的字段值
|
||||
updateCrontabValue(name, value, from) {
|
||||
"updateCrontabValue", name, value, from;
|
||||
this.crontabValueObj[name] = value;
|
||||
if (from && from !== name) {
|
||||
console.log(`来自组件 ${from} 改变了 ${name} ${value}`);
|
||||
this.changeRadio(name, value);
|
||||
}
|
||||
},
|
||||
// 赋值到组件
|
||||
changeRadio(name, value) {
|
||||
let arr = ["second", "min", "hour", "month"],
|
||||
refName = "cron" + name,
|
||||
insValue;
|
||||
|
||||
if (!this.$refs[refName]) return;
|
||||
|
||||
if (arr.includes(name)) {
|
||||
if (value === "*") {
|
||||
insValue = 1;
|
||||
} else if (value.indexOf("-") > -1) {
|
||||
let indexArr = value.split("-");
|
||||
isNaN(indexArr[0])
|
||||
? (this.$refs[refName].cycle01 = 0)
|
||||
: (this.$refs[refName].cycle01 = indexArr[0]);
|
||||
this.$refs[refName].cycle02 = indexArr[1];
|
||||
insValue = 2;
|
||||
} else if (value.indexOf("/") > -1) {
|
||||
let indexArr = value.split("/");
|
||||
isNaN(indexArr[0])
|
||||
? (this.$refs[refName].average01 = 0)
|
||||
: (this.$refs[refName].average01 = indexArr[0]);
|
||||
this.$refs[refName].average02 = indexArr[1];
|
||||
insValue = 3;
|
||||
} else {
|
||||
insValue = 4;
|
||||
this.$refs[refName].checkboxList = value.split(",");
|
||||
}
|
||||
} else if (name == "day") {
|
||||
if (value === "*") {
|
||||
insValue = 1;
|
||||
} else if (value == "?") {
|
||||
insValue = 2;
|
||||
} else if (value.indexOf("-") > -1) {
|
||||
let indexArr = value.split("-");
|
||||
isNaN(indexArr[0])
|
||||
? (this.$refs[refName].cycle01 = 0)
|
||||
: (this.$refs[refName].cycle01 = indexArr[0]);
|
||||
this.$refs[refName].cycle02 = indexArr[1];
|
||||
insValue = 3;
|
||||
} else if (value.indexOf("/") > -1) {
|
||||
let indexArr = value.split("/");
|
||||
isNaN(indexArr[0])
|
||||
? (this.$refs[refName].average01 = 0)
|
||||
: (this.$refs[refName].average01 = indexArr[0]);
|
||||
this.$refs[refName].average02 = indexArr[1];
|
||||
insValue = 4;
|
||||
} else if (value.indexOf("W") > -1) {
|
||||
let indexArr = value.split("W");
|
||||
isNaN(indexArr[0])
|
||||
? (this.$refs[refName].workday = 0)
|
||||
: (this.$refs[refName].workday = indexArr[0]);
|
||||
insValue = 5;
|
||||
} else if (value === "L") {
|
||||
insValue = 6;
|
||||
} else {
|
||||
this.$refs[refName].checkboxList = value.split(",");
|
||||
insValue = 7;
|
||||
}
|
||||
} else if (name == "week") {
|
||||
if (value === "*") {
|
||||
insValue = 1;
|
||||
} else if (value == "?") {
|
||||
insValue = 2;
|
||||
} else if (value.indexOf("-") > -1) {
|
||||
let indexArr = value.split("-");
|
||||
isNaN(indexArr[0])
|
||||
? (this.$refs[refName].cycle01 = 0)
|
||||
: (this.$refs[refName].cycle01 = indexArr[0]);
|
||||
this.$refs[refName].cycle02 = indexArr[1];
|
||||
insValue = 3;
|
||||
} else if (value.indexOf("#") > -1) {
|
||||
let indexArr = value.split("#");
|
||||
isNaN(indexArr[0])
|
||||
? (this.$refs[refName].average01 = 1)
|
||||
: (this.$refs[refName].average01 = indexArr[0]);
|
||||
this.$refs[refName].average02 = indexArr[1];
|
||||
insValue = 4;
|
||||
} else if (value.indexOf("L") > -1) {
|
||||
let indexArr = value.split("L");
|
||||
isNaN(indexArr[0])
|
||||
? (this.$refs[refName].weekday = 1)
|
||||
: (this.$refs[refName].weekday = indexArr[0]);
|
||||
insValue = 5;
|
||||
} else {
|
||||
this.$refs[refName].checkboxList = value.split(",");
|
||||
insValue = 6;
|
||||
}
|
||||
} else if (name == "year") {
|
||||
if (value == "") {
|
||||
insValue = 1;
|
||||
} else if (value == "*") {
|
||||
insValue = 2;
|
||||
} else if (value.indexOf("-") > -1) {
|
||||
insValue = 3;
|
||||
} else if (value.indexOf("/") > -1) {
|
||||
insValue = 4;
|
||||
} else {
|
||||
this.$refs[refName].checkboxList = value.split(",");
|
||||
insValue = 5;
|
||||
}
|
||||
}
|
||||
this.$refs[refName].radioValue = insValue;
|
||||
},
|
||||
// 表单选项的子组件校验数字格式（通过-props传递）
|
||||
checkNumber(value, minLimit, maxLimit) {
|
||||
// 检查必须为整数
|
||||
value = Math.floor(value);
|
||||
if (value < minLimit) {
|
||||
value = minLimit;
|
||||
} else if (value > maxLimit) {
|
||||
value = maxLimit;
|
||||
}
|
||||
return value;
|
||||
},
|
||||
// 隐藏弹窗
|
||||
hidePopup() {
|
||||
this.$emit("hide");
|
||||
},
|
||||
// 填充表达式
|
||||
submitFill() {
|
||||
this.$emit("fill", this.crontabValueString);
|
||||
this.hidePopup();
|
||||
},
|
||||
clearCron() {
|
||||
// 还原选择项
|
||||
("准备还原");
|
||||
this.crontabValueObj = {
|
||||
second: "*",
|
||||
min: "*",
|
||||
hour: "*",
|
||||
day: "*",
|
||||
month: "*",
|
||||
week: "?",
|
||||
year: "",
|
||||
};
|
||||
for (let j in this.crontabValueObj) {
|
||||
this.changeRadio(j, this.crontabValueObj[j]);
|
||||
}
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
crontabValueString: function() {
|
||||
let obj = this.crontabValueObj;
|
||||
let str =
|
||||
obj.second +
|
||||
" " +
|
||||
obj.min +
|
||||
" " +
|
||||
obj.hour +
|
||||
" " +
|
||||
obj.day +
|
||||
" " +
|
||||
obj.month +
|
||||
" " +
|
||||
obj.week +
|
||||
(obj.year == "" ? "" : " " + obj.year);
|
||||
return str;
|
||||
},
|
||||
},
|
||||
components: {
|
||||
CrontabSecond,
|
||||
CrontabMin,
|
||||
CrontabHour,
|
||||
CrontabDay,
|
||||
CrontabMonth,
|
||||
CrontabWeek,
|
||||
CrontabYear,
|
||||
CrontabResult,
|
||||
},
|
||||
watch: {
|
||||
expression: "resolveExp",
|
||||
hideComponent(value) {
|
||||
// 隐藏部分组件
|
||||
},
|
||||
},
|
||||
mounted: function() {
|
||||
this.resolveExp();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.pop_btn {
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.popup-main {
|
||||
position: relative;
|
||||
margin: 10px auto;
|
||||
background: #fff;
|
||||
border-radius: 5px;
|
||||
font-size: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.popup-title {
|
||||
overflow: hidden;
|
||||
line-height: 34px;
|
||||
padding-top: 6px;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
.popup-result {
|
||||
box-sizing: border-box;
|
||||
line-height: 24px;
|
||||
margin: 25px auto;
|
||||
padding: 15px 10px 10px;
|
||||
border: 1px solid #ccc;
|
||||
position: relative;
|
||||
}
|
||||
.popup-result .title {
|
||||
position: absolute;
|
||||
top: -28px;
|
||||
left: 50%;
|
||||
width: 140px;
|
||||
font-size: 14px;
|
||||
margin-left: -70px;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
background: #fff;
|
||||
}
|
||||
.popup-result table {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.popup-result table span {
|
||||
display: block;
|
||||
width: 100%;
|
||||
font-family: arial;
|
||||
line-height: 30px;
|
||||
height: 30px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
border: 1px solid #e8e8e8;
|
||||
}
|
||||
.popup-result-scroll {
|
||||
font-size: 12px;
|
||||
line-height: 24px;
|
||||
height: 10em;
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<el-form size="small">
|
||||
<el-form-item>
|
||||
<el-radio v-model='radioValue' :label="1">
|
||||
分钟，允许的通配符[, - * /]
|
||||
</el-radio>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-radio v-model='radioValue' :label="2">
|
||||
周期从
|
||||
<el-input-number v-model='cycle01' :min="0" :max="58" /> -
|
||||
<el-input-number v-model='cycle02' :min="cycle01 ? cycle01 + 1 : 1" :max="59" /> 分钟
|
||||
</el-radio>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-radio v-model='radioValue' :label="3">
|
||||
从
|
||||
<el-input-number v-model='average01' :min="0" :max="58" /> 分钟开始，每
|
||||
<el-input-number v-model='average02' :min="1" :max="59 - average01 || 0" /> 分钟执行一次
|
||||
</el-radio>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-radio v-model='radioValue' :label="4">
|
||||
指定
|
||||
<el-select clearable v-model="checkboxList" placeholder="可多选" multiple style="width:100%">
|
||||
<el-option v-for="item in 60" :key="item" :value="item-1">{{item-1}}</el-option>
|
||||
</el-select>
|
||||
</el-radio>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
radioValue: 1,
|
||||
cycle01: 1,
|
||||
cycle02: 2,
|
||||
average01: 0,
|
||||
average02: 1,
|
||||
checkboxList: [],
|
||||
checkNum: this.$options.propsData.check
|
||||
}
|
||||
},
|
||||
name: 'crontab-min',
|
||||
props: ['check', 'cron'],
|
||||
methods: {
|
||||
// 单选按钮值变化时
|
||||
radioChange() {
|
||||
switch (this.radioValue) {
|
||||
case 1:
|
||||
this.$emit('update', 'min', '*', 'min');
|
||||
break;
|
||||
case 2:
|
||||
this.$emit('update', 'min', this.cycleTotal, 'min');
|
||||
break;
|
||||
case 3:
|
||||
this.$emit('update', 'min', this.averageTotal, 'min');
|
||||
break;
|
||||
case 4:
|
||||
this.$emit('update', 'min', this.checkboxString, 'min');
|
||||
break;
|
||||
}
|
||||
},
|
||||
// 周期两个值变化时
|
||||
cycleChange() {
|
||||
if (this.radioValue == '2') {
|
||||
this.$emit('update', 'min', this.cycleTotal, 'min');
|
||||
}
|
||||
},
|
||||
// 平均两个值变化时
|
||||
averageChange() {
|
||||
if (this.radioValue == '3') {
|
||||
this.$emit('update', 'min', this.averageTotal, 'min');
|
||||
}
|
||||
},
|
||||
// checkbox值变化时
|
||||
checkboxChange() {
|
||||
if (this.radioValue == '4') {
|
||||
this.$emit('update', 'min', this.checkboxString, 'min');
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
watch: {
|
||||
'radioValue': 'radioChange',
|
||||
'cycleTotal': 'cycleChange',
|
||||
'averageTotal': 'averageChange',
|
||||
'checkboxString': 'checkboxChange',
|
||||
},
|
||||
computed: {
|
||||
// 计算两个周期值
|
||||
cycleTotal: function () {
|
||||
const cycle01 = this.checkNum(this.cycle01, 0, 58)
|
||||
const cycle02 = this.checkNum(this.cycle02, cycle01 ? cycle01 + 1 : 1, 59)
|
||||
return cycle01 + '-' + cycle02;
|
||||
},
|
||||
// 计算平均用到的值
|
||||
averageTotal: function () {
|
||||
const average01 = this.checkNum(this.average01, 0, 58)
|
||||
const average02 = this.checkNum(this.average02, 1, 59 - average01 || 0)
|
||||
return average01 + '/' + average02;
|
||||
},
|
||||
// 计算勾选的checkbox值合集
|
||||
checkboxString: function () {
|
||||
let str = this.checkboxList.join();
|
||||
return str == '' ? '*' : str;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<el-form size='small'>
|
||||
<el-form-item>
|
||||
<el-radio v-model='radioValue' :label="1">
|
||||
月，允许的通配符[, - * /]
|
||||
</el-radio>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-radio v-model='radioValue' :label="2">
|
||||
周期从
|
||||
<el-input-number v-model='cycle01' :min="1" :max="11" /> -
|
||||
<el-input-number v-model='cycle02' :min="cycle01 ? cycle01 + 1 : 2" :max="12" /> 月
|
||||
</el-radio>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-radio v-model='radioValue' :label="3">
|
||||
从
|
||||
<el-input-number v-model='average01' :min="1" :max="11" /> 月开始，每
|
||||
<el-input-number v-model='average02' :min="1" :max="12 - average01 || 0" /> 月月执行一次
|
||||
</el-radio>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-radio v-model='radioValue' :label="4">
|
||||
指定
|
||||
<el-select clearable v-model="checkboxList" placeholder="可多选" multiple style="width:100%">
|
||||
<el-option v-for="item in 12" :key="item" :value="item">{{item}}</el-option>
|
||||
</el-select>
|
||||
</el-radio>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
radioValue: 1,
|
||||
cycle01: 1,
|
||||
cycle02: 2,
|
||||
average01: 1,
|
||||
average02: 1,
|
||||
checkboxList: [],
|
||||
checkNum: this.check
|
||||
}
|
||||
},
|
||||
name: 'crontab-month',
|
||||
props: ['check', 'cron'],
|
||||
methods: {
|
||||
// 单选按钮值变化时
|
||||
radioChange() {
|
||||
switch (this.radioValue) {
|
||||
case 1:
|
||||
this.$emit('update', 'month', '*');
|
||||
break;
|
||||
case 2:
|
||||
this.$emit('update', 'month', this.cycleTotal);
|
||||
break;
|
||||
case 3:
|
||||
this.$emit('update', 'month', this.averageTotal);
|
||||
break;
|
||||
case 4:
|
||||
this.$emit('update', 'month', this.checkboxString);
|
||||
break;
|
||||
}
|
||||
},
|
||||
// 周期两个值变化时
|
||||
cycleChange() {
|
||||
if (this.radioValue == '2') {
|
||||
this.$emit('update', 'month', this.cycleTotal);
|
||||
}
|
||||
},
|
||||
// 平均两个值变化时
|
||||
averageChange() {
|
||||
if (this.radioValue == '3') {
|
||||
this.$emit('update', 'month', this.averageTotal);
|
||||
}
|
||||
},
|
||||
// checkbox值变化时
|
||||
checkboxChange() {
|
||||
if (this.radioValue == '4') {
|
||||
this.$emit('update', 'month', this.checkboxString);
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'radioValue': 'radioChange',
|
||||
'cycleTotal': 'cycleChange',
|
||||
'averageTotal': 'averageChange',
|
||||
'checkboxString': 'checkboxChange'
|
||||
},
|
||||
computed: {
|
||||
// 计算两个周期值
|
||||
cycleTotal: function () {
|
||||
const cycle01 = this.checkNum(this.cycle01, 1, 11)
|
||||
const cycle02 = this.checkNum(this.cycle02, cycle01 ? cycle01 + 1 : 2, 12)
|
||||
return cycle01 + '-' + cycle02;
|
||||
},
|
||||
// 计算平均用到的值
|
||||
averageTotal: function () {
|
||||
const average01 = this.checkNum(this.average01, 1, 11)
|
||||
const average02 = this.checkNum(this.average02, 1, 12 - average01 || 0)
|
||||
return average01 + '/' + average02;
|
||||
},
|
||||
// 计算勾选的checkbox值合集
|
||||
checkboxString: function () {
|
||||
let str = this.checkboxList.join();
|
||||
return str == '' ? '*' : str;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,559 @@
|
||||
<template>
|
||||
<div class="popup-result">
|
||||
<p class="title">最近5次运行时间</p>
|
||||
<ul class="popup-result-scroll">
|
||||
<template v-if='isShow'>
|
||||
<li v-for='item in resultList' :key="item">{{item}}</li>
|
||||
</template>
|
||||
<li v-else>计算结果中...</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dayRule: '',
|
||||
dayRuleSup: '',
|
||||
dateArr: [],
|
||||
resultList: [],
|
||||
isShow: false
|
||||
}
|
||||
},
|
||||
name: 'crontab-result',
|
||||
methods: {
|
||||
// 表达式值变化时，开始去计算结果
|
||||
expressionChange() {
|
||||
|
||||
// 计算开始-隐藏结果
|
||||
this.isShow = false;
|
||||
// 获取规则数组[0秒、1分、2时、3日、4月、5星期、6年]
|
||||
let ruleArr = this.$options.propsData.ex.split(' ');
|
||||
// 用于记录进入循环的次数
|
||||
let nums = 0;
|
||||
// 用于暂时存符号时间规则结果的数组
|
||||
let resultArr = [];
|
||||
// 获取当前时间精确至[年、月、日、时、分、秒]
|
||||
let nTime = new Date();
|
||||
let nYear = nTime.getFullYear();
|
||||
let nMonth = nTime.getMonth() + 1;
|
||||
let nDay = nTime.getDate();
|
||||
let nHour = nTime.getHours();
|
||||
let nMin = nTime.getMinutes();
|
||||
let nSecond = nTime.getSeconds();
|
||||
// 根据规则获取到近100年可能年数组、月数组等等
|
||||
this.getSecondArr(ruleArr[0]);
|
||||
this.getMinArr(ruleArr[1]);
|
||||
this.getHourArr(ruleArr[2]);
|
||||
this.getDayArr(ruleArr[3]);
|
||||
this.getMonthArr(ruleArr[4]);
|
||||
this.getWeekArr(ruleArr[5]);
|
||||
this.getYearArr(ruleArr[6], nYear);
|
||||
// 将获取到的数组赋值-方便使用
|
||||
let sDate = this.dateArr[0];
|
||||
let mDate = this.dateArr[1];
|
||||
let hDate = this.dateArr[2];
|
||||
let DDate = this.dateArr[3];
|
||||
let MDate = this.dateArr[4];
|
||||
let YDate = this.dateArr[5];
|
||||
// 获取当前时间在数组中的索引
|
||||
let sIdx = this.getIndex(sDate, nSecond);
|
||||
let mIdx = this.getIndex(mDate, nMin);
|
||||
let hIdx = this.getIndex(hDate, nHour);
|
||||
let DIdx = this.getIndex(DDate, nDay);
|
||||
let MIdx = this.getIndex(MDate, nMonth);
|
||||
let YIdx = this.getIndex(YDate, nYear);
|
||||
// 重置月日时分秒的函数(后面用的比较多)
|
||||
const resetSecond = function () {
|
||||
sIdx = 0;
|
||||
nSecond = sDate[sIdx]
|
||||
}
|
||||
const resetMin = function () {
|
||||
mIdx = 0;
|
||||
nMin = mDate[mIdx]
|
||||
resetSecond();
|
||||
}
|
||||
const resetHour = function () {
|
||||
hIdx = 0;
|
||||
nHour = hDate[hIdx]
|
||||
resetMin();
|
||||
}
|
||||
const resetDay = function () {
|
||||
DIdx = 0;
|
||||
nDay = DDate[DIdx]
|
||||
resetHour();
|
||||
}
|
||||
const resetMonth = function () {
|
||||
MIdx = 0;
|
||||
nMonth = MDate[MIdx]
|
||||
resetDay();
|
||||
}
|
||||
// 如果当前年份不为数组中当前值
|
||||
if (nYear !== YDate[YIdx]) {
|
||||
resetMonth();
|
||||
}
|
||||
// 如果当前月份不为数组中当前值
|
||||
if (nMonth !== MDate[MIdx]) {
|
||||
resetDay();
|
||||
}
|
||||
// 如果当前“日”不为数组中当前值
|
||||
if (nDay !== DDate[DIdx]) {
|
||||
resetHour();
|
||||
}
|
||||
// 如果当前“时”不为数组中当前值
|
||||
if (nHour !== hDate[hIdx]) {
|
||||
resetMin();
|
||||
}
|
||||
// 如果当前“分”不为数组中当前值
|
||||
if (nMin !== mDate[mIdx]) {
|
||||
resetSecond();
|
||||
}
|
||||
|
||||
// 循环年份数组
|
||||
goYear: for (let Yi = YIdx; Yi < YDate.length; Yi++) {
|
||||
let YY = YDate[Yi];
|
||||
// 如果到达最大值时
|
||||
if (nMonth > MDate[MDate.length - 1]) {
|
||||
resetMonth();
|
||||
continue;
|
||||
}
|
||||
// 循环月份数组
|
||||
goMonth: for (let Mi = MIdx; Mi < MDate.length; Mi++) {
|
||||
// 赋值、方便后面运算
|
||||
let MM = MDate[Mi];
|
||||
MM = MM < 10 ? '0' + MM : MM;
|
||||
// 如果到达最大值时
|
||||
if (nDay > DDate[DDate.length - 1]) {
|
||||
resetDay();
|
||||
if (Mi == MDate.length - 1) {
|
||||
resetMonth();
|
||||
continue goYear;
|
||||
}
|
||||
continue;
|
||||
}
|
||||
// 循环日期数组
|
||||
goDay: for (let Di = DIdx; Di < DDate.length; Di++) {
|
||||
// 赋值、方便后面运算
|
||||
let DD = DDate[Di];
|
||||
let thisDD = DD < 10 ? '0' + DD : DD;
|
||||
|
||||
// 如果到达最大值时
|
||||
if (nHour > hDate[hDate.length - 1]) {
|
||||
resetHour();
|
||||
if (Di == DDate.length - 1) {
|
||||
resetDay();
|
||||
if (Mi == MDate.length - 1) {
|
||||
resetMonth();
|
||||
continue goYear;
|
||||
}
|
||||
continue goMonth;
|
||||
}
|
||||
continue;
|
||||
}
|
||||
|
||||
// 判断日期的合法性，不合法的话也是跳出当前循环
|
||||
if (this.checkDate(YY + '-' + MM + '-' + thisDD + ' 00:00:00') !== true && this.dayRule !== 'workDay' && this.dayRule !== 'lastWeek' && this.dayRule !== 'lastDay') {
|
||||
resetDay();
|
||||
continue goMonth;
|
||||
}
|
||||
// 如果日期规则中有值时
|
||||
if (this.dayRule == 'lastDay') {
|
||||
// 如果不是合法日期则需要将前将日期调到合法日期即月末最后一天
|
||||
|
||||
if (this.checkDate(YY + '-' + MM + '-' + thisDD + ' 00:00:00') !== true) {
|
||||
while (DD > 0 && this.checkDate(YY + '-' + MM + '-' + thisDD + ' 00:00:00') !== true) {
|
||||
DD--;
|
||||
|
||||
thisDD = DD < 10 ? '0' + DD : DD;
|
||||
}
|
||||
}
|
||||
} else if (this.dayRule == 'workDay') {
|
||||
// 校验并调整如果是2月30号这种日期传进来时需调整至正常月底
|
||||
if (this.checkDate(YY + '-' + MM + '-' + thisDD + ' 00:00:00') !== true) {
|
||||
while (DD > 0 && this.checkDate(YY + '-' + MM + '-' + thisDD + ' 00:00:00') !== true) {
|
||||
DD--;
|
||||
thisDD = DD < 10 ? '0' + DD : DD;
|
||||
}
|
||||
}
|
||||
// 获取达到条件的日期是星期X
|
||||
let thisWeek = this.formatDate(new Date(YY + '-' + MM + '-' + thisDD + ' 00:00:00'), 'week');
|
||||
// 当星期日时
|
||||
if (thisWeek == 1) {
|
||||
// 先找下一个日，并判断是否为月底
|
||||
DD++;
|
||||
thisDD = DD < 10 ? '0' + DD : DD;
|
||||
// 判断下一日已经不是合法日期
|
||||
if (this.checkDate(YY + '-' + MM + '-' + thisDD + ' 00:00:00') !== true) {
|
||||
DD -= 3;
|
||||
}
|
||||
} else if (thisWeek == 7) {
|
||||
// 当星期6时只需判断不是1号就可进行操作
|
||||
if (this.dayRuleSup !== 1) {
|
||||
DD--;
|
||||
} else {
|
||||
DD += 2;
|
||||
}
|
||||
}
|
||||
} else if (this.dayRule == 'weekDay') {
|
||||
// 如果指定了是星期几
|
||||
// 获取当前日期是属于星期几
|
||||
let thisWeek = this.formatDate(new Date(YY + '-' + MM + '-' + DD + ' 00:00:00'), 'week');
|
||||
// 校验当前星期是否在星期池（dayRuleSup）中
|
||||
if (this.dayRuleSup.indexOf(thisWeek) < 0) {
|
||||
// 如果到达最大值时
|
||||
if (Di == DDate.length - 1) {
|
||||
resetDay();
|
||||
if (Mi == MDate.length - 1) {
|
||||
resetMonth();
|
||||
continue goYear;
|
||||
}
|
||||
continue goMonth;
|
||||
}
|
||||
continue;
|
||||
}
|
||||
} else if (this.dayRule == 'assWeek') {
|
||||
// 如果指定了是第几周的星期几
|
||||
// 获取每月1号是属于星期几
|
||||
let thisWeek = this.formatDate(new Date(YY + '-' + MM + '-' + DD + ' 00:00:00'), 'week');
|
||||
if (this.dayRuleSup[1] >= thisWeek) {
|
||||
DD = (this.dayRuleSup[0] - 1) * 7 + this.dayRuleSup[1] - thisWeek + 1;
|
||||
} else {
|
||||
DD = this.dayRuleSup[0] * 7 + this.dayRuleSup[1] - thisWeek + 1;
|
||||
}
|
||||
} else if (this.dayRule == 'lastWeek') {
|
||||
// 如果指定了每月最后一个星期几
|
||||
// 校验并调整如果是2月30号这种日期传进来时需调整至正常月底
|
||||
if (this.checkDate(YY + '-' + MM + '-' + thisDD + ' 00:00:00') !== true) {
|
||||
while (DD > 0 && this.checkDate(YY + '-' + MM + '-' + thisDD + ' 00:00:00') !== true) {
|
||||
DD--;
|
||||
thisDD = DD < 10 ? '0' + DD : DD;
|
||||
}
|
||||
}
|
||||
// 获取月末最后一天是星期几
|
||||
let thisWeek = this.formatDate(new Date(YY + '-' + MM + '-' + thisDD + ' 00:00:00'), 'week');
|
||||
// 找到要求中最近的那个星期几
|
||||
if (this.dayRuleSup < thisWeek) {
|
||||
DD -= thisWeek - this.dayRuleSup;
|
||||
} else if (this.dayRuleSup > thisWeek) {
|
||||
DD -= 7 - (this.dayRuleSup - thisWeek)
|
||||
}
|
||||
}
|
||||
// 判断时间值是否小于10置换成“05”这种格式
|
||||
DD = DD < 10 ? '0' + DD : DD;
|
||||
|
||||
// 循环“时”数组
|
||||
goHour: for (let hi = hIdx; hi < hDate.length; hi++) {
|
||||
let hh = hDate[hi] < 10 ? '0' + hDate[hi] : hDate[hi]
|
||||
|
||||
// 如果到达最大值时
|
||||
if (nMin > mDate[mDate.length - 1]) {
|
||||
resetMin();
|
||||
if (hi == hDate.length - 1) {
|
||||
resetHour();
|
||||
if (Di == DDate.length - 1) {
|
||||
resetDay();
|
||||
if (Mi == MDate.length - 1) {
|
||||
resetMonth();
|
||||
continue goYear;
|
||||
}
|
||||
continue goMonth;
|
||||
}
|
||||
continue goDay;
|
||||
}
|
||||
continue;
|
||||
}
|
||||
// 循环"分"数组
|
||||
goMin: for (let mi = mIdx; mi < mDate.length; mi++) {
|
||||
let mm = mDate[mi] < 10 ? '0' + mDate[mi] : mDate[mi];
|
||||
|
||||
// 如果到达最大值时
|
||||
if (nSecond > sDate[sDate.length - 1]) {
|
||||
resetSecond();
|
||||
if (mi == mDate.length - 1) {
|
||||
resetMin();
|
||||
if (hi == hDate.length - 1) {
|
||||
resetHour();
|
||||
if (Di == DDate.length - 1) {
|
||||
resetDay();
|
||||
if (Mi == MDate.length - 1) {
|
||||
resetMonth();
|
||||
continue goYear;
|
||||
}
|
||||
continue goMonth;
|
||||
}
|
||||
continue goDay;
|
||||
}
|
||||
continue goHour;
|
||||
}
|
||||
continue;
|
||||
}
|
||||
// 循环"秒"数组
|
||||
goSecond: for (let si = sIdx; si <= sDate.length - 1; si++) {
|
||||
let ss = sDate[si] < 10 ? '0' + sDate[si] : sDate[si];
|
||||
// 添加当前时间（时间合法性在日期循环时已经判断）
|
||||
if (MM !== '00' && DD !== '00') {
|
||||
resultArr.push(YY + '-' + MM + '-' + DD + ' ' + hh + ':' + mm + ':' + ss)
|
||||
nums++;
|
||||
}
|
||||
// 如果条数满了就退出循环
|
||||
if (nums == 5) break goYear;
|
||||
// 如果到达最大值时
|
||||
if (si == sDate.length - 1) {
|
||||
resetSecond();
|
||||
if (mi == mDate.length - 1) {
|
||||
resetMin();
|
||||
if (hi == hDate.length - 1) {
|
||||
resetHour();
|
||||
if (Di == DDate.length - 1) {
|
||||
resetDay();
|
||||
if (Mi == MDate.length - 1) {
|
||||
resetMonth();
|
||||
continue goYear;
|
||||
}
|
||||
continue goMonth;
|
||||
}
|
||||
continue goDay;
|
||||
}
|
||||
continue goHour;
|
||||
}
|
||||
continue goMin;
|
||||
}
|
||||
} //goSecond
|
||||
} //goMin
|
||||
}//goHour
|
||||
}//goDay
|
||||
}//goMonth
|
||||
}
|
||||
// 判断100年内的结果条数
|
||||
if (resultArr.length == 0) {
|
||||
this.resultList = ['没有达到条件的结果！'];
|
||||
} else {
|
||||
this.resultList = resultArr;
|
||||
if (resultArr.length !== 5) {
|
||||
this.resultList.push('最近100年内只有上面' + resultArr.length + '条结果！')
|
||||
}
|
||||
}
|
||||
// 计算完成-显示结果
|
||||
this.isShow = true;
|
||||
|
||||
|
||||
},
|
||||
// 用于计算某位数字在数组中的索引
|
||||
getIndex(arr, value) {
|
||||
if (value <= arr[0] || value > arr[arr.length - 1]) {
|
||||
return 0;
|
||||
} else {
|
||||
for (let i = 0; i < arr.length - 1; i++) {
|
||||
if (value > arr[i] && value <= arr[i + 1]) {
|
||||
return i + 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// 获取"年"数组
|
||||
getYearArr(rule, year) {
|
||||
this.dateArr[5] = this.getOrderArr(year, year + 100);
|
||||
if (rule !== undefined) {
|
||||
if (rule.indexOf('-') >= 0) {
|
||||
this.dateArr[5] = this.getCycleArr(rule, year + 100, false)
|
||||
} else if (rule.indexOf('/') >= 0) {
|
||||
this.dateArr[5] = this.getAverageArr(rule, year + 100)
|
||||
} else if (rule !== '*') {
|
||||
this.dateArr[5] = this.getAssignArr(rule)
|
||||
}
|
||||
}
|
||||
},
|
||||
// 获取"月"数组
|
||||
getMonthArr(rule) {
|
||||
this.dateArr[4] = this.getOrderArr(1, 12);
|
||||
if (rule.indexOf('-') >= 0) {
|
||||
this.dateArr[4] = this.getCycleArr(rule, 12, false)
|
||||
} else if (rule.indexOf('/') >= 0) {
|
||||
this.dateArr[4] = this.getAverageArr(rule, 12)
|
||||
} else if (rule !== '*') {
|
||||
this.dateArr[4] = this.getAssignArr(rule)
|
||||
}
|
||||
},
|
||||
// 获取"日"数组-主要为日期规则
|
||||
getWeekArr(rule) {
|
||||
// 只有当日期规则的两个值均为“”时则表达日期是有选项的
|
||||
if (this.dayRule == '' && this.dayRuleSup == '') {
|
||||
if (rule.indexOf('-') >= 0) {
|
||||
this.dayRule = 'weekDay';
|
||||
this.dayRuleSup = this.getCycleArr(rule, 7, false)
|
||||
} else if (rule.indexOf('#') >= 0) {
|
||||
this.dayRule = 'assWeek';
|
||||
let matchRule = rule.match(/[0-9]{1}/g);
|
||||
this.dayRuleSup = [Number(matchRule[1]), Number(matchRule[0])];
|
||||
this.dateArr[3] = [1];
|
||||
if (this.dayRuleSup[1] == 7) {
|
||||
this.dayRuleSup[1] = 0;
|
||||
}
|
||||
} else if (rule.indexOf('L') >= 0) {
|
||||
this.dayRule = 'lastWeek';
|
||||
this.dayRuleSup = Number(rule.match(/[0-9]{1,2}/g)[0]);
|
||||
this.dateArr[3] = [31];
|
||||
if (this.dayRuleSup == 7) {
|
||||
this.dayRuleSup = 0;
|
||||
}
|
||||
} else if (rule !== '*' && rule !== '?') {
|
||||
this.dayRule = 'weekDay';
|
||||
this.dayRuleSup = this.getAssignArr(rule)
|
||||
}
|
||||
}
|
||||
},
|
||||
// 获取"日"数组-少量为日期规则
|
||||
getDayArr(rule) {
|
||||
this.dateArr[3] = this.getOrderArr(1, 31);
|
||||
this.dayRule = '';
|
||||
this.dayRuleSup = '';
|
||||
if (rule.indexOf('-') >= 0) {
|
||||
this.dateArr[3] = this.getCycleArr(rule, 31, false)
|
||||
this.dayRuleSup = 'null';
|
||||
} else if (rule.indexOf('/') >= 0) {
|
||||
this.dateArr[3] = this.getAverageArr(rule, 31)
|
||||
this.dayRuleSup = 'null';
|
||||
} else if (rule.indexOf('W') >= 0) {
|
||||
this.dayRule = 'workDay';
|
||||
this.dayRuleSup = Number(rule.match(/[0-9]{1,2}/g)[0]);
|
||||
this.dateArr[3] = [this.dayRuleSup];
|
||||
} else if (rule.indexOf('L') >= 0) {
|
||||
this.dayRule = 'lastDay';
|
||||
this.dayRuleSup = 'null';
|
||||
this.dateArr[3] = [31];
|
||||
} else if (rule !== '*' && rule !== '?') {
|
||||
this.dateArr[3] = this.getAssignArr(rule)
|
||||
this.dayRuleSup = 'null';
|
||||
} else if (rule == '*') {
|
||||
this.dayRuleSup = 'null';
|
||||
}
|
||||
},
|
||||
// 获取"时"数组
|
||||
getHourArr(rule) {
|
||||
this.dateArr[2] = this.getOrderArr(0, 23);
|
||||
if (rule.indexOf('-') >= 0) {
|
||||
this.dateArr[2] = this.getCycleArr(rule, 24, true)
|
||||
} else if (rule.indexOf('/') >= 0) {
|
||||
this.dateArr[2] = this.getAverageArr(rule, 23)
|
||||
} else if (rule !== '*') {
|
||||
this.dateArr[2] = this.getAssignArr(rule)
|
||||
}
|
||||
},
|
||||
// 获取"分"数组
|
||||
getMinArr(rule) {
|
||||
this.dateArr[1] = this.getOrderArr(0, 59);
|
||||
if (rule.indexOf('-') >= 0) {
|
||||
this.dateArr[1] = this.getCycleArr(rule, 60, true)
|
||||
} else if (rule.indexOf('/') >= 0) {
|
||||
this.dateArr[1] = this.getAverageArr(rule, 59)
|
||||
} else if (rule !== '*') {
|
||||
this.dateArr[1] = this.getAssignArr(rule)
|
||||
}
|
||||
},
|
||||
// 获取"秒"数组
|
||||
getSecondArr(rule) {
|
||||
this.dateArr[0] = this.getOrderArr(0, 59);
|
||||
if (rule.indexOf('-') >= 0) {
|
||||
this.dateArr[0] = this.getCycleArr(rule, 60, true)
|
||||
} else if (rule.indexOf('/') >= 0) {
|
||||
this.dateArr[0] = this.getAverageArr(rule, 59)
|
||||
} else if (rule !== '*') {
|
||||
this.dateArr[0] = this.getAssignArr(rule)
|
||||
}
|
||||
},
|
||||
// 根据传进来的min-max返回一个顺序的数组
|
||||
getOrderArr(min, max) {
|
||||
let arr = [];
|
||||
for (let i = min; i <= max; i++) {
|
||||
arr.push(i);
|
||||
}
|
||||
return arr;
|
||||
},
|
||||
// 根据规则中指定的零散值返回一个数组
|
||||
getAssignArr(rule) {
|
||||
let arr = [];
|
||||
let assiginArr = rule.split(',');
|
||||
for (let i = 0; i < assiginArr.length; i++) {
|
||||
arr[i] = Number(assiginArr[i])
|
||||
}
|
||||
arr.sort(this.compare)
|
||||
return arr;
|
||||
},
|
||||
// 根据一定算术规则计算返回一个数组
|
||||
getAverageArr(rule, limit) {
|
||||
let arr = [];
|
||||
let agArr = rule.split('/');
|
||||
let min = Number(agArr[0]);
|
||||
let step = Number(agArr[1]);
|
||||
while (min <= limit) {
|
||||
arr.push(min);
|
||||
min += step;
|
||||
}
|
||||
return arr;
|
||||
},
|
||||
// 根据规则返回一个具有周期性的数组
|
||||
getCycleArr(rule, limit, status) {
|
||||
// status--表示是否从0开始（则从1开始）
|
||||
let arr = [];
|
||||
let cycleArr = rule.split('-');
|
||||
let min = Number(cycleArr[0]);
|
||||
let max = Number(cycleArr[1]);
|
||||
if (min > max) {
|
||||
max += limit;
|
||||
}
|
||||
for (let i = min; i <= max; i++) {
|
||||
let add = 0;
|
||||
if (status == false && i % limit == 0) {
|
||||
add = limit;
|
||||
}
|
||||
arr.push(Math.round(i % limit + add))
|
||||
}
|
||||
arr.sort(this.compare)
|
||||
return arr;
|
||||
},
|
||||
// 比较数字大小（用于Array.sort）
|
||||
compare(value1, value2) {
|
||||
if (value2 - value1 > 0) {
|
||||
return -1;
|
||||
} else {
|
||||
return 1;
|
||||
}
|
||||
},
|
||||
// 格式化日期格式如：2017-9-19 18:04:33
|
||||
formatDate(value, type) {
|
||||
// 计算日期相关值
|
||||
let time = typeof value == 'number' ? new Date(value) : value;
|
||||
let Y = time.getFullYear();
|
||||
let M = time.getMonth() + 1;
|
||||
let D = time.getDate();
|
||||
let h = time.getHours();
|
||||
let m = time.getMinutes();
|
||||
let s = time.getSeconds();
|
||||
let week = time.getDay();
|
||||
// 如果传递了type的话
|
||||
if (type == undefined) {
|
||||
return Y + '-' + (M < 10 ? '0' + M : M) + '-' + (D < 10 ? '0' + D : D) + ' ' + (h < 10 ? '0' + h : h) + ':' + (m < 10 ? '0' + m : m) + ':' + (s < 10 ? '0' + s : s);
|
||||
} else if (type == 'week') {
|
||||
// 在quartz中 1为星期日
|
||||
return week + 1;
|
||||
}
|
||||
},
|
||||
// 检查日期是否存在
|
||||
checkDate(value) {
|
||||
let time = new Date(value);
|
||||
let format = this.formatDate(time)
|
||||
return value === format;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'ex': 'expressionChange'
|
||||
},
|
||||
props: ['ex'],
|
||||
mounted: function () {
|
||||
// 初始化 获取一次结果
|
||||
this.expressionChange();
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
@@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<el-form size="small">
|
||||
<el-form-item>
|
||||
<el-radio v-model='radioValue' :label="1">
|
||||
秒，允许的通配符[, - * /]
|
||||
</el-radio>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-radio v-model='radioValue' :label="2">
|
||||
周期从
|
||||
<el-input-number v-model='cycle01' :min="0" :max="58" /> -
|
||||
<el-input-number v-model='cycle02' :min="cycle01 ? cycle01 + 1 : 1" :max="59" /> 秒
|
||||
</el-radio>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-radio v-model='radioValue' :label="3">
|
||||
从
|
||||
<el-input-number v-model='average01' :min="0" :max="58" /> 秒开始，每
|
||||
<el-input-number v-model='average02' :min="1" :max="59 - average01 || 0" /> 秒执行一次
|
||||
</el-radio>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-radio v-model='radioValue' :label="4">
|
||||
指定
|
||||
<el-select clearable v-model="checkboxList" placeholder="可多选" multiple style="width:100%">
|
||||
<el-option v-for="item in 60" :key="item" :value="item-1">{{item-1}}</el-option>
|
||||
</el-select>
|
||||
</el-radio>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
radioValue: 1,
|
||||
cycle01: 1,
|
||||
cycle02: 2,
|
||||
average01: 0,
|
||||
average02: 1,
|
||||
checkboxList: [],
|
||||
checkNum: this.$options.propsData.check
|
||||
}
|
||||
},
|
||||
name: 'crontab-second',
|
||||
props: ['check', 'radioParent'],
|
||||
methods: {
|
||||
// 单选按钮值变化时
|
||||
radioChange() {
|
||||
switch (this.radioValue) {
|
||||
case 1:
|
||||
this.$emit('update', 'second', '*', 'second');
|
||||
break;
|
||||
case 2:
|
||||
this.$emit('update', 'second', this.cycleTotal);
|
||||
break;
|
||||
case 3:
|
||||
this.$emit('update', 'second', this.averageTotal);
|
||||
break;
|
||||
case 4:
|
||||
this.$emit('update', 'second', this.checkboxString);
|
||||
break;
|
||||
}
|
||||
},
|
||||
// 周期两个值变化时
|
||||
cycleChange() {
|
||||
if (this.radioValue == '2') {
|
||||
this.$emit('update', 'second', this.cycleTotal);
|
||||
}
|
||||
},
|
||||
// 平均两个值变化时
|
||||
averageChange() {
|
||||
if (this.radioValue == '3') {
|
||||
this.$emit('update', 'second', this.averageTotal);
|
||||
}
|
||||
},
|
||||
// checkbox值变化时
|
||||
checkboxChange() {
|
||||
if (this.radioValue == '4') {
|
||||
this.$emit('update', 'second', this.checkboxString);
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'radioValue': 'radioChange',
|
||||
'cycleTotal': 'cycleChange',
|
||||
'averageTotal': 'averageChange',
|
||||
'checkboxString': 'checkboxChange',
|
||||
radioParent() {
|
||||
this.radioValue = this.radioParent
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 计算两个周期值
|
||||
cycleTotal: function () {
|
||||
const cycle01 = this.checkNum(this.cycle01, 0, 58)
|
||||
const cycle02 = this.checkNum(this.cycle02, cycle01 ? cycle01 + 1 : 1, 59)
|
||||
return cycle01 + '-' + cycle02;
|
||||
},
|
||||
// 计算平均用到的值
|
||||
averageTotal: function () {
|
||||
const average01 = this.checkNum(this.average01, 0, 58)
|
||||
const average02 = this.checkNum(this.average02, 1, 59 - average01 || 0)
|
||||
return average01 + '/' + average02;
|
||||
},
|
||||
// 计算勾选的checkbox值合集
|
||||
checkboxString: function () {
|
||||
let str = this.checkboxList.join();
|
||||
return str == '' ? '*' : str;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,202 @@
|
||||
<template>
|
||||
<el-form size='small'>
|
||||
<el-form-item>
|
||||
<el-radio v-model='radioValue' :label="1">
|
||||
周，允许的通配符[, - * ? / L #]
|
||||
</el-radio>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-radio v-model='radioValue' :label="2">
|
||||
不指定
|
||||
</el-radio>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-radio v-model='radioValue' :label="3">
|
||||
周期从星期
|
||||
<el-select clearable v-model="cycle01">
|
||||
<el-option
|
||||
v-for="(item,index) of weekList"
|
||||
:key="index"
|
||||
:label="item.value"
|
||||
:value="item.key"
|
||||
:disabled="item.key === 1"
|
||||
>{{item.value}}</el-option>
|
||||
</el-select>
|
||||
-
|
||||
<el-select clearable v-model="cycle02">
|
||||
<el-option
|
||||
v-for="(item,index) of weekList"
|
||||
:key="index"
|
||||
:label="item.value"
|
||||
:value="item.key"
|
||||
:disabled="item.key < cycle01 && item.key !== 1"
|
||||
>{{item.value}}</el-option>
|
||||
</el-select>
|
||||
</el-radio>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-radio v-model='radioValue' :label="4">
|
||||
第
|
||||
<el-input-number v-model='average01' :min="1" :max="4" /> 周的星期
|
||||
<el-select clearable v-model="average02">
|
||||
<el-option v-for="(item,index) of weekList" :key="index" :label="item.value" :value="item.key">{{item.value}}</el-option>
|
||||
</el-select>
|
||||
</el-radio>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-radio v-model='radioValue' :label="5">
|
||||
本月最后一个星期
|
||||
<el-select clearable v-model="weekday">
|
||||
<el-option v-for="(item,index) of weekList" :key="index" :label="item.value" :value="item.key">{{item.value}}</el-option>
|
||||
</el-select>
|
||||
</el-radio>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-radio v-model='radioValue' :label="6">
|
||||
指定
|
||||
<el-select clearable v-model="checkboxList" placeholder="可多选" multiple style="width:100%">
|
||||
<el-option v-for="(item,index) of weekList" :key="index" :label="item.value" :value="String(item.key)">{{item.value}}</el-option>
|
||||
</el-select>
|
||||
</el-radio>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
radioValue: 2,
|
||||
weekday: 2,
|
||||
cycle01: 2,
|
||||
cycle02: 3,
|
||||
average01: 1,
|
||||
average02: 2,
|
||||
checkboxList: [],
|
||||
weekList: [
|
||||
{
|
||||
key: 2,
|
||||
value: '星期一'
|
||||
},
|
||||
{
|
||||
key: 3,
|
||||
value: '星期二'
|
||||
},
|
||||
{
|
||||
key: 4,
|
||||
value: '星期三'
|
||||
},
|
||||
{
|
||||
key: 5,
|
||||
value: '星期四'
|
||||
},
|
||||
{
|
||||
key: 6,
|
||||
value: '星期五'
|
||||
},
|
||||
{
|
||||
key: 7,
|
||||
value: '星期六'
|
||||
},
|
||||
{
|
||||
key: 1,
|
||||
value: '星期日'
|
||||
}
|
||||
],
|
||||
checkNum: this.$options.propsData.check
|
||||
}
|
||||
},
|
||||
name: 'crontab-week',
|
||||
props: ['check', 'cron'],
|
||||
methods: {
|
||||
// 单选按钮值变化时
|
||||
radioChange() {
|
||||
if (this.radioValue !== 2 && this.cron.day !== '?') {
|
||||
this.$emit('update', 'day', '?', 'week');
|
||||
}
|
||||
switch (this.radioValue) {
|
||||
case 1:
|
||||
this.$emit('update', 'week', '*');
|
||||
break;
|
||||
case 2:
|
||||
this.$emit('update', 'week', '?');
|
||||
break;
|
||||
case 3:
|
||||
this.$emit('update', 'week', this.cycleTotal);
|
||||
break;
|
||||
case 4:
|
||||
this.$emit('update', 'week', this.averageTotal);
|
||||
break;
|
||||
case 5:
|
||||
this.$emit('update', 'week', this.weekdayCheck + 'L');
|
||||
break;
|
||||
case 6:
|
||||
this.$emit('update', 'week', this.checkboxString);
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
// 周期两个值变化时
|
||||
cycleChange() {
|
||||
if (this.radioValue == '3') {
|
||||
this.$emit('update', 'week', this.cycleTotal);
|
||||
}
|
||||
},
|
||||
// 平均两个值变化时
|
||||
averageChange() {
|
||||
if (this.radioValue == '4') {
|
||||
this.$emit('update', 'week', this.averageTotal);
|
||||
}
|
||||
},
|
||||
// 最近工作日值变化时
|
||||
weekdayChange() {
|
||||
if (this.radioValue == '5') {
|
||||
this.$emit('update', 'week', this.weekday + 'L');
|
||||
}
|
||||
},
|
||||
// checkbox值变化时
|
||||
checkboxChange() {
|
||||
if (this.radioValue == '6') {
|
||||
this.$emit('update', 'week', this.checkboxString);
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
'radioValue': 'radioChange',
|
||||
'cycleTotal': 'cycleChange',
|
||||
'averageTotal': 'averageChange',
|
||||
'weekdayCheck': 'weekdayChange',
|
||||
'checkboxString': 'checkboxChange',
|
||||
},
|
||||
computed: {
|
||||
// 计算两个周期值
|
||||
cycleTotal: function () {
|
||||
this.cycle01 = this.checkNum(this.cycle01, 1, 7)
|
||||
this.cycle02 = this.checkNum(this.cycle02, 1, 7)
|
||||
return this.cycle01 + '-' + this.cycle02;
|
||||
},
|
||||
// 计算平均用到的值
|
||||
averageTotal: function () {
|
||||
this.average01 = this.checkNum(this.average01, 1, 4)
|
||||
this.average02 = this.checkNum(this.average02, 1, 7)
|
||||
return this.average02 + '#' + this.average01;
|
||||
},
|
||||
// 最近的工作日（格式）
|
||||
weekdayCheck: function () {
|
||||
this.weekday = this.checkNum(this.weekday, 1, 7)
|
||||
return this.weekday;
|
||||
},
|
||||
// 计算勾选的checkbox值合集
|
||||
checkboxString: function () {
|
||||
let str = this.checkboxList.join();
|
||||
return str == '' ? '*' : str;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,131 @@
|
||||
<template>
|
||||
<el-form size="small">
|
||||
<el-form-item>
|
||||
<el-radio :label="1" v-model='radioValue'>
|
||||
不填，允许的通配符[, - * /]
|
||||
</el-radio>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-radio :label="2" v-model='radioValue'>
|
||||
每年
|
||||
</el-radio>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-radio :label="3" v-model='radioValue'>
|
||||
周期从
|
||||
<el-input-number v-model='cycle01' :min='fullYear' :max="2098" /> -
|
||||
<el-input-number v-model='cycle02' :min="cycle01 ? cycle01 + 1 : fullYear + 1" :max="2099" />
|
||||
</el-radio>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-radio :label="4" v-model='radioValue'>
|
||||
从
|
||||
<el-input-number v-model='average01' :min='fullYear' :max="2098"/> 年开始，每
|
||||
<el-input-number v-model='average02' :min="1" :max="2099 - average01 || fullYear" /> 年执行一次
|
||||
</el-radio>
|
||||
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-radio :label="5" v-model='radioValue'>
|
||||
指定
|
||||
<el-select clearable v-model="checkboxList" placeholder="可多选" multiple>
|
||||
<el-option v-for="item in 9" :key="item" :value="item - 1 + fullYear" :label="item -1 + fullYear" />
|
||||
</el-select>
|
||||
</el-radio>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
fullYear: 0,
|
||||
radioValue: 1,
|
||||
cycle01: 0,
|
||||
cycle02: 0,
|
||||
average01: 0,
|
||||
average02: 1,
|
||||
checkboxList: [],
|
||||
checkNum: this.$options.propsData.check
|
||||
}
|
||||
},
|
||||
name: 'crontab-year',
|
||||
props: ['check', 'month', 'cron'],
|
||||
methods: {
|
||||
// 单选按钮值变化时
|
||||
radioChange() {
|
||||
switch (this.radioValue) {
|
||||
case 1:
|
||||
this.$emit('update', 'year', '');
|
||||
break;
|
||||
case 2:
|
||||
this.$emit('update', 'year', '*');
|
||||
break;
|
||||
case 3:
|
||||
this.$emit('update', 'year', this.cycleTotal);
|
||||
break;
|
||||
case 4:
|
||||
this.$emit('update', 'year', this.averageTotal);
|
||||
break;
|
||||
case 5:
|
||||
this.$emit('update', 'year', this.checkboxString);
|
||||
break;
|
||||
}
|
||||
},
|
||||
// 周期两个值变化时
|
||||
cycleChange() {
|
||||
if (this.radioValue == '3') {
|
||||
this.$emit('update', 'year', this.cycleTotal);
|
||||
}
|
||||
},
|
||||
// 平均两个值变化时
|
||||
averageChange() {
|
||||
if (this.radioValue == '4') {
|
||||
this.$emit('update', 'year', this.averageTotal);
|
||||
}
|
||||
},
|
||||
// checkbox值变化时
|
||||
checkboxChange() {
|
||||
if (this.radioValue == '5') {
|
||||
this.$emit('update', 'year', this.checkboxString);
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'radioValue': 'radioChange',
|
||||
'cycleTotal': 'cycleChange',
|
||||
'averageTotal': 'averageChange',
|
||||
'checkboxString': 'checkboxChange'
|
||||
},
|
||||
computed: {
|
||||
// 计算两个周期值
|
||||
cycleTotal: function () {
|
||||
const cycle01 = this.checkNum(this.cycle01, this.fullYear, 2098)
|
||||
const cycle02 = this.checkNum(this.cycle02, cycle01 ? cycle01 + 1 : this.fullYear + 1, 2099)
|
||||
return cycle01 + '-' + cycle02;
|
||||
},
|
||||
// 计算平均用到的值
|
||||
averageTotal: function () {
|
||||
const average01 = this.checkNum(this.average01, this.fullYear, 2098)
|
||||
const average02 = this.checkNum(this.average02, 1, 2099 - average01 || this.fullYear)
|
||||
return average01 + '/' + average02;
|
||||
},
|
||||
// 计算勾选的checkbox值合集
|
||||
checkboxString: function () {
|
||||
let str = this.checkboxList.join();
|
||||
return str;
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
// 仅获取当前年份
|
||||
this.fullYear = Number(new Date().getFullYear());
|
||||
this.cycle01 = this.fullYear
|
||||
this.average01 = this.fullYear
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,49 @@
|
||||
import Vue from 'vue'
|
||||
import store from '@/store'
|
||||
import DataDict from '@/utils/dict'
|
||||
import { getDicts as getDicts } from '@/api/system/dict/data'
|
||||
|
||||
function searchDictByKey(dict, key) {
|
||||
if (key == null && key == "") {
|
||||
return null
|
||||
}
|
||||
try {
|
||||
for (let i = 0; i < dict.length; i++) {
|
||||
if (dict[i].key == key) {
|
||||
return dict[i].value
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
function install() {
|
||||
Vue.use(DataDict, {
|
||||
metas: {
|
||||
'*': {
|
||||
labelField: 'dictLabel',
|
||||
valueField: 'dictValue',
|
||||
request(dictMeta) {
|
||||
const storeDict = searchDictByKey(store.getters.dict, dictMeta.type)
|
||||
if (storeDict) {
|
||||
return new Promise(resolve => { resolve(storeDict) })
|
||||
} else {
|
||||
return new Promise((resolve, reject) => {
|
||||
getDicts(dictMeta.type).then(res => {
|
||||
store.dispatch('dict/setDict', { key: dictMeta.type, value: res.data })
|
||||
resolve(res.data)
|
||||
}).catch(error => {
|
||||
reject(error)
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
export default {
|
||||
install,
|
||||
}
|
||||
@@ -0,0 +1,89 @@
|
||||
<template>
|
||||
<div>
|
||||
<template v-for="(item, index) in options">
|
||||
<template v-if="values.includes(item.value)">
|
||||
<span
|
||||
v-if="(item.raw.listClass == 'default' || item.raw.listClass == '') && (item.raw.cssClass == '' || item.raw.cssClass == null)"
|
||||
:key="item.value"
|
||||
:index="index"
|
||||
:class="item.raw.cssClass"
|
||||
>{{ item.label + ' ' }}</span
|
||||
>
|
||||
<el-tag
|
||||
v-else
|
||||
:disable-transitions="true"
|
||||
:key="item.value"
|
||||
:index="index"
|
||||
:type="item.raw.listClass == 'primary' ? '' : item.raw.listClass"
|
||||
:class="item.raw.cssClass"
|
||||
>
|
||||
{{ item.label + ' ' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</template>
|
||||
<template v-if="unmatch && showValue">
|
||||
{{ unmatchArray | handleArray }}
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "DictTag",
|
||||
props: {
|
||||
options: {
|
||||
type: Array,
|
||||
default: null,
|
||||
},
|
||||
value: [Number, String, Array],
|
||||
// 当未找到匹配的数据时，显示value
|
||||
showValue: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
separator: {
|
||||
type: String,
|
||||
default: ","
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
unmatchArray: [], // 记录未匹配的项
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
values() {
|
||||
if (this.value === null || typeof this.value === 'undefined' || this.value === '') return []
|
||||
return Array.isArray(this.value) ? this.value.map(item => '' + item) : String(this.value).split(this.separator)
|
||||
},
|
||||
unmatch() {
|
||||
this.unmatchArray = []
|
||||
// 没有value不显示
|
||||
if (this.value === null || typeof this.value === 'undefined' || this.value === '' || this.options.length === 0) return false
|
||||
// 传入值为数组
|
||||
let unmatch = false // 添加一个标志来判断是否有未匹配项
|
||||
this.values.forEach(item => {
|
||||
if (!this.options.some(v => v.value === item)) {
|
||||
this.unmatchArray.push(item)
|
||||
unmatch = true // 如果有未匹配项，将标志设置为true
|
||||
}
|
||||
})
|
||||
return unmatch // 返回标志的值
|
||||
},
|
||||
|
||||
},
|
||||
filters: {
|
||||
handleArray(array) {
|
||||
if (array.length === 0) return '';
|
||||
return array.reduce((pre, cur) => {
|
||||
return pre + ' ' + cur;
|
||||
})
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.el-tag + .el-tag {
|
||||
margin-left: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,274 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-upload
|
||||
:action="uploadUrl"
|
||||
:before-upload="handleBeforeUpload"
|
||||
:on-success="handleUploadSuccess"
|
||||
:on-error="handleUploadError"
|
||||
name="file"
|
||||
:show-file-list="false"
|
||||
:headers="headers"
|
||||
style="display: none"
|
||||
ref="upload"
|
||||
v-if="this.type == 'url'"
|
||||
>
|
||||
</el-upload>
|
||||
<div class="editor" ref="editor" :style="styles"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Quill from "quill";
|
||||
import "quill/dist/quill.core.css";
|
||||
import "quill/dist/quill.snow.css";
|
||||
import "quill/dist/quill.bubble.css";
|
||||
import { getToken } from "@/utils/auth";
|
||||
|
||||
export default {
|
||||
name: "Editor",
|
||||
props: {
|
||||
/* 编辑器的内容 */
|
||||
value: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
/* 高度 */
|
||||
height: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
/* 最小高度 */
|
||||
minHeight: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
/* 只读 */
|
||||
readOnly: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
/* 上传文件大小限制(MB) */
|
||||
fileSize: {
|
||||
type: Number,
|
||||
default: 5,
|
||||
},
|
||||
/* 类型（base64格式、url格式） */
|
||||
type: {
|
||||
type: String,
|
||||
default: "url",
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
|
||||
headers: {
|
||||
Authorization: "Bearer " + getToken()
|
||||
},
|
||||
Quill: null,
|
||||
currentValue: "",
|
||||
options: {
|
||||
theme: "snow",
|
||||
bounds: document.body,
|
||||
debug: "warn",
|
||||
modules: {
|
||||
// 工具栏配置
|
||||
toolbar: [
|
||||
["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
|
||||
["blockquote", "code-block"], // 引用 代码块
|
||||
[{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
|
||||
[{ indent: "-1" }, { indent: "+1" }], // 缩进
|
||||
[{ size: ["small", false, "large", "huge"] }], // 字体大小
|
||||
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
|
||||
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
|
||||
[{ align: [] }], // 对齐方式
|
||||
["clean"], // 清除文本格式
|
||||
["link", "image", "video"] // 链接、图片、视频
|
||||
],
|
||||
},
|
||||
placeholder: "请输入内容",
|
||||
readOnly: this.readOnly,
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
styles() {
|
||||
let style = {};
|
||||
if (this.minHeight) {
|
||||
style.minHeight = `${this.minHeight}px`;
|
||||
}
|
||||
if (this.height) {
|
||||
style.height = `${this.height}px`;
|
||||
}
|
||||
return style;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler(val) {
|
||||
if (val !== this.currentValue) {
|
||||
this.currentValue = val === null ? "" : val;
|
||||
if (this.Quill) {
|
||||
this.Quill.pasteHTML(this.currentValue);
|
||||
}
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.Quill = null;
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
const editor = this.$refs.editor;
|
||||
this.Quill = new Quill(editor, this.options);
|
||||
// 如果设置了上传地址则自定义图片上传事件
|
||||
if (this.type == 'url') {
|
||||
let toolbar = this.Quill.getModule("toolbar");
|
||||
toolbar.addHandler("image", (value) => {
|
||||
if (value) {
|
||||
this.$refs.upload.$children[0].$refs.input.click();
|
||||
} else {
|
||||
this.quill.format("image", false);
|
||||
}
|
||||
});
|
||||
}
|
||||
this.Quill.pasteHTML(this.currentValue);
|
||||
this.Quill.on("text-change", (delta, oldDelta, source) => {
|
||||
const html = this.$refs.editor.children[0].innerHTML;
|
||||
const text = this.Quill.getText();
|
||||
const quill = this.Quill;
|
||||
this.currentValue = html;
|
||||
this.$emit("input", html);
|
||||
this.$emit("on-change", { html, text, quill });
|
||||
});
|
||||
this.Quill.on("text-change", (delta, oldDelta, source) => {
|
||||
this.$emit("on-text-change", delta, oldDelta, source);
|
||||
});
|
||||
this.Quill.on("selection-change", (range, oldRange, source) => {
|
||||
this.$emit("on-selection-change", range, oldRange, source);
|
||||
});
|
||||
this.Quill.on("editor-change", (eventName, ...args) => {
|
||||
this.$emit("on-editor-change", eventName, ...args);
|
||||
});
|
||||
},
|
||||
// 上传前校检格式和大小
|
||||
handleBeforeUpload(file) {
|
||||
const type = ["image/jpeg", "image/jpg", "image/png", "image/svg"];
|
||||
const isJPG = type.includes(file.type);
|
||||
// 检验文件格式
|
||||
if (!isJPG) {
|
||||
this.$message.error(`图片格式错误!`);
|
||||
return false;
|
||||
}
|
||||
// 校检文件大小
|
||||
if (this.fileSize) {
|
||||
const isLt = file.size / 1024 / 1024 < this.fileSize;
|
||||
if (!isLt) {
|
||||
this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
},
|
||||
handleUploadSuccess(res, file) {
|
||||
// 如果上传成功
|
||||
if (res.code == 200) {
|
||||
// 获取富文本组件实例
|
||||
let quill = this.Quill;
|
||||
// 获取光标所在位置
|
||||
let length = quill.getSelection().index;
|
||||
// 插入图片 res.url为服务器返回的图片地址
|
||||
quill.insertEmbed(length, "image", process.env.VUE_APP_BASE_API + res.fileName);
|
||||
// 调整光标到最后
|
||||
quill.setSelection(length + 1);
|
||||
} else {
|
||||
this.$message.error("图片插入失败");
|
||||
}
|
||||
},
|
||||
handleUploadError() {
|
||||
this.$message.error("图片插入失败");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.editor, .ql-toolbar {
|
||||
white-space: pre-wrap !important;
|
||||
line-height: normal !important;
|
||||
}
|
||||
.quill-img {
|
||||
display: none;
|
||||
}
|
||||
.ql-snow .ql-tooltip[data-mode="link"]::before {
|
||||
content: "请输入链接地址:";
|
||||
}
|
||||
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
|
||||
border-right: 0px;
|
||||
content: "保存";
|
||||
padding-right: 0px;
|
||||
}
|
||||
.ql-snow .ql-tooltip[data-mode="video"]::before {
|
||||
content: "请输入视频地址:";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
|
||||
content: "14px";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
|
||||
content: "10px";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
|
||||
content: "18px";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
|
||||
content: "32px";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
|
||||
content: "文本";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
|
||||
content: "标题1";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
|
||||
content: "标题2";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
|
||||
content: "标题3";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
|
||||
content: "标题4";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
|
||||
content: "标题5";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
|
||||
content: "标题6";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
|
||||
content: "标准字体";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
|
||||
content: "衬线字体";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
|
||||
content: "等宽字体";
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<div class="upload-file">
|
||||
<el-upload
|
||||
multiple
|
||||
:action="uploadFileUrl"
|
||||
:before-upload="handleBeforeUpload"
|
||||
:file-list="fileList"
|
||||
:limit="limit"
|
||||
:on-error="handleUploadError"
|
||||
:on-exceed="handleExceed"
|
||||
:on-success="handleUploadSuccess"
|
||||
:show-file-list="false"
|
||||
:headers="headers"
|
||||
class="upload-file-uploader"
|
||||
ref="fileUpload"
|
||||
>
|
||||
<!-- 上传按钮 -->
|
||||
<el-button size="mini" type="primary">选取文件</el-button>
|
||||
<!-- 上传提示 -->
|
||||
<div class="el-upload__tip" slot="tip" v-if="showTip">
|
||||
请上传
|
||||
<template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
|
||||
<template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
|
||||
的文件
|
||||
</div>
|
||||
</el-upload>
|
||||
|
||||
<!-- 文件列表 -->
|
||||
<transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
|
||||
<li :key="file.url" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList">
|
||||
<el-link :href="`${baseUrl}${file.url}`" :underline="false" target="_blank">
|
||||
<span class="el-icon-document"> {{ getFileName(file.name) }} </span>
|
||||
</el-link>
|
||||
<div class="ele-upload-list__item-content-action">
|
||||
<el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link>
|
||||
</div>
|
||||
</li>
|
||||
</transition-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getToken } from "@/utils/auth";
|
||||
|
||||
export default {
|
||||
name: "FileUpload",
|
||||
props: {
|
||||
// 值
|
||||
value: [String, Object, Array],
|
||||
// 数量限制
|
||||
limit: {
|
||||
type: Number,
|
||||
default: 5,
|
||||
},
|
||||
// 大小限制(MB)
|
||||
fileSize: {
|
||||
type: Number,
|
||||
default: 5,
|
||||
},
|
||||
// 文件类型, 例如['png', 'jpg', 'jpeg']
|
||||
fileType: {
|
||||
type: Array,
|
||||
default: () => ["doc", "xls", "ppt", "txt", "pdf"],
|
||||
},
|
||||
// 是否显示提示
|
||||
isShowTip: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
number: 0,
|
||||
uploadList: [],
|
||||
baseUrl: process.env.VUE_APP_BASE_API,
|
||||
uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传文件服务器地址
|
||||
headers: {
|
||||
Authorization: "Bearer " + getToken(),
|
||||
},
|
||||
fileList: [],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler(val) {
|
||||
if (val) {
|
||||
let temp = 1;
|
||||
// 首先将值转为数组
|
||||
const list = Array.isArray(val) ? val : this.value.split(',');
|
||||
// 然后将数组转为对象数组
|
||||
this.fileList = list.map(item => {
|
||||
if (typeof item === "string") {
|
||||
item = { name: item, url: item };
|
||||
}
|
||||
item.uid = item.uid || new Date().getTime() + temp++;
|
||||
return item;
|
||||
});
|
||||
} else {
|
||||
this.fileList = [];
|
||||
return [];
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 是否显示提示
|
||||
showTip() {
|
||||
return this.isShowTip && (this.fileType || this.fileSize);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 上传前校检格式和大小
|
||||
handleBeforeUpload(file) {
|
||||
// 校检文件类型
|
||||
if (this.fileType) {
|
||||
const fileName = file.name.split('.');
|
||||
const fileExt = fileName[fileName.length - 1];
|
||||
const isTypeOk = this.fileType.indexOf(fileExt) >= 0;
|
||||
if (!isTypeOk) {
|
||||
this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
// 校检文件大小
|
||||
if (this.fileSize) {
|
||||
const isLt = file.size / 1024 / 1024 < this.fileSize;
|
||||
if (!isLt) {
|
||||
this.$modal.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
this.$modal.loading("正在上传文件，请稍候...");
|
||||
this.number++;
|
||||
return true;
|
||||
},
|
||||
// 文件个数超出
|
||||
handleExceed() {
|
||||
this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
|
||||
},
|
||||
// 上传失败
|
||||
handleUploadError(err) {
|
||||
this.$modal.msgError("上传文件失败，请重试");
|
||||
this.$modal.closeLoading();
|
||||
},
|
||||
// 上传成功回调
|
||||
handleUploadSuccess(res, file) {
|
||||
if (res.code === 200) {
|
||||
this.uploadList.push({ name: res.fileName, url: res.fileName });
|
||||
this.uploadedSuccessfully();
|
||||
} else {
|
||||
this.number--;
|
||||
this.$modal.closeLoading();
|
||||
this.$modal.msgError(res.msg);
|
||||
this.$refs.fileUpload.handleRemove(file);
|
||||
this.uploadedSuccessfully();
|
||||
}
|
||||
},
|
||||
// 删除文件
|
||||
handleDelete(index) {
|
||||
this.fileList.splice(index, 1);
|
||||
this.$emit("input", this.listToString(this.fileList));
|
||||
},
|
||||
// 上传结束处理
|
||||
uploadedSuccessfully() {
|
||||
if (this.number > 0 && this.uploadList.length === this.number) {
|
||||
this.fileList = this.fileList.concat(this.uploadList);
|
||||
this.uploadList = [];
|
||||
this.number = 0;
|
||||
this.$emit("input", this.listToString(this.fileList));
|
||||
this.$modal.closeLoading();
|
||||
}
|
||||
},
|
||||
// 获取文件名称
|
||||
getFileName(name) {
|
||||
// 如果是url那么取最后的名字 如果不是直接返回
|
||||
if (name.lastIndexOf("/") > -1) {
|
||||
return name.slice(name.lastIndexOf("/") + 1);
|
||||
} else {
|
||||
return name;
|
||||
}
|
||||
},
|
||||
// 对象转成指定字符串分隔
|
||||
listToString(list, separator) {
|
||||
let strs = "";
|
||||
separator = separator || ",";
|
||||
for (let i in list) {
|
||||
strs += list[i].url + separator;
|
||||
}
|
||||
return strs != '' ? strs.substr(0, strs.length - 1) : '';
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.upload-file-uploader {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.upload-file-list .el-upload-list__item {
|
||||
border: 1px solid #e4e7ed;
|
||||
line-height: 2;
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
}
|
||||
.upload-file-list .ele-upload-list__item-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: inherit;
|
||||
}
|
||||
.ele-upload-list__item-content-action .el-link {
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<div style="padding: 0 15px;" @click="toggleClick">
|
||||
<svg
|
||||
:class="{'is-active':isActive}"
|
||||
class="hamburger"
|
||||
viewBox="0 0 1024 1024"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="64"
|
||||
height="64"
|
||||
>
|
||||
<path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Hamburger',
|
||||
props: {
|
||||
isActive: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggleClick() {
|
||||
this.$emit('toggleClick')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.hamburger {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.hamburger.is-active {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,198 @@
|
||||
<template>
|
||||
<div :class="{'show':show}" class="header-search">
|
||||
<svg-icon class-name="search-icon" icon-class="search" @click.stop="click" />
|
||||
<el-select
|
||||
ref="headerSearchSelect"
|
||||
v-model="search"
|
||||
:remote-method="querySearch"
|
||||
filterable
|
||||
default-first-option
|
||||
remote
|
||||
placeholder="Search"
|
||||
class="header-search-select"
|
||||
@change="change"
|
||||
>
|
||||
<el-option v-for="option in options" :key="option.item.path" :value="option.item" :label="option.item.title.join(' > ')" />
|
||||
</el-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// fuse is a lightweight fuzzy-search module
|
||||
// make search results more in line with expectations
|
||||
import Fuse from 'fuse.js/dist/fuse.min.js'
|
||||
import path from 'path'
|
||||
|
||||
export default {
|
||||
name: 'HeaderSearch',
|
||||
data() {
|
||||
return {
|
||||
search: '',
|
||||
options: [],
|
||||
searchPool: [],
|
||||
show: false,
|
||||
fuse: undefined
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
routes() {
|
||||
return this.$store.getters.permission_routes
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
routes() {
|
||||
this.searchPool = this.generateRoutes(this.routes)
|
||||
},
|
||||
searchPool(list) {
|
||||
this.initFuse(list)
|
||||
},
|
||||
show(value) {
|
||||
if (value) {
|
||||
document.body.addEventListener('click', this.close)
|
||||
} else {
|
||||
document.body.removeEventListener('click', this.close)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.searchPool = this.generateRoutes(this.routes)
|
||||
},
|
||||
methods: {
|
||||
click() {
|
||||
this.show = !this.show
|
||||
if (this.show) {
|
||||
this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.focus()
|
||||
}
|
||||
},
|
||||
close() {
|
||||
this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.blur()
|
||||
this.options = []
|
||||
this.show = false
|
||||
},
|
||||
change(val) {
|
||||
const path = val.path;
|
||||
const query = val.query;
|
||||
if(this.ishttp(val.path)) {
|
||||
// http(s):// 路径新窗口打开
|
||||
const pindex = path.indexOf("http");
|
||||
window.open(path.substr(pindex, path.length), "_blank");
|
||||
} else {
|
||||
if (query) {
|
||||
this.$router.push({ path: path, query: JSON.parse(query) });
|
||||
} else {
|
||||
this.$router.push(path)
|
||||
}
|
||||
}
|
||||
this.search = ''
|
||||
this.options = []
|
||||
this.$nextTick(() => {
|
||||
this.show = false
|
||||
})
|
||||
},
|
||||
initFuse(list) {
|
||||
this.fuse = new Fuse(list, {
|
||||
shouldSort: true,
|
||||
threshold: 0.4,
|
||||
location: 0,
|
||||
distance: 100,
|
||||
minMatchCharLength: 1,
|
||||
keys: [{
|
||||
name: 'title',
|
||||
weight: 0.7
|
||||
}, {
|
||||
name: 'path',
|
||||
weight: 0.3
|
||||
}]
|
||||
})
|
||||
},
|
||||
// Filter out the routes that can be displayed in the sidebar
|
||||
// And generate the internationalized title
|
||||
generateRoutes(routes, basePath = '/', prefixTitle = []) {
|
||||
let res = []
|
||||
|
||||
for (const router of routes) {
|
||||
// skip hidden router
|
||||
if (router.hidden) { continue }
|
||||
|
||||
const data = {
|
||||
path: !this.ishttp(router.path) ? path.resolve(basePath, router.path) : router.path,
|
||||
title: [...prefixTitle]
|
||||
}
|
||||
|
||||
if (router.meta && router.meta.title) {
|
||||
data.title = [...data.title, router.meta.title]
|
||||
|
||||
if (router.redirect !== 'noRedirect') {
|
||||
// only push the routes with title
|
||||
// special case: need to exclude parent router without redirect
|
||||
res.push(data)
|
||||
}
|
||||
}
|
||||
|
||||
if (router.query) {
|
||||
data.query = router.query
|
||||
}
|
||||
|
||||
// recursive child routes
|
||||
if (router.children) {
|
||||
const tempRoutes = this.generateRoutes(router.children, data.path, data.title)
|
||||
if (tempRoutes.length >= 1) {
|
||||
res = [...res, ...tempRoutes]
|
||||
}
|
||||
}
|
||||
}
|
||||
return res
|
||||
},
|
||||
querySearch(query) {
|
||||
if (query !== '') {
|
||||
this.options = this.fuse.search(query)
|
||||
} else {
|
||||
this.options = []
|
||||
}
|
||||
},
|
||||
ishttp(url) {
|
||||
return url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.header-search {
|
||||
font-size: 0 !important;
|
||||
|
||||
.search-icon {
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.header-search-select {
|
||||
font-size: 18px;
|
||||
transition: width 0.2s;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
border-radius: 0;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
|
||||
::v-deep .el-input__inner {
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
box-shadow: none !important;
|
||||
border-bottom: 1px solid #d9d9d9;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
&.show {
|
||||
.header-search-select {
|
||||
width: 210px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,104 @@
|
||||
<!-- @author zhengjie -->
|
||||
<template>
|
||||
<div class="icon-body">
|
||||
<el-input v-model="name" class="icon-search" clearable placeholder="请输入图标名称" @clear="filterIcons" @input="filterIcons">
|
||||
<i slot="suffix" class="el-icon-search el-input__icon" />
|
||||
</el-input>
|
||||
<div class="icon-list">
|
||||
<div class="list-container">
|
||||
<div v-for="(item, index) in iconList" class="icon-item-wrapper" :key="index" @click="selectedIcon(item)">
|
||||
<div :class="['icon-item', { active: activeIcon === item }]">
|
||||
<svg-icon :icon-class="item" class-name="icon" style="height: 25px;width: 16px;"/>
|
||||
<span>{{ item }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import icons from './requireIcons'
|
||||
export default {
|
||||
name: 'IconSelect',
|
||||
props: {
|
||||
activeIcon: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
name: '',
|
||||
iconList: icons
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
filterIcons() {
|
||||
this.iconList = icons
|
||||
if (this.name) {
|
||||
this.iconList = this.iconList.filter(item => item.includes(this.name))
|
||||
}
|
||||
},
|
||||
selectedIcon(name) {
|
||||
this.$emit('selected', name)
|
||||
document.body.click()
|
||||
},
|
||||
reset() {
|
||||
this.name = ''
|
||||
this.iconList = icons
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.icon-body {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
.icon-search {
|
||||
position: relative;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.icon-list {
|
||||
height: 200px;
|
||||
overflow: auto;
|
||||
.list-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.icon-item-wrapper {
|
||||
width: calc(100% / 3);
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
.icon-item {
|
||||
display: flex;
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 5px;
|
||||
&:hover {
|
||||
background: #ececec;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.icon {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
vertical-align: -0.15em;
|
||||
fill: currentColor;
|
||||
padding-left: 2px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
.icon-item.active {
|
||||
background: #ececec;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,11 @@
|
||||
|
||||
const req = require.context('../../assets/icons/svg', false, /\.svg$/)
|
||||
const requireAll = requireContext => requireContext.keys()
|
||||
|
||||
const re = /\.\/(.*)\.svg/
|
||||
|
||||
const icons = requireAll(req).map(i => {
|
||||
return i.match(re)[1]
|
||||
})
|
||||
|
||||
export default icons
|
||||
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<el-image
|
||||
:src="`${realSrc}`"
|
||||
fit="cover"
|
||||
:style="`width:${realWidth};height:${realHeight};`"
|
||||
:preview-src-list="realSrcList"
|
||||
>
|
||||
<div slot="error" class="image-slot">
|
||||
<i class="el-icon-picture-outline"></i>
|
||||
</div>
|
||||
</el-image>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { isExternal } from "@/utils/validate";
|
||||
|
||||
export default {
|
||||
name: "ImagePreview",
|
||||
props: {
|
||||
src: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
width: {
|
||||
type: [Number, String],
|
||||
default: ""
|
||||
},
|
||||
height: {
|
||||
type: [Number, String],
|
||||
default: ""
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
realSrc() {
|
||||
if (!this.src) {
|
||||
return;
|
||||
}
|
||||
let real_src = this.src.split(",")[0];
|
||||
if (isExternal(real_src)) {
|
||||
return real_src;
|
||||
}
|
||||
return process.env.VUE_APP_BASE_API + real_src;
|
||||
},
|
||||
realSrcList() {
|
||||
if (!this.src) {
|
||||
return;
|
||||
}
|
||||
let real_src_list = this.src.split(",");
|
||||
let srcList = [];
|
||||
real_src_list.forEach(item => {
|
||||
if (isExternal(item)) {
|
||||
return srcList.push(item);
|
||||
}
|
||||
return srcList.push(process.env.VUE_APP_BASE_API + item);
|
||||
});
|
||||
return srcList;
|
||||
},
|
||||
realWidth() {
|
||||
return typeof this.width == "string" ? this.width : `${this.width}px`;
|
||||
},
|
||||
realHeight() {
|
||||
return typeof this.height == "string" ? this.height : `${this.height}px`;
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.el-image {
|
||||
border-radius: 5px;
|
||||
background-color: #ebeef5;
|
||||
box-shadow: 0 0 5px 1px #ccc;
|
||||
::v-deep .el-image__inner {
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
::v-deep .image-slot {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #909399;
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,226 @@
|
||||
<template>
|
||||
<div class="component-upload-image">
|
||||
<el-upload
|
||||
multiple
|
||||
:action="uploadImgUrl"
|
||||
list-type="picture-card"
|
||||
:on-success="handleUploadSuccess"
|
||||
:before-upload="handleBeforeUpload"
|
||||
:limit="limit"
|
||||
:on-error="handleUploadError"
|
||||
:on-exceed="handleExceed"
|
||||
ref="imageUpload"
|
||||
:on-remove="handleDelete"
|
||||
:show-file-list="true"
|
||||
:headers="headers"
|
||||
:file-list="fileList"
|
||||
:on-preview="handlePictureCardPreview"
|
||||
:class="{hide: this.fileList.length >= this.limit}"
|
||||
>
|
||||
<i class="el-icon-plus"></i>
|
||||
</el-upload>
|
||||
|
||||
<!-- 上传提示 -->
|
||||
<div class="el-upload__tip" slot="tip" v-if="showTip">
|
||||
请上传
|
||||
<template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
|
||||
<template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
|
||||
的文件
|
||||
</div>
|
||||
|
||||
<el-dialog
|
||||
:visible.sync="dialogVisible"
|
||||
title="预览"
|
||||
width="800"
|
||||
append-to-body
|
||||
>
|
||||
<img
|
||||
:src="dialogImageUrl"
|
||||
style="display: block; max-width: 100%; margin: 0 auto"
|
||||
/>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getToken } from "@/utils/auth";
|
||||
|
||||
export default {
|
||||
props: {
|
||||
value: [String, Object, Array],
|
||||
// 图片数量限制
|
||||
limit: {
|
||||
type: Number,
|
||||
default: 5,
|
||||
},
|
||||
// 大小限制(MB)
|
||||
fileSize: {
|
||||
type: Number,
|
||||
default: 5,
|
||||
},
|
||||
// 文件类型, 例如['png', 'jpg', 'jpeg']
|
||||
fileType: {
|
||||
type: Array,
|
||||
default: () => ["png", "jpg", "jpeg"],
|
||||
},
|
||||
// 是否显示提示
|
||||
isShowTip: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
number: 0,
|
||||
uploadList: [],
|
||||
dialogImageUrl: "",
|
||||
dialogVisible: false,
|
||||
hideUpload: false,
|
||||
baseUrl: process.env.VUE_APP_BASE_API,
|
||||
uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
|
||||
headers: {
|
||||
Authorization: "Bearer " + getToken(),
|
||||
},
|
||||
fileList: []
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler(val) {
|
||||
if (val) {
|
||||
// 首先将值转为数组
|
||||
const list = Array.isArray(val) ? val : this.value.split(',');
|
||||
// 然后将数组转为对象数组
|
||||
this.fileList = list.map(item => {
|
||||
if (typeof item === "string") {
|
||||
if (item.indexOf(this.baseUrl) === -1) {
|
||||
item = { name: this.baseUrl + item, url: this.baseUrl + item };
|
||||
} else {
|
||||
item = { name: item, url: item };
|
||||
}
|
||||
}
|
||||
return item;
|
||||
});
|
||||
} else {
|
||||
this.fileList = [];
|
||||
return [];
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 是否显示提示
|
||||
showTip() {
|
||||
return this.isShowTip && (this.fileType || this.fileSize);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 上传前loading加载
|
||||
handleBeforeUpload(file) {
|
||||
let isImg = false;
|
||||
if (this.fileType.length) {
|
||||
let fileExtension = "";
|
||||
if (file.name.lastIndexOf(".") > -1) {
|
||||
fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
|
||||
}
|
||||
isImg = this.fileType.some(type => {
|
||||
if (file.type.indexOf(type) > -1) return true;
|
||||
if (fileExtension && fileExtension.indexOf(type) > -1) return true;
|
||||
return false;
|
||||
});
|
||||
} else {
|
||||
isImg = file.type.indexOf("image") > -1;
|
||||
}
|
||||
|
||||
if (!isImg) {
|
||||
this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}图片格式文件!`);
|
||||
return false;
|
||||
}
|
||||
if (this.fileSize) {
|
||||
const isLt = file.size / 1024 / 1024 < this.fileSize;
|
||||
if (!isLt) {
|
||||
this.$modal.msgError(`上传头像图片大小不能超过 ${this.fileSize} MB!`);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
this.$modal.loading("正在上传图片，请稍候...");
|
||||
this.number++;
|
||||
},
|
||||
// 文件个数超出
|
||||
handleExceed() {
|
||||
this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
|
||||
},
|
||||
// 上传成功回调
|
||||
handleUploadSuccess(res, file) {
|
||||
if (res.code === 200) {
|
||||
this.uploadList.push({ name: res.fileName, url: res.fileName });
|
||||
this.uploadedSuccessfully();
|
||||
} else {
|
||||
this.number--;
|
||||
this.$modal.closeLoading();
|
||||
this.$modal.msgError(res.msg);
|
||||
this.$refs.imageUpload.handleRemove(file);
|
||||
this.uploadedSuccessfully();
|
||||
}
|
||||
},
|
||||
// 删除图片
|
||||
handleDelete(file) {
|
||||
const findex = this.fileList.map(f => f.name).indexOf(file.name);
|
||||
if (findex > -1) {
|
||||
this.fileList.splice(findex, 1);
|
||||
this.$emit("input", this.listToString(this.fileList));
|
||||
}
|
||||
},
|
||||
// 上传失败
|
||||
handleUploadError() {
|
||||
this.$modal.msgError("上传图片失败，请重试");
|
||||
this.$modal.closeLoading();
|
||||
},
|
||||
// 上传结束处理
|
||||
uploadedSuccessfully() {
|
||||
if (this.number > 0 && this.uploadList.length === this.number) {
|
||||
this.fileList = this.fileList.concat(this.uploadList);
|
||||
this.uploadList = [];
|
||||
this.number = 0;
|
||||
this.$emit("input", this.listToString(this.fileList));
|
||||
this.$modal.closeLoading();
|
||||
}
|
||||
},
|
||||
// 预览
|
||||
handlePictureCardPreview(file) {
|
||||
this.dialogImageUrl = file.url;
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
// 对象转成指定字符串分隔
|
||||
listToString(list, separator) {
|
||||
let strs = "";
|
||||
separator = separator || ",";
|
||||
for (let i in list) {
|
||||
if (list[i].url) {
|
||||
strs += list[i].url.replace(this.baseUrl, "") + separator;
|
||||
}
|
||||
}
|
||||
return strs != '' ? strs.substr(0, strs.length - 1) : '';
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
// .el-upload--picture-card 控制加号部分
|
||||
::v-deep.hide .el-upload--picture-card {
|
||||
display: none;
|
||||
}
|
||||
// 去掉动画效果
|
||||
::v-deep .el-list-enter-active,
|
||||
::v-deep .el-list-leave-active {
|
||||
transition: all 0s;
|
||||
}
|
||||
|
||||
::v-deep .el-list-enter, .el-list-leave-active {
|
||||
opacity: 0;
|
||||
transform: translateY(0);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<div :class="{'hidden':hidden}" class="pagination-container">
|
||||
<el-pagination
|
||||
:background="background"
|
||||
:current-page.sync="currentPage"
|
||||
:page-size.sync="pageSize"
|
||||
:layout="layout"
|
||||
:page-sizes="pageSizes"
|
||||
:pager-count="pagerCount"
|
||||
:total="total"
|
||||
v-bind="$attrs"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { scrollTo } from '@/utils/scroll-to'
|
||||
|
||||
export default {
|
||||
name: 'Pagination',
|
||||
props: {
|
||||
total: {
|
||||
required: true,
|
||||
type: Number
|
||||
},
|
||||
page: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
limit: {
|
||||
type: Number,
|
||||
default: 20
|
||||
},
|
||||
pageSizes: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [10, 20, 30, 50]
|
||||
}
|
||||
},
|
||||
// 移动端页码按钮的数量端默认值5
|
||||
pagerCount: {
|
||||
type: Number,
|
||||
default: document.body.clientWidth < 992 ? 5 : 7
|
||||
},
|
||||
layout: {
|
||||
type: String,
|
||||
default: 'total, sizes, prev, pager, next, jumper'
|
||||
},
|
||||
background: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
autoScroll: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
hidden: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
currentPage: {
|
||||
get() {
|
||||
return this.page
|
||||
},
|
||||
set(val) {
|
||||
this.$emit('update:page', val)
|
||||
}
|
||||
},
|
||||
pageSize: {
|
||||
get() {
|
||||
return this.limit
|
||||
},
|
||||
set(val) {
|
||||
this.$emit('update:limit', val)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSizeChange(val) {
|
||||
if (this.currentPage * val > this.total) {
|
||||
this.currentPage = 1
|
||||
}
|
||||
this.$emit('pagination', { page: this.currentPage, limit: val })
|
||||
if (this.autoScroll) {
|
||||
scrollTo(0, 800)
|
||||
}
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.$emit('pagination', { page: val, limit: this.pageSize })
|
||||
if (this.autoScroll) {
|
||||
scrollTo(0, 800)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.pagination-container {
|
||||
background: #fff;
|
||||
padding: 32px 16px;
|
||||
}
|
||||
.pagination-container.hidden {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<div :style="{zIndex:zIndex,height:height,width:width}" class="pan-item">
|
||||
<div class="pan-info">
|
||||
<div class="pan-info-roles-container">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
<!-- eslint-disable-next-line -->
|
||||
<div :style="{backgroundImage: `url(${image})`}" class="pan-thumb"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'PanThumb',
|
||||
props: {
|
||||
image: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
zIndex: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '150px'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '150px'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.pan-item {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
cursor: default;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.pan-info-roles-container {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pan-thumb {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
transform-origin: 95% 40%;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
/* .pan-thumb:after {
|
||||
content: '';
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: 40%;
|
||||
left: 95%;
|
||||
margin: -4px 0 0 -4px;
|
||||
background: radial-gradient(ellipse at center, rgba(14, 14, 14, 1) 0%, rgba(125, 126, 125, 1) 100%);
|
||||
box-shadow: 0 0 1px rgba(255, 255, 255, 0.9);
|
||||
} */
|
||||
|
||||
.pan-info {
|
||||
position: absolute;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.pan-info h3 {
|
||||
color: #fff;
|
||||
text-transform: uppercase;
|
||||
position: relative;
|
||||
letter-spacing: 2px;
|
||||
font-size: 18px;
|
||||
margin: 0 60px;
|
||||
padding: 22px 0 0 0;
|
||||
height: 85px;
|
||||
font-family: 'Open Sans', Arial, sans-serif;
|
||||
text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.pan-info p {
|
||||
color: #fff;
|
||||
padding: 10px 5px;
|
||||
font-style: italic;
|
||||
margin: 0 30px;
|
||||
font-size: 12px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.pan-info p a {
|
||||
display: block;
|
||||
color: #333;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
font-size: 9px;
|
||||
letter-spacing: 1px;
|
||||
padding-top: 24px;
|
||||
margin: 7px auto 0;
|
||||
font-family: 'Open Sans', Arial, sans-serif;
|
||||
opacity: 0;
|
||||
transition: transform 0.3s ease-in-out 0.2s, opacity 0.3s ease-in-out 0.2s, background 0.2s linear 0s;
|
||||
transform: translateX(60px) rotate(90deg);
|
||||
}
|
||||
|
||||
.pan-info p a:hover {
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.pan-item:hover .pan-thumb {
|
||||
transform: rotate(-110deg);
|
||||
}
|
||||
|
||||
.pan-item:hover .pan-info p a {
|
||||
opacity: 1;
|
||||
transform: translateX(0px) rotate(0deg);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,3 @@
|
||||
<template >
|
||||
<router-view />
|
||||
</template>
|
||||
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"extends": [
|
||||
"bpmnlint:recommended",
|
||||
"plugin:local/recommended"
|
||||
],
|
||||
"rules": {
|
||||
"local/no-manual-task": "warn"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
/**
|
||||
* 存储流程设计相关参数
|
||||
*/
|
||||
export default class BpmData {
|
||||
constructor() {
|
||||
this.controls = [] // 设计器控件
|
||||
this.init()
|
||||
}
|
||||
|
||||
init() {
|
||||
this.controls = [
|
||||
{
|
||||
action: 'create.start-event',
|
||||
title: '开始'
|
||||
},
|
||||
{
|
||||
action: 'create.intermediate-event',
|
||||
title: '中间'
|
||||
},
|
||||
{
|
||||
action: 'create.end-event',
|
||||
title: '结束'
|
||||
},
|
||||
{
|
||||
action: 'create.exclusive-gateway',
|
||||
title: '网关'
|
||||
},
|
||||
{
|
||||
action: 'create.task',
|
||||
title: '任务'
|
||||
},
|
||||
{
|
||||
action: 'create.user-task',
|
||||
title: '用户任务'
|
||||
},
|
||||
{
|
||||
action: 'create.user-sign-task',
|
||||
title: '会签任务'
|
||||
},
|
||||
{
|
||||
action: 'create.subprocess-expanded',
|
||||
title: '子流程'
|
||||
},
|
||||
{
|
||||
action: 'create.data-object',
|
||||
title: '数据对象'
|
||||
},
|
||||
{
|
||||
action: 'create.data-store',
|
||||
title: '数据存储'
|
||||
},
|
||||
{
|
||||
action: 'create.participant-expanded',
|
||||
title: '扩展流程'
|
||||
},
|
||||
{
|
||||
action: 'create.group',
|
||||
title: '分组'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
// 获取控件配置信息
|
||||
getControl(action) {
|
||||
const result = this.controls.filter(item => item.action === action)
|
||||
return result[0] || {}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,168 @@
|
||||
<template>
|
||||
<div ref="propertyPanel" class="property-panel">
|
||||
<div v-if="nodeName" class="node-name">{{ nodeName }}</div>
|
||||
<component
|
||||
:is="getComponent"
|
||||
v-if="element"
|
||||
:element="element"
|
||||
:modeler="modeler"
|
||||
:users="users"
|
||||
:groups="groups"
|
||||
:exps="exps"
|
||||
:categorys="categorys"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import taskPanel from './components/nodePanel/task'
|
||||
import startEndPanel from './components/nodePanel/startEnd'
|
||||
import processPanel from './components/nodePanel/process'
|
||||
import sequenceFlowPanel from './components/nodePanel/sequenceFlow'
|
||||
import gatewayPanel from './components/nodePanel/gateway'
|
||||
import { NodeName } from './lang/zh'
|
||||
|
||||
export default {
|
||||
name: 'PropertyPanel',
|
||||
components: { processPanel, taskPanel, startEndPanel, sequenceFlowPanel, gatewayPanel },
|
||||
props: {
|
||||
users: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
groups: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
categorys: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
exps: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
modeler: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
element: null,
|
||||
form: {
|
||||
id: '',
|
||||
name: '',
|
||||
color: null
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getComponent() {
|
||||
const type = this.element?.type
|
||||
if (['bpmn:IntermediateThrowEvent', 'bpmn:StartEvent', 'bpmn:EndEvent'].includes(type)) {
|
||||
return 'startEndPanel'
|
||||
}
|
||||
if ([
|
||||
'bpmn:UserTask',
|
||||
'bpmn:Task',
|
||||
'bpmn:SendTask',
|
||||
'bpmn:ReceiveTask',
|
||||
'bpmn:ManualTask',
|
||||
'bpmn:BusinessRuleTask',
|
||||
'bpmn:ServiceTask',
|
||||
'bpmn:ScriptTask'
|
||||
// 'bpmn:CallActivity',
|
||||
// 'bpmn:SubProcess'
|
||||
].includes(type)) {
|
||||
return 'taskPanel'
|
||||
}
|
||||
if (type === 'bpmn:SequenceFlow') {
|
||||
return 'sequenceFlowPanel'
|
||||
}
|
||||
if ([
|
||||
'bpmn:InclusiveGateway',
|
||||
'bpmn:ExclusiveGateway',
|
||||
'bpmn:ParallelGateway',
|
||||
'bpmn:EventBasedGateway'
|
||||
].includes(type)) {
|
||||
return 'gatewayPanel'
|
||||
}
|
||||
if (type === 'bpmn:Process') {
|
||||
return 'processPanel'
|
||||
}
|
||||
return null
|
||||
},
|
||||
nodeName() {
|
||||
if (this.element) {
|
||||
const bizObj = this.element.businessObject
|
||||
const type = bizObj?.eventDefinitions
|
||||
? bizObj.eventDefinitions[0].$type
|
||||
: bizObj.$type
|
||||
return NodeName[type] || type
|
||||
}
|
||||
return ''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.handleModeler()
|
||||
},
|
||||
methods: {
|
||||
handleModeler() {
|
||||
this.modeler.on('root.added', e => {
|
||||
if (e.element.type === 'bpmn:Process') {
|
||||
this.element = null
|
||||
this.$nextTick().then(() => {
|
||||
this.element = e.element
|
||||
})
|
||||
}
|
||||
})
|
||||
this.modeler.on('element.click', e => {
|
||||
const { element } = e
|
||||
if (element.type === 'bpmn:Process'
|
||||
|| element.type === 'bpmn:SequenceFlow'
|
||||
|| element.type === 'bpmn:EndEvent' ) {
|
||||
this.$nextTick().then(() => {
|
||||
this.element = element
|
||||
})
|
||||
}
|
||||
})
|
||||
this.modeler.on('selection.changed', e => {
|
||||
// hack 同类型面板不刷新
|
||||
this.element = null
|
||||
const element = e.newSelection[0]
|
||||
if (element) {
|
||||
this.$nextTick().then(() => {
|
||||
this.element = element
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.property-panel {
|
||||
padding: 20px 20px;
|
||||
// reset element css
|
||||
.el-form--label-top .el-form-item__label {
|
||||
padding: 0;
|
||||
}
|
||||
// 设置设计器右侧表单高度
|
||||
.el-form-item {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.tab-table .el-form-item {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.node-name{
|
||||
border-bottom: 1px solid #ccc;
|
||||
padding: 0 0 10px 20px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #444;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,32 @@
|
||||
import translations from '../lang/zh'
|
||||
|
||||
// export default function customTranslate(template, replacements) {
|
||||
// replacements = replacements || {}
|
||||
//
|
||||
// // Translate
|
||||
// template = translations[template] || template
|
||||
//
|
||||
// // Replace
|
||||
// return template.replace(/{([^}]+)}/g, function(_, key) {
|
||||
// var str = replacements[key]
|
||||
// if (
|
||||
// translations[replacements[key]] !== null &&
|
||||
// translations[replacements[key]] !== 'undefined'
|
||||
// ) {
|
||||
// str = translations[replacements[key]]
|
||||
// }
|
||||
// return str || '{' + key + '}'
|
||||
// })
|
||||
// }
|
||||
|
||||
export default function customTranslate(template, replacements) {
|
||||
replacements = replacements || {};
|
||||
|
||||
// Translate
|
||||
template = translations[template] || template;
|
||||
|
||||
// Replace
|
||||
return template.replace(/{([^}]+)}/g, function(_, key) {
|
||||
return replacements[key] || '{' + key + '}';
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
|
||||
import executionListenerDialog from '../components/nodePanel/property/executionListener'
|
||||
export default {
|
||||
components: {
|
||||
executionListenerDialog
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
executionListenerLength: 0,
|
||||
dialogName: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
computedExecutionListenerLength() {
|
||||
this.executionListenerLength = this.element.businessObject.extensionElements?.values?.length ?? 0
|
||||
},
|
||||
finishExecutionListener() {
|
||||
if (this.dialogName === 'executionListenerDialog') {
|
||||
this.computedExecutionListenerLength()
|
||||
}
|
||||
this.dialogName = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
import xcrud from 'xcrud'
|
||||
import golbalConfig from 'xcrud/package/common/config'
|
||||
import showConfig from '../flowable/showConfig'
|
||||
golbalConfig.set({
|
||||
input: {
|
||||
// size: 'mini'
|
||||
},
|
||||
select: {
|
||||
// size: 'mini'
|
||||
},
|
||||
colorPicker: {
|
||||
showAlpha: true
|
||||
},
|
||||
xform: {
|
||||
form: {
|
||||
labelWidth: 'auto'
|
||||
// size: 'mini'
|
||||
}
|
||||
}
|
||||
})
|
||||
export default {
|
||||
components: { xForm: xcrud.xForm },
|
||||
props: {
|
||||
modeler: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
element: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
categorys: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'formData.id': function(val) {
|
||||
this.updateProperties({ id: val })
|
||||
},
|
||||
'formData.name': function(val) {
|
||||
this.updateProperties({ name: val })
|
||||
},
|
||||
'formData.documentation': function(val) {
|
||||
if (!val) {
|
||||
this.updateProperties({ documentation: [] })
|
||||
return
|
||||
}
|
||||
const documentationElement = this.modeler.get('moddle').create('bpmn:Documentation', { text: val })
|
||||
this.updateProperties({ documentation: [documentationElement] })
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateProperties(properties) {
|
||||
const modeling = this.modeler.get('modeling')
|
||||
modeling.updateProperties(this.element, properties)
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
elementType() {
|
||||
const bizObj = this.element.businessObject
|
||||
return bizObj.eventDefinitions
|
||||
? bizObj.eventDefinitions[0].$type
|
||||
: bizObj.$type
|
||||
},
|
||||
showConfig() {
|
||||
return showConfig[this.elementType] || {}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import xcrud from 'xcrud'
|
||||
import golbalConfig from 'xcrud/package/common/config'
|
||||
golbalConfig.set({
|
||||
input: {
|
||||
// size: 'mini'
|
||||
},
|
||||
select: {
|
||||
// size: 'mini'
|
||||
},
|
||||
colorPicker: {
|
||||
showAlpha: true
|
||||
},
|
||||
xform: {
|
||||
form: {
|
||||
labelWidth: 'auto'
|
||||
// size: 'mini'
|
||||
}
|
||||
}
|
||||
})
|
||||
export default {
|
||||
components: { xForm: xcrud.xForm }
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
export function commonParse(element) {
|
||||
const result = {
|
||||
...element.businessObject,
|
||||
...element.businessObject.$attrs
|
||||
}
|
||||
return formatJsonKeyValue(result)
|
||||
}
|
||||
|
||||
export function formatJsonKeyValue(result) {
|
||||
// 移除flowable前缀，格式化数组
|
||||
for (const key in result) {
|
||||
if (key.indexOf('flowable:') === 0) {
|
||||
const newKey = key.replace('flowable:', '')
|
||||
result[newKey] = result[key]
|
||||
delete result[key]
|
||||
}
|
||||
}
|
||||
result = documentationParse(result)
|
||||
return result
|
||||
}
|
||||
|
||||
export function documentationParse(obj) {
|
||||
if ('documentation' in obj) {
|
||||
let str = ''
|
||||
obj.documentation.forEach(item => {
|
||||
str += item.text
|
||||
})
|
||||
obj.documentation = str
|
||||
}
|
||||
return obj
|
||||
}
|
||||
|
||||
export function conditionExpressionParse(obj) {
|
||||
if ('conditionExpression' in obj) {
|
||||
if (obj.conditionExpression) {
|
||||
obj.conditionExpression = obj.conditionExpression.body
|
||||
}
|
||||
}
|
||||
return obj
|
||||
}
|
||||
|
||||
export function userTaskParse(obj) {
|
||||
for (const key in obj) {
|
||||
if (key === 'candidateUsers') {
|
||||
obj.userType = 'candidateUsers'
|
||||
obj[key] = obj[key]?.split(',') || []
|
||||
} else if (key === 'candidateGroups') {
|
||||
obj.userType = 'candidateGroups'
|
||||
obj[key] = obj[key]?.split(',') || []
|
||||
} else if (key === 'assignee') {
|
||||
obj.userType = 'assignee'
|
||||
}
|
||||
}
|
||||
return obj
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
export default class CustomContextPad {
|
||||
constructor(config, contextPad, create, elementFactory, injector, translate) {
|
||||
this.create = create;
|
||||
this.elementFactory = elementFactory;
|
||||
this.translate = translate;
|
||||
|
||||
if (config.autoPlace !== false) {
|
||||
this.autoPlace = injector.get('autoPlace', false);
|
||||
}
|
||||
|
||||
contextPad.registerProvider(this); // 定义这是一个contextPad
|
||||
}
|
||||
|
||||
getContextPadEntries(element) {}
|
||||
}
|
||||
|
||||
CustomContextPad.$inject = [
|
||||
'config',
|
||||
'contextPad',
|
||||
'create',
|
||||
'elementFactory',
|
||||
'injector',
|
||||
'translate'
|
||||
];
|
||||
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<div>
|
||||
<x-form ref="xForm" v-model="formData" :config="formConfig">
|
||||
<template #executionListener>
|
||||
<el-badge :value="executionListenerLength">
|
||||
<el-button size="small" @click="dialogName = 'executionListenerDialog'">编辑</el-button>
|
||||
</el-badge>
|
||||
</template>
|
||||
</x-form>
|
||||
<executionListenerDialog
|
||||
v-if="dialogName === 'executionListenerDialog'"
|
||||
:element="element"
|
||||
:modeler="modeler"
|
||||
@close="finishExecutionListener"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mixinPanel from '../../common/mixinPanel'
|
||||
import mixinExecutionListener from '../../common/mixinExecutionListener'
|
||||
import { commonParse } from '../../common/parseElement'
|
||||
export default {
|
||||
mixins: [mixinPanel, mixinExecutionListener],
|
||||
data() {
|
||||
return {
|
||||
formData: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
formConfig() {
|
||||
return {
|
||||
inline: false,
|
||||
item: [
|
||||
{
|
||||
xType: 'input',
|
||||
name: 'id',
|
||||
label: '节点 id',
|
||||
rules: [{ required: true, message: 'Id 不能为空' }]
|
||||
},
|
||||
{
|
||||
xType: 'input',
|
||||
name: 'name',
|
||||
label: '节点名称'
|
||||
},
|
||||
{
|
||||
xType: 'input',
|
||||
name: 'documentation',
|
||||
label: '节点描述'
|
||||
},
|
||||
{
|
||||
xType: 'slot',
|
||||
name: 'executionListener',
|
||||
label: '执行监听器'
|
||||
},
|
||||
{
|
||||
xType: 'switch',
|
||||
name: 'async',
|
||||
label: '异步',
|
||||
activeText: '是',
|
||||
inactiveText: '否'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'formData.async': function(val) {
|
||||
if (val === '') val = null
|
||||
this.updateProperties({ 'flowable:async': val })
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.formData = commonParse(this.element)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<div>
|
||||
<x-form ref="xForm" v-model="formData" :config="formConfig">
|
||||
<template #executionListener>
|
||||
<el-badge :value="executionListenerLength">
|
||||
<el-button size="small" @click="dialogName = 'executionListenerDialog'">编辑</el-button>
|
||||
</el-badge>
|
||||
</template>
|
||||
<template #signal>
|
||||
<el-badge :value="signalLength">
|
||||
<el-button size="small" @click="dialogName = 'signalDialog'">编辑</el-button>
|
||||
</el-badge>
|
||||
</template>
|
||||
</x-form>
|
||||
<executionListenerDialog
|
||||
v-if="dialogName === 'executionListenerDialog'"
|
||||
:element="element"
|
||||
:modeler="modeler"
|
||||
@close="finishExecutionListener"
|
||||
/>
|
||||
<signalDialog
|
||||
v-if="dialogName === 'signalDialog'"
|
||||
:element="element"
|
||||
:modeler="modeler"
|
||||
@close="finishExecutionListener"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mixinPanel from '../../common/mixinPanel'
|
||||
import mixinExecutionListener from '../../common/mixinExecutionListener'
|
||||
import signalDialog from './property/signal'
|
||||
import { commonParse } from '../../common/parseElement'
|
||||
export default {
|
||||
components: {
|
||||
signalDialog
|
||||
},
|
||||
mixins: [mixinPanel, mixinExecutionListener],
|
||||
data() {
|
||||
return {
|
||||
signalLength: 0,
|
||||
formData: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
formConfig() {
|
||||
const _this = this
|
||||
return {
|
||||
inline: false,
|
||||
item: [
|
||||
{
|
||||
xType: 'select',
|
||||
name: 'processCategory',
|
||||
label: '流程分类',
|
||||
dic: { data: _this.categorys, label: 'dictLabel', value: 'dictValue' }
|
||||
},
|
||||
{
|
||||
xType: 'input',
|
||||
name: 'id',
|
||||
label: '流程标识key',
|
||||
rules: [{ required: true, message: 'Id 不能为空' }]
|
||||
},
|
||||
{
|
||||
xType: 'input',
|
||||
name: 'name',
|
||||
label: '流程名称'
|
||||
},
|
||||
{
|
||||
xType: 'input',
|
||||
name: 'documentation',
|
||||
label: '节点描述'
|
||||
},
|
||||
{
|
||||
xType: 'slot',
|
||||
name: 'executionListener',
|
||||
label: '执行监听器'
|
||||
},
|
||||
{
|
||||
xType: 'slot',
|
||||
name: 'signal',
|
||||
label: '信号定义'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'formData.processCategory': function(val) {
|
||||
if (val === '') val = null
|
||||
this.updateProperties({ 'flowable:processCategory': val })
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.formData = commonParse(this.element)
|
||||
},
|
||||
methods: {
|
||||
computedSignalLength() {
|
||||
this.signalLength = this.element.businessObject.extensionElements?.values?.length ?? 0
|
||||
},
|
||||
finishSignal() {
|
||||
if (this.dialogName === 'signalDialog') {
|
||||
this.computedSignalLength()
|
||||
}
|
||||
this.dialogName = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,217 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
title="执行监听器"
|
||||
:visible.sync="dialogVisible"
|
||||
width="900px"
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="false"
|
||||
:show-close="false"
|
||||
@closed="$emit('close')"
|
||||
>
|
||||
<x-form ref="xForm" v-model="formData" :config="formConfig">
|
||||
<template #params="scope">
|
||||
<el-badge :value="scope.row.params ? scope.row.params.length : 0" type="primary">
|
||||
<el-button size="small" @click="configParam(scope.$index)">配置</el-button>
|
||||
</el-badge>
|
||||
</template>
|
||||
</x-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" size="medium" @click="closeDialog">确 定</el-button>
|
||||
</span>
|
||||
<listener-list
|
||||
:visible="listenerDialogVisible"
|
||||
@close="() => this.listenerDialogVisible = false"
|
||||
@submit="addListener"
|
||||
/>
|
||||
</el-dialog>
|
||||
<listenerParam v-if="showParamDialog" :value="formData.executionListener[nowIndex].params" @close="finishConfigParam" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mixinPanel from '../../../common/mixinPanel'
|
||||
import listenerParam from './listenerParam'
|
||||
import FlowListener from '@/components/flow/Listener'
|
||||
import ListenerList from '@/components/Process/components/nodePanel/property/listenerList'
|
||||
export default {
|
||||
components: { ListenerList, listenerParam, FlowListener },
|
||||
mixins: [mixinPanel],
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: true,
|
||||
listenerDialogVisible: false,
|
||||
showParamDialog: false,
|
||||
nowIndex: null,
|
||||
formData: {
|
||||
executionListener: []
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
formConfig() {
|
||||
// const _this = this
|
||||
return {
|
||||
inline: false,
|
||||
item: [
|
||||
{
|
||||
xType: 'tabs',
|
||||
tabs: [
|
||||
{
|
||||
label: '执行监听器',
|
||||
name: 'executionListener',
|
||||
column: [
|
||||
{
|
||||
label: '事件',
|
||||
name: 'event',
|
||||
width: 180,
|
||||
rules: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }],
|
||||
xType: 'select',
|
||||
dic: [
|
||||
{ label: 'start', value: 'start' },
|
||||
{ label: 'end', value: 'end' },
|
||||
{ label: 'take', value: 'take' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '类型',
|
||||
name: 'type',
|
||||
width: 180,
|
||||
rules: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }],
|
||||
xType: 'select',
|
||||
dic: [
|
||||
{ label: '类', value: 'class' },
|
||||
{ label: '表达式', value: 'expression' },
|
||||
{ label: '委托表达式', value: 'delegateExpression' }
|
||||
],
|
||||
tooltip: `类：示例 com.company.MyCustomListener，自定义类必须实现 org.flowable.engine.delegate.ExecutionListener 接口 <br />
|
||||
表达式：示例 \${myObject.callMethod(task, task.eventName)} <br />
|
||||
委托表达式：示例 \${myListenerSpringBean} ，该 springBean 需要实现 org.flowable.engine.delegate.ExecutionListener 接口
|
||||
`
|
||||
},
|
||||
{
|
||||
label: '值',
|
||||
name: 'className',
|
||||
xType: 'input',
|
||||
rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }]
|
||||
},
|
||||
{
|
||||
xType: 'slot',
|
||||
label: '参数',
|
||||
width: 120,
|
||||
slot: true,
|
||||
name: 'params'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => this.addButton())
|
||||
this.formData.executionListener = this.element.businessObject.extensionElements?.values
|
||||
.filter(item => item.$type === 'flowable:ExecutionListener')
|
||||
.map(item => {
|
||||
let type
|
||||
if ('class' in item) type = 'class'
|
||||
if ('expression' in item) type = 'expression'
|
||||
if ('delegateExpression' in item) type = 'delegateExpression'
|
||||
return {
|
||||
event: item.event,
|
||||
type: type,
|
||||
className: item[type],
|
||||
params: item.fields?.map(field => {
|
||||
let fieldType
|
||||
if ('stringValue' in field) fieldType = 'stringValue'
|
||||
if ('expression' in field) fieldType = 'expression'
|
||||
return {
|
||||
name: field.name,
|
||||
type: fieldType,
|
||||
value: field[fieldType]
|
||||
}
|
||||
}) ?? []
|
||||
}
|
||||
}) ?? []
|
||||
},
|
||||
methods: {
|
||||
addButton() {
|
||||
const button = document.createElement('button')
|
||||
button.innerText = '内置监听器'
|
||||
button.setAttribute('type', 'button')
|
||||
button.setAttribute('class', 'el-button el-button--primary el-button--mini')
|
||||
button.addEventListener('click', () => this.listenerDialogVisible = true)
|
||||
const div = document.getElementById('pane-executionListener')
|
||||
const table = div.getElementsByClassName('el-table')[0]
|
||||
div.insertBefore(button, table)
|
||||
},
|
||||
configParam(index) {
|
||||
this.nowIndex = index
|
||||
const nowObj = this.formData.executionListener[index]
|
||||
if (!nowObj.params) {
|
||||
nowObj.params = []
|
||||
}
|
||||
this.showParamDialog = true
|
||||
},
|
||||
finishConfigParam(param) {
|
||||
this.showParamDialog = false
|
||||
// hack 数量不更新问题
|
||||
const cache = this.formData.executionListener[this.nowIndex]
|
||||
cache.params = param
|
||||
this.$set(this.formData.executionListener[this.nowIndex], this.nowIndex, cache)
|
||||
this.nowIndex = null
|
||||
},
|
||||
updateElement() {
|
||||
if (this.formData.executionListener?.length) {
|
||||
let extensionElements = this.element.businessObject.get('extensionElements')
|
||||
if (!extensionElements) {
|
||||
extensionElements = this.modeler.get('moddle').create('bpmn:ExtensionElements')
|
||||
}
|
||||
// 清除旧值
|
||||
extensionElements.values = extensionElements.values?.filter(item => item.$type !== 'flowable:ExecutionListener') ?? []
|
||||
this.formData.executionListener.forEach(item => {
|
||||
const executionListener = this.modeler.get('moddle').create('flowable:ExecutionListener')
|
||||
executionListener['event'] = item.event
|
||||
executionListener[item.type] = item.className
|
||||
if (item.params && item.params.length) {
|
||||
item.params.forEach(field => {
|
||||
const fieldElement = this.modeler.get('moddle').create('flowable:Field')
|
||||
fieldElement['name'] = field.name
|
||||
fieldElement[field.type] = field.value
|
||||
// 注意：flowable.json 中定义的string和expression类为小写，不然会和原生的String类冲突，此处为hack
|
||||
// const valueElement = this.modeler.get('moddle').create(`flowable:${field.type}`, { body: field.value })
|
||||
// fieldElement[field.type] = valueElement
|
||||
executionListener.get('fields').push(fieldElement)
|
||||
})
|
||||
}
|
||||
extensionElements.get('values').push(executionListener)
|
||||
})
|
||||
this.updateProperties({ extensionElements: extensionElements })
|
||||
} else {
|
||||
const extensionElements = this.element.businessObject[`extensionElements`]
|
||||
if (extensionElements) {
|
||||
extensionElements.values = extensionElements.values?.filter(item => item.$type !== 'flowable:ExecutionListener') ?? []
|
||||
}
|
||||
}
|
||||
},
|
||||
closeDialog() {
|
||||
console.log(this.formData)
|
||||
this.$refs.xForm.validate().then(() => {
|
||||
this.updateElement()
|
||||
this.dialogVisible = false
|
||||
}).catch(e => console.error(e))
|
||||
},
|
||||
addListener(data) {
|
||||
this.formData.executionListener = this.formData.executionListener.concat(data)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.flow-containers .el-badge__content.is-fixed {
|
||||
top: 18px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<el-dialog title="内置监听器"
|
||||
width="900px"
|
||||
:visible.sync="dialogVisible"
|
||||
append-to-body
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="false"
|
||||
:show-close="false"
|
||||
:before-close="close"
|
||||
>
|
||||
<flow-listener @handleSelect="handleSelect"/>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="close">取 消</el-button>
|
||||
<el-button type="primary" @click="checkComplete">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FlowListener from '@/components/flow/Listener'
|
||||
|
||||
export default {
|
||||
name: 'ListentList',
|
||||
components: { FlowListener },
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: this.visible,
|
||||
listenerList: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
visible: {
|
||||
handler(newVal) {
|
||||
this.dialogVisible = newVal
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
this.dialogVisible = false
|
||||
this.$emit('close')
|
||||
},
|
||||
checkComplete() {
|
||||
this.close()
|
||||
this.$emit('submit', this.listenerList)
|
||||
},
|
||||
handleSelect(selection) {
|
||||
const type = ['class', 'expression', 'delegateExpression']
|
||||
let list = []
|
||||
selection.forEach(data => {
|
||||
const formData = {
|
||||
event: data.eventType,
|
||||
type: type[parseInt(data.valueType) - 1],
|
||||
className: data.value
|
||||
}
|
||||
list.push(formData)
|
||||
})
|
||||
this.listenerList = list
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@@ -0,0 +1,96 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
title="监听器参数"
|
||||
:visible.sync="dialogVisible"
|
||||
width="700px"
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="false"
|
||||
:show-close="false"
|
||||
@closed="$emit('close', formData.paramList)"
|
||||
>
|
||||
<x-form ref="xForm" v-model="formData" :config="formConfig" />
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" size="medium" @click="closeDialog">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mixinXcrud from '../../../common/mixinXcrud'
|
||||
export default {
|
||||
mixins: [mixinXcrud],
|
||||
props: {
|
||||
value: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: true,
|
||||
formData: {
|
||||
paramList: this.value
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
formConfig() {
|
||||
return {
|
||||
inline: false,
|
||||
item: [
|
||||
{
|
||||
xType: 'tabs',
|
||||
tabs: [
|
||||
{
|
||||
label: '监听器参数',
|
||||
name: 'paramList',
|
||||
column: [
|
||||
{
|
||||
label: '类型',
|
||||
name: 'type',
|
||||
width: 180,
|
||||
rules: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }],
|
||||
xType: 'select',
|
||||
dic: [
|
||||
{ label: '字符串', value: 'stringValue' },
|
||||
{ label: '表达式', value: 'expression' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '名称',
|
||||
name: 'name',
|
||||
width: 180,
|
||||
rules: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }],
|
||||
xType: 'input'
|
||||
},
|
||||
{
|
||||
label: '值',
|
||||
name: 'value',
|
||||
xType: 'input',
|
||||
rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
closeDialog() {
|
||||
this.$refs.xForm.validate().then(() => {
|
||||
this.dialogVisible = false
|
||||
}).catch(e => console.error(e))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.flow-containers .el-badge__content.is-fixed {
|
||||
top: 18px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,133 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
title="多实例配置"
|
||||
:visible.sync="dialogVisible"
|
||||
width="600px"
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="false"
|
||||
class="muti-instance"
|
||||
@closed="$emit('close')"
|
||||
>
|
||||
<el-descriptions :column="1" size="mini" border>
|
||||
<el-descriptions-item label="使用说明">按照BPMN2.0规范的要求，用于为每个实例创建执行的父执行，会提供下列变量:</el-descriptions-item>
|
||||
<el-descriptions-item label="nrOfInstances">实例总数。</el-descriptions-item>
|
||||
<el-descriptions-item label="nrOfActiveInstances">当前活动的（即未完成的），实例数量。对于顺序多实例，这个值总为1。</el-descriptions-item>
|
||||
<el-descriptions-item label="nrOfCompletedInstances">已完成的实例数量。</el-descriptions-item>
|
||||
<el-descriptions-item label="loopCounter">给定实例在for-each循环中的index。</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<div class="app-container">
|
||||
<x-form ref="xForm" v-model="formData" :config="formConfig" />
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mixinPanel from '@/components/Process/common/mixinPanel'
|
||||
import {formatJsonKeyValue} from '@/components/Process/common/parseElement'
|
||||
|
||||
export default {
|
||||
mixins: [mixinPanel],
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: true,
|
||||
formData: {},
|
||||
prefix: 'flowable:',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
formConfig() {
|
||||
const _this = this
|
||||
return {
|
||||
inline: false,
|
||||
item: [
|
||||
{
|
||||
xType: 'input',
|
||||
name: 'collection',
|
||||
label: '集合',
|
||||
tooltip: 'collection: 属性会作为表达式进行解析。如果表达式解析为字符串而不是一个集合，<br />不论是因为本身配置的就是静态字符串值，还是表达式计算结果为字符串，<br />这个字符串都会被当做变量名，并从流程变量中用于获取实际的集合。',
|
||||
// rules: [{ required: true, message: '请输入集合名称', trigger: ['blur', 'change'] }]
|
||||
},
|
||||
{
|
||||
xType: 'input',
|
||||
name: 'elementVariable',
|
||||
label: '元素变量',
|
||||
tooltip: 'elementVariable: 每创建一个用户任务前，先以该元素变量为label，集合中的一项为value，<br />创建（局部）流程变量，该局部流程变量被用于指派用户任务。<br />一般来说，该字符串应与指定人员变量相同。',
|
||||
// rules: [{ required: true, message: '请输入元素变量', trigger: ['blur', 'change'] }]
|
||||
},
|
||||
{
|
||||
xType: 'select',
|
||||
name: 'isSequential',
|
||||
label: '执行方式',
|
||||
tooltip: '并行会签（parallel）、串行会签(sequential)，其中并行会签的意思是 多个人同时执行任务。串行会签是按顺序执行任务。',
|
||||
dic: [{label: '串行', value: true}, {label: '并行', value: false}],
|
||||
// rules: [{ required: true, message: '请选择执行方式', trigger: ['blur', 'change'] }]
|
||||
},
|
||||
{
|
||||
xType: 'input',
|
||||
name: 'completionCondition',
|
||||
label: '完成条件',
|
||||
tooltip: 'completionCondition: 多实例活动在所有实例都完成时结束，然而也可以指定一个表达式，在每个实例<br />结束时进行计算。当表达式计算为true时，将销毁所有剩余的实例，并结束多实例<br />活动，继续执行流程。例如 ${nrOfCompletedInstances/nrOfInstances >= 0.6 }，<br />表示当任务完成60%时，该节点就算完成',
|
||||
// rules: [{ required: true, message: '请输入完成条件', trigger: ['blur', 'change'] }]
|
||||
}
|
||||
],
|
||||
operate: [
|
||||
{ text: '确定', show: true, click: _this.save },
|
||||
{ text: '清空', show: true, click: () => { _this.formData = {} } }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const cache = JSON.parse(JSON.stringify(this.element.businessObject.loopCharacteristics ?? {}))
|
||||
cache.completionCondition = cache.completionCondition?.body
|
||||
// 拼接多实例对象
|
||||
if (this.element.businessObject.loopCharacteristics) {
|
||||
Object.assign(cache, this.element.businessObject.loopCharacteristics.$attrs)
|
||||
}
|
||||
this.formData = formatJsonKeyValue(cache)
|
||||
},
|
||||
methods: {
|
||||
updateElement() {
|
||||
if (this.formData.isSequential !== null && this.formData.isSequential !== undefined) {
|
||||
// const model = this.modeler.get('moddle');
|
||||
let loopCharacteristics = this.element.businessObject.get('loopCharacteristics')
|
||||
if (!loopCharacteristics) {
|
||||
loopCharacteristics = this.modeler.get('moddle').create('bpmn:MultiInstanceLoopCharacteristics')
|
||||
}
|
||||
loopCharacteristics['isSequential'] = this.formData.isSequential
|
||||
loopCharacteristics['collection'] = this.formData.collection
|
||||
loopCharacteristics['elementVariable'] = this.formData.elementVariable
|
||||
// let loopCardinality = model.create("bpmn:Expression",{
|
||||
// body: "4"
|
||||
// });
|
||||
// loopCharacteristics['loopCardinality'] = loopCardinality
|
||||
|
||||
loopCharacteristics.$attrs['isSequential'] = this.formData.isSequential
|
||||
loopCharacteristics.$attrs[this.prefix + 'collection'] = this.formData.collection
|
||||
loopCharacteristics.$attrs[this.prefix + 'elementVariable'] = this.formData.elementVariable
|
||||
|
||||
if (this.formData.completionCondition) {
|
||||
loopCharacteristics['completionCondition'] = this.modeler.get('moddle').create('bpmn:Expression', {body: this.formData.completionCondition})
|
||||
}
|
||||
this.updateProperties({loopCharacteristics: loopCharacteristics})
|
||||
} else {
|
||||
delete this.element.businessObject.loopCharacteristics
|
||||
}
|
||||
},
|
||||
save() {
|
||||
this.$refs['xForm'].validate().then(() => {
|
||||
this.updateElement()
|
||||
this.dialogVisible = false
|
||||
}).catch(e => console.error(e));
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.muti-instance .el-form-item {
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,147 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
title="信号定义"
|
||||
:visible.sync="dialogVisible"
|
||||
width="700px"
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="false"
|
||||
:show-close="false"
|
||||
@closed="$emit('close')"
|
||||
>
|
||||
<x-form ref="xForm" v-model="formData" :config="formConfig" />
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" size="medium" @click="closeDialog">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mixinPanel from '../../../common/mixinPanel'
|
||||
export default {
|
||||
mixins: [mixinPanel],
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: true,
|
||||
formData: {
|
||||
signal: []
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
formConfig() {
|
||||
// const _this = this
|
||||
return {
|
||||
inline: false,
|
||||
item: [
|
||||
{
|
||||
xType: 'tabs',
|
||||
tabs: [
|
||||
{
|
||||
label: '信号定义',
|
||||
name: 'signal',
|
||||
column: [
|
||||
{
|
||||
label: 'scope',
|
||||
name: 'scope',
|
||||
width: 180,
|
||||
rules: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }],
|
||||
xType: 'select',
|
||||
dic: [
|
||||
{ label: '全局', value: 'start' },
|
||||
{ label: '流程实例', value: 'end' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'id',
|
||||
name: 'id',
|
||||
width: 200,
|
||||
rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }],
|
||||
xType: 'input'
|
||||
},
|
||||
{
|
||||
label: '名称',
|
||||
name: 'name',
|
||||
xType: 'input',
|
||||
rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// this.formData.signal = this.element.businessObject.extensionElements?.values.map(item => {
|
||||
this.formData.signal = this.element.businessObject.extensionElements?.values
|
||||
.filter(item => item.$type === 'bpmn:Signal')
|
||||
.map(item => {
|
||||
return {
|
||||
scope: item.scope,
|
||||
id: item.id,
|
||||
name: item.name
|
||||
}
|
||||
}) ?? []
|
||||
},
|
||||
methods: {
|
||||
updateElement() {
|
||||
// if (this.formData.signal?.length) {
|
||||
// let extensionElements = this.element.businessObject.get('extensionElements')
|
||||
// if (!extensionElements) {
|
||||
// console.log(this.modeler.get('moddle'),"this.modeler.get('moddle')")
|
||||
// extensionElements = this.modeler.get('moddle').create('bpmn:Signal')
|
||||
// }
|
||||
// extensionElements.values = extensionElements.values?.filter(item => item.$type !== 'bpmn:Signal') ?? []
|
||||
// console.log(extensionElements,"extensionElements")
|
||||
// const length = extensionElements.get('values').length
|
||||
// for (let i = 0; i < length; i++) {
|
||||
// // 清除旧值
|
||||
// extensionElements.get('values').pop()
|
||||
// }
|
||||
// this.updateProperties({ extensionElements: extensionElements })
|
||||
// } else {
|
||||
// const extensionElements = this.element.businessObject[`extensionElements`]
|
||||
// if (extensionElements) {
|
||||
// extensionElements.values = extensionElements.values?.filter(item => item.$type !== 'flowable:ExecutionListener')
|
||||
// }
|
||||
// }
|
||||
if (this.formData.signal?.length) {
|
||||
let extensionElements = this.element.businessObject.get('extensionElements')
|
||||
if (!extensionElements) {
|
||||
extensionElements = this.modeler.get('moddle').create('bpmn:ExtensionElements')
|
||||
}
|
||||
// 清除旧值
|
||||
extensionElements.values = extensionElements.values?.filter(item => item.$type !== 'bpmn:Signal') ?? []
|
||||
this.formData.signal.forEach(item => {
|
||||
const signal = this.modeler.get('moddle').create('bpmn:Signal')
|
||||
signal['scope'] = item.scope
|
||||
signal['id'] = item.id
|
||||
signal['name'] = item.name
|
||||
extensionElements.get('values').push(signal)
|
||||
})
|
||||
this.updateProperties({ extensionElements: extensionElements })
|
||||
} else {
|
||||
const extensionElements = this.element.businessObject[`extensionElements`]
|
||||
if (extensionElements) {
|
||||
extensionElements.values = extensionElements.values?.filter(item => item.$type !== 'bpmn:Signal') ?? []
|
||||
}
|
||||
}
|
||||
},
|
||||
closeDialog() {
|
||||
this.$refs.xForm.validate().then(() => {
|
||||
this.updateElement()
|
||||
this.dialogVisible = false
|
||||
}).catch(e => console.error(e))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.flow-containers .el-badge__content.is-fixed {
|
||||
top: 18px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,221 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
title="任务监听器"
|
||||
:visible.sync="dialogVisible"
|
||||
width="900px"
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="false"
|
||||
:show-close="false"
|
||||
@closed="$emit('close')"
|
||||
>
|
||||
<x-form ref="xForm" v-model="formData" :config="formConfig">
|
||||
<template #params="scope">
|
||||
<el-badge :value="scope.row.params ? scope.row.params.length : 0" type="primary">
|
||||
<el-button size="small" @click="configParam(scope.$index)">配置</el-button>
|
||||
</el-badge>
|
||||
</template>
|
||||
</x-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" size="medium" @click="closeDialog">确 定</el-button>
|
||||
</span>
|
||||
<listener-list
|
||||
:visible="listenerDialogVisible"
|
||||
@close="() => this.listenerDialogVisible = false"
|
||||
@submit="addListener"
|
||||
/>
|
||||
</el-dialog>
|
||||
<listenerParam v-if="showParamDialog" :value="formData.taskListener[nowIndex].params" @close="finishConfigParam" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mixinPanel from '../../../common/mixinPanel'
|
||||
import listenerParam from './listenerParam'
|
||||
import ListenerList from '@/components/Process/components/nodePanel/property/listenerList'
|
||||
export default {
|
||||
components: { listenerParam, ListenerList },
|
||||
mixins: [mixinPanel],
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: true,
|
||||
listenerDialogVisible: false,
|
||||
showParamDialog: false,
|
||||
nowIndex: null,
|
||||
formData: {
|
||||
taskListener: []
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
formConfig() {
|
||||
// const _this = this
|
||||
return {
|
||||
inline: false,
|
||||
item: [
|
||||
{
|
||||
xType: 'tabs',
|
||||
tabs: [
|
||||
{
|
||||
label: '任务监听器',
|
||||
name: 'taskListener',
|
||||
column: [
|
||||
{
|
||||
label: '事件',
|
||||
name: 'event',
|
||||
width: 180,
|
||||
rules: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }],
|
||||
xType: 'select',
|
||||
dic: [
|
||||
{ label: 'create', value: 'create' },
|
||||
{ label: 'assignment', value: 'assignment' },
|
||||
{ label: 'complete', value: 'complete' },
|
||||
{ label: 'delete', value: 'delete' }
|
||||
],
|
||||
tooltip: `create（创建）：当任务已经创建，并且所有任务参数都已经设置时触发。<br />
|
||||
assignment（指派）：当任务已经指派给某人时触发。请注意：当流程执行到达用户任务时，在触发create事件之前，会首先触发assignment事件。<br />
|
||||
complete（完成）：当任务已经完成，从运行时数据中删除前触发。<br />
|
||||
delete（删除）：在任务即将被删除前触发。请注意任务由completeTask正常完成时也会触发。
|
||||
`
|
||||
},
|
||||
{
|
||||
label: '类型',
|
||||
name: 'type',
|
||||
width: 180,
|
||||
rules: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }],
|
||||
xType: 'select',
|
||||
dic: [
|
||||
{ label: '类', value: 'class' },
|
||||
{ label: '表达式', value: 'expression' },
|
||||
{ label: '委托表达式', value: 'delegateExpression' }
|
||||
],
|
||||
tooltip: `类：示例 com.company.MyCustomListener，自定义类必须实现 org.flowable.engine.delegate.TaskListener 接口 <br />
|
||||
表达式：示例 \${myObject.callMethod(task, task.eventName)} <br />
|
||||
委托表达式：示例 \${myListenerSpringBean} ，该 springBean 需要实现 org.flowable.engine.delegate.TaskListener 接口
|
||||
`
|
||||
},
|
||||
{
|
||||
label: '值',
|
||||
name: 'className',
|
||||
xType: 'input',
|
||||
rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }]
|
||||
},
|
||||
// {
|
||||
// xType: 'slot',
|
||||
// label: '参数',
|
||||
// width: 120,
|
||||
// slot: true,
|
||||
// name: 'params'
|
||||
// }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => this.addButton())
|
||||
this.formData.taskListener = this.element.businessObject.extensionElements?.values
|
||||
.filter(item => item.$type === 'flowable:TaskListener')
|
||||
.map(item => {
|
||||
let type
|
||||
if ('class' in item) type = 'class'
|
||||
if ('expression' in item) type = 'expression'
|
||||
if ('delegateExpression' in item) type = 'delegateExpression'
|
||||
return {
|
||||
event: item.event,
|
||||
type: type,
|
||||
className: item[type],
|
||||
params: item.fields?.map(field => {
|
||||
let fieldType
|
||||
if ('stringValue' in field) fieldType = 'stringValue'
|
||||
if ('expression' in field) fieldType = 'expression'
|
||||
return {
|
||||
name: field.name,
|
||||
type: fieldType,
|
||||
value: field[fieldType]
|
||||
}
|
||||
}) ?? []
|
||||
}
|
||||
}) ?? []
|
||||
},
|
||||
methods: {
|
||||
addButton() {
|
||||
const button = document.createElement('button')
|
||||
button.innerText = '内置监听器'
|
||||
button.setAttribute('type', 'button')
|
||||
button.setAttribute('class', 'el-button el-button--primary el-button--mini')
|
||||
button.addEventListener('click', () => this.listenerDialogVisible = true)
|
||||
const div = document.getElementById('pane-taskListener')
|
||||
const table = div.getElementsByClassName('el-table')[0]
|
||||
div.insertBefore(button, table)
|
||||
},
|
||||
configParam(index) {
|
||||
this.nowIndex = index
|
||||
const nowObj = this.formData.taskListener[index]
|
||||
if (!nowObj.params) {
|
||||
nowObj.params = []
|
||||
}
|
||||
this.showParamDialog = true
|
||||
},
|
||||
finishConfigParam(param) {
|
||||
this.showParamDialog = false
|
||||
// hack 数量不更新问题
|
||||
const cache = this.formData.taskListener[this.nowIndex]
|
||||
cache.params = param
|
||||
this.$set(this.formData.taskListener[this.nowIndex], this.nowIndex, cache)
|
||||
this.nowIndex = null
|
||||
},
|
||||
updateElement() {
|
||||
if (this.formData.taskListener?.length) {
|
||||
let extensionElements = this.element.businessObject.get('extensionElements')
|
||||
if (!extensionElements) {
|
||||
extensionElements = this.modeler.get('moddle').create('bpmn:ExtensionElements')
|
||||
}
|
||||
// 清除旧值
|
||||
extensionElements.values = extensionElements.values?.filter(item => item.$type !== 'flowable:TaskListener') ?? []
|
||||
this.formData.taskListener.forEach(item => {
|
||||
const taskListener = this.modeler.get('moddle').create('flowable:TaskListener')
|
||||
taskListener['event'] = item.event
|
||||
taskListener[item.type] = item.className
|
||||
if (item.params && item.params.length) {
|
||||
item.params.forEach(field => {
|
||||
const fieldElement = this.modeler.get('moddle').create('flowable:Field')
|
||||
fieldElement['name'] = field.name
|
||||
fieldElement[field.type] = field.value
|
||||
// 注意：flowable.json 中定义的string和expression类为小写，不然会和原生的String类冲突，此处为hack
|
||||
// const valueElement = this.modeler.get('moddle').create(`flowable:${field.type}`, { body: field.value })
|
||||
// fieldElement[field.type] = valueElement
|
||||
taskListener.get('fields').push(fieldElement)
|
||||
})
|
||||
}
|
||||
extensionElements.get('values').push(taskListener)
|
||||
})
|
||||
this.updateProperties({ extensionElements: extensionElements })
|
||||
} else {
|
||||
const extensionElements = this.element.businessObject[`extensionElements`]
|
||||
if (extensionElements) {
|
||||
extensionElements.values = extensionElements.values?.filter(item => item.$type !== 'flowable:TaskListener') ?? []
|
||||
}
|
||||
}
|
||||
},
|
||||
closeDialog() {
|
||||
this.$refs.xForm.validate().then(() => {
|
||||
this.updateElement()
|
||||
this.dialogVisible = false
|
||||
}).catch(e => console.error(e))
|
||||
},
|
||||
addListener(data) {
|
||||
this.formData.taskListener = this.formData.taskListener.concat(data)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.flow-containers .el-badge__content.is-fixed {
|
||||
top: 18px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<div>
|
||||
<x-form ref="xForm" v-model="formData" :config="formConfig">
|
||||
<template #executionListener>
|
||||
<el-badge :value="executionListenerLength">
|
||||
<el-button size="small" @click="dialogName = 'executionListenerDialog'">编辑</el-button>
|
||||
</el-badge>
|
||||
</template>
|
||||
</x-form>
|
||||
<executionListenerDialog
|
||||
v-if="dialogName === 'executionListenerDialog'"
|
||||
:element="element"
|
||||
:modeler="modeler"
|
||||
@close="finishExecutionListener"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mixinPanel from '../../common/mixinPanel'
|
||||
import {StrUtil} from '@/utils/StrUtil'
|
||||
import mixinExecutionListener from '../../common/mixinExecutionListener'
|
||||
import { commonParse, conditionExpressionParse } from '../../common/parseElement'
|
||||
export default {
|
||||
mixins: [mixinPanel, mixinExecutionListener],
|
||||
data() {
|
||||
return {
|
||||
formData: {},
|
||||
executionListenerLength: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
formConfig() {
|
||||
return {
|
||||
inline: false,
|
||||
item: [
|
||||
{
|
||||
xType: 'input',
|
||||
name: 'id',
|
||||
label: '节点 id',
|
||||
rules: [{ required: true, message: 'Id 不能为空' }]
|
||||
},
|
||||
{
|
||||
xType: 'input',
|
||||
name: 'name',
|
||||
label: '节点名称'
|
||||
},
|
||||
{
|
||||
xType: 'input',
|
||||
name: 'documentation',
|
||||
label: '节点描述'
|
||||
},
|
||||
{
|
||||
xType: 'slot',
|
||||
name: 'executionListener',
|
||||
label: '执行监听器'
|
||||
},
|
||||
{
|
||||
xType: 'input',
|
||||
name: 'conditionExpression',
|
||||
label: '跳转条件'
|
||||
},
|
||||
{
|
||||
xType: 'input',
|
||||
name: 'skipExpression',
|
||||
label: '跳过表达式'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'formData.conditionExpression': function(val) {
|
||||
if (StrUtil.isNotBlank(val)) {
|
||||
const newCondition = this.modeler.get('moddle').create('bpmn:FormalExpression', { body: val })
|
||||
this.updateProperties({ conditionExpression: newCondition })
|
||||
}
|
||||
// else {
|
||||
// this.updateProperties({ conditionExpression: null })
|
||||
// }
|
||||
},
|
||||
'formData.skipExpression': function(val) {
|
||||
if (StrUtil.isNotBlank(val)) {
|
||||
this.updateProperties({'flowable:skipExpression': val})
|
||||
} else {
|
||||
delete this.element.businessObject.$attrs[`flowable:skipExpression`]
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
let cache = commonParse(this.element)
|
||||
cache = conditionExpressionParse(cache)
|
||||
this.formData = cache;
|
||||
this.computedExecutionListenerLength();
|
||||
},
|
||||
methods:{
|
||||
computedExecutionListenerLength() {
|
||||
this.executionListenerLength = this.element.businessObject.extensionElements?.values
|
||||
?.filter(item => item.$type === 'flowable:ExecutionListener').length ?? 0
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<div>
|
||||
<x-form ref="xForm" v-model="formData" :config="formConfig">
|
||||
<template #executionListener>
|
||||
<el-badge :value="executionListenerLength">
|
||||
<el-button size="small" @click="dialogName = 'executionListenerDialog'">编辑</el-button>
|
||||
</el-badge>
|
||||
</template>
|
||||
</x-form>
|
||||
<executionListenerDialog
|
||||
v-if="dialogName === 'executionListenerDialog'"
|
||||
:element="element"
|
||||
:modeler="modeler"
|
||||
@close="finishExecutionListener"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mixinPanel from '../../common/mixinPanel'
|
||||
import mixinExecutionListener from '../../common/mixinExecutionListener'
|
||||
import { commonParse } from '../../common/parseElement'
|
||||
export default {
|
||||
mixins: [mixinPanel, mixinExecutionListener],
|
||||
data() {
|
||||
return {
|
||||
formData: {},
|
||||
executionListenerLength: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
formConfig() {
|
||||
const _this = this
|
||||
return {
|
||||
inline: false,
|
||||
item: [
|
||||
{
|
||||
xType: 'input',
|
||||
name: 'id',
|
||||
label: '节点 id',
|
||||
rules: [{ required: true, message: 'Id 不能为空' }]
|
||||
},
|
||||
{
|
||||
xType: 'input',
|
||||
name: 'name',
|
||||
label: '节点名称'
|
||||
},
|
||||
{
|
||||
xType: 'input',
|
||||
name: 'documentation',
|
||||
label: '节点描述'
|
||||
},
|
||||
{
|
||||
xType: 'slot',
|
||||
name: 'executionListener',
|
||||
label: '执行监听器'
|
||||
},
|
||||
// {
|
||||
// xType: 'input',
|
||||
// name: 'initiator',
|
||||
// label: '发起人',
|
||||
// show: !!_this.showConfig.initiator
|
||||
// },
|
||||
// {
|
||||
// xType: 'input',
|
||||
// name: 'formKey',
|
||||
// label: '表单标识key',
|
||||
// show: !!_this.showConfig.formKey
|
||||
// }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'formData.initiator': function(val) {
|
||||
if (val === '') val = null
|
||||
// 默认设置流程发起人
|
||||
// if (val === '') val = 'INITIATOR'
|
||||
this.updateProperties({ 'flowable:initiator': val })
|
||||
},
|
||||
'formData.formKey': function(val) {
|
||||
if (val === '') val = null
|
||||
this.updateProperties({ 'flowable:formKey': val })
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// this.updateProperties({ 'flowable:initiator': 'INITIATOR' })
|
||||
this.formData = commonParse(this.element)
|
||||
this.computedExecutionListenerLength();
|
||||
},
|
||||
methods:{
|
||||
computedExecutionListenerLength() {
|
||||
this.executionListenerLength = this.element.businessObject.extensionElements?.values
|
||||
?.filter(item => item.$type === 'flowable:ExecutionListener').length ?? 0
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,631 @@
|
||||
<template>
|
||||
<div>
|
||||
<x-form ref="xForm" v-model="formData" :config="formConfig">
|
||||
<template #executionListener>
|
||||
<el-badge :value="executionListenerLength">
|
||||
<el-button size="small" @click="dialogName = 'executionListenerDialog'">编辑</el-button>
|
||||
</el-badge>
|
||||
</template>
|
||||
<template #taskListener>
|
||||
<el-badge :value="taskListenerLength">
|
||||
<el-button size="small" @click="dialogName = 'taskListenerDialog'">编辑</el-button>
|
||||
</el-badge>
|
||||
</template>
|
||||
<template #multiInstance>
|
||||
<el-badge :is-dot="hasMultiInstance">
|
||||
<el-button size="small" @click="dialogName = 'multiInstanceDialog'">编辑</el-button>
|
||||
</el-badge>
|
||||
</template>
|
||||
<template #checkSingleUser>
|
||||
<el-input placeholder="请选择人员" class="input-with-select" v-model="checkValues">
|
||||
<template slot="append">
|
||||
<!--指定用户-->
|
||||
<el-button style="padding-left: 7px" icon="el-icon-user" @click="singleUserCheck"/>
|
||||
<el-divider direction="vertical"></el-divider>
|
||||
<!--选择表达式-->
|
||||
<el-button style="padding-right: 7px" icon="el-icon-postcard" @click="singleExpCheck('assignee')"/>
|
||||
</template>
|
||||
</el-input>
|
||||
</template>
|
||||
<template #checkMultipleUser>
|
||||
<el-input placeholder="请选择候选用户" class="input-with-select" v-model="checkValues">
|
||||
<template slot="append">
|
||||
<!--候选用户-->
|
||||
<el-button style="padding-left: 7px" icon="el-icon-user" @click="multipleUserCheck"/>
|
||||
<el-divider direction="vertical"></el-divider>
|
||||
<!--选择表达式-->
|
||||
<el-button style="padding-right: 7px" icon="el-icon-postcard" @click="singleExpCheck('candidateUsers')"/>
|
||||
</template>
|
||||
</el-input>
|
||||
</template>
|
||||
<template #checkRole>
|
||||
<el-input placeholder="请选择候选角色" class="input-with-select" v-model="checkValues">
|
||||
<template slot="append">
|
||||
<!--候选角色-->
|
||||
<el-button style="padding-left: 7px" icon="el-icon-user" @click="multipleRoleCheck"/>
|
||||
<el-divider direction="vertical"></el-divider>
|
||||
<!--选择表达式-->
|
||||
<el-button style="padding-right: 7px" icon="el-icon-postcard" @click="singleExpCheck('candidateGroups')"/>
|
||||
</template>
|
||||
</el-input>
|
||||
</template>
|
||||
</x-form>
|
||||
<executionListenerDialog
|
||||
v-if="dialogName === 'executionListenerDialog'"
|
||||
:element="element"
|
||||
:modeler="modeler"
|
||||
@close="finishExecutionListener"
|
||||
/>
|
||||
<taskListenerDialog
|
||||
v-if="dialogName === 'taskListenerDialog'"
|
||||
:element="element"
|
||||
:modeler="modeler"
|
||||
@close="finishTaskListener"
|
||||
/>
|
||||
<multiInstanceDialog
|
||||
v-if="dialogName === 'multiInstanceDialog'"
|
||||
:element="element"
|
||||
:modeler="modeler"
|
||||
@close="finishMultiInstance"
|
||||
/>
|
||||
<!--选择人员-->
|
||||
<el-dialog
|
||||
title="选择人员"
|
||||
:visible.sync="userVisible"
|
||||
width="60%"
|
||||
:close-on-press-escape="false"
|
||||
:show-close="false"
|
||||
>
|
||||
<flow-user :checkType="checkType" :selectValues="selectValues" @handleUserSelect="handleUserSelect"></flow-user>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="userVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="checkUserComplete">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
<!--选择表达式-->
|
||||
<el-dialog
|
||||
title="选择表达式"
|
||||
:visible.sync="expVisible"
|
||||
width="60%"
|
||||
:close-on-press-escape="false"
|
||||
:show-close="false"
|
||||
>
|
||||
<flow-exp :selectValues="selectValues" @handleSingleExpSelect="handleSingleExpSelect"></flow-exp>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="expVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="checkExpComplete">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
<!--选择角色-->
|
||||
<el-dialog
|
||||
title="选择候选角色"
|
||||
:visible.sync="roleVisible"
|
||||
width="60%"
|
||||
:close-on-press-escape="false"
|
||||
:show-close="false"
|
||||
>
|
||||
<flow-role :checkType="checkType" :selectValues="selectValues" @handleRoleSelect="handleRoleSelect"></flow-role>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="roleVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="checkRoleComplete">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mixinPanel from '../../common/mixinPanel'
|
||||
import executionListenerDialog from './property/executionListener'
|
||||
import taskListenerDialog from './property/taskListener'
|
||||
import multiInstanceDialog from './property/multiInstance'
|
||||
import { commonParse, userTaskParse } from '../../common/parseElement'
|
||||
import {StrUtil} from '@/utils/StrUtil'
|
||||
import FlowUser from '@/components/flow/User'
|
||||
import FlowRole from '@/components/flow/Role'
|
||||
import FlowExp from '@/components/flow/Expression'
|
||||
import { listAllForm } from '@/api/flowable/form'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
executionListenerDialog,
|
||||
taskListenerDialog,
|
||||
multiInstanceDialog,
|
||||
FlowUser,
|
||||
FlowRole,
|
||||
FlowExp,
|
||||
},
|
||||
mixins: [mixinPanel],
|
||||
props: {
|
||||
users: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
groups: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
exps: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
userTypeOption: [
|
||||
{ label: '指定人员', value: 'assignee' },
|
||||
{ label: '候选人员', value: 'candidateUsers' },
|
||||
{ label: '候选角色', value: 'candidateGroups' }
|
||||
],
|
||||
dialogName: '',
|
||||
executionListenerLength: 0,
|
||||
taskListenerLength: 0,
|
||||
hasMultiInstance: false,
|
||||
userVisible: false,
|
||||
roleVisible: false,
|
||||
expVisible: false,
|
||||
formData: {},
|
||||
assignee: null,
|
||||
candidateUsers: null,
|
||||
candidateGroups: null,
|
||||
// 选类型
|
||||
checkType: 'single',
|
||||
// 选中的值
|
||||
checkValues: null,
|
||||
// 数据回显
|
||||
selectValues: null,
|
||||
// 用户列表
|
||||
userList: this.users,
|
||||
// 角色列表
|
||||
groupList: this.groups,
|
||||
// 表达式列表
|
||||
expList: this.exps,
|
||||
// 表达式类型
|
||||
expType: null,
|
||||
// 表单列表
|
||||
formList: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
formConfig() {
|
||||
const _this = this
|
||||
return {
|
||||
inline: false,
|
||||
item: [
|
||||
{
|
||||
xType: 'input',
|
||||
name: 'id',
|
||||
label: '节点 id',
|
||||
rules: [{ required: true, message: 'Id 不能为空' }]
|
||||
},
|
||||
{
|
||||
xType: 'input',
|
||||
name: 'name',
|
||||
label: '节点名称',
|
||||
rules: [{ required: true, message: '节点名称不能为空' }]
|
||||
},
|
||||
{
|
||||
xType: 'input',
|
||||
name: 'documentation',
|
||||
label: '节点描述'
|
||||
},
|
||||
{
|
||||
xType: 'slot',
|
||||
name: 'executionListener',
|
||||
label: '执行监听器'
|
||||
},
|
||||
{
|
||||
xType: 'slot',
|
||||
name: 'taskListener',
|
||||
label: '任务监听器',
|
||||
show: !!_this.showConfig.taskListener
|
||||
},
|
||||
{
|
||||
xType: 'select',
|
||||
name: 'userType',
|
||||
label: '用户类型',
|
||||
// clearable: true,
|
||||
dic: _this.userTypeOption,
|
||||
// rules: [{ required: true, message: '用户类型不能为空' }],
|
||||
show: !!_this.showConfig.userType
|
||||
},
|
||||
{
|
||||
xType: 'slot',
|
||||
name: 'checkSingleUser',
|
||||
label: '指定人员',
|
||||
// rules: [{ required: true, message: '指定人员不能为空' }],
|
||||
show: !!_this.showConfig.assignee && _this.formData.userType === 'assignee'
|
||||
},
|
||||
{
|
||||
xType: 'slot',
|
||||
name: 'checkMultipleUser',
|
||||
label: '候选人员',
|
||||
// rules: [{ required: true, message: '候选人员不能为空' }],
|
||||
show: !!_this.showConfig.candidateUsers && _this.formData.userType === 'candidateUsers'
|
||||
},
|
||||
{
|
||||
xType: 'slot',
|
||||
name: 'checkRole',
|
||||
label: '候选角色',
|
||||
// rules: [{ required: true, message: '候选角色不能为空' }],
|
||||
show: !!_this.showConfig.candidateGroups && _this.formData.userType === 'candidateGroups'
|
||||
},
|
||||
{
|
||||
xType: 'slot',
|
||||
name: 'multiInstance',
|
||||
label: '多实例'
|
||||
},
|
||||
{
|
||||
xType: 'switch',
|
||||
name: 'async',
|
||||
label: '异步',
|
||||
activeText: '是',
|
||||
inactiveText: '否',
|
||||
show: !!_this.showConfig.async
|
||||
},
|
||||
{
|
||||
xType: 'input',
|
||||
name: 'priority',
|
||||
label: '优先级',
|
||||
show: !!_this.showConfig.priority
|
||||
},
|
||||
// {
|
||||
// xType: 'input',
|
||||
// name: 'formKey',
|
||||
// label: '表单标识key',
|
||||
// show: !!_this.showConfig.formKey
|
||||
// },
|
||||
{
|
||||
xType: 'select',
|
||||
name: 'formKey',
|
||||
label: '表单标识key',
|
||||
clearable: true,
|
||||
dic: { data: _this.formList, label: 'formName', value: 'formId' },
|
||||
show: !!_this.showConfig.formKey
|
||||
},
|
||||
{
|
||||
xType: 'input',
|
||||
name: 'skipExpression',
|
||||
label: '跳过表达式',
|
||||
show: !!_this.showConfig.skipExpression
|
||||
},
|
||||
{
|
||||
xType: 'switch',
|
||||
name: 'isForCompensation',
|
||||
label: '是否为补偿',
|
||||
activeText: '是',
|
||||
inactiveText: '否',
|
||||
show: !!_this.showConfig.isForCompensation
|
||||
},
|
||||
{
|
||||
xType: 'switch',
|
||||
name: 'triggerable',
|
||||
label: '服务任务可触发',
|
||||
activeText: '是',
|
||||
inactiveText: '否',
|
||||
show: !!_this.showConfig.triggerable
|
||||
},
|
||||
{
|
||||
xType: 'switch',
|
||||
name: 'autoStoreVariables',
|
||||
label: '自动存储变量',
|
||||
activeText: '是',
|
||||
inactiveText: '否',
|
||||
show: !!_this.showConfig.autoStoreVariables
|
||||
},
|
||||
{
|
||||
xType: 'input',
|
||||
name: 'ruleVariablesInput',
|
||||
label: '输入变量',
|
||||
show: !!_this.showConfig.ruleVariablesInput
|
||||
},
|
||||
{
|
||||
xType: 'input',
|
||||
name: 'rules',
|
||||
label: '规则',
|
||||
show: !!_this.showConfig.rules
|
||||
},
|
||||
{
|
||||
xType: 'input',
|
||||
name: 'resultVariable',
|
||||
label: '结果变量',
|
||||
show: !!_this.showConfig.resultVariable
|
||||
},
|
||||
{
|
||||
xType: 'switch',
|
||||
name: 'exclude',
|
||||
label: '排除',
|
||||
activeText: '是',
|
||||
inactiveText: '否',
|
||||
show: !!_this.showConfig.exclude
|
||||
},
|
||||
{
|
||||
xType: 'input',
|
||||
name: 'class',
|
||||
label: '类',
|
||||
show: !!_this.showConfig.class
|
||||
},
|
||||
{
|
||||
xType: 'datePicker',
|
||||
type: 'datetime',
|
||||
valueFormat: 'yyyy-MM-ddTHH:mm:ss',
|
||||
name: 'dueDate',
|
||||
label: '到期时间',
|
||||
show: !!_this.showConfig.dueDate
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'formData.userType': function(val, oldVal) {
|
||||
if (StrUtil.isNotBlank(oldVal)) {
|
||||
delete this.element.businessObject.$attrs[`flowable:${oldVal}`]
|
||||
delete this.formData[oldVal]
|
||||
// 清除已选人员数据
|
||||
this.checkValues = '';
|
||||
this.selectValues = null;
|
||||
// 删除xml中已选择数据类型节点
|
||||
delete this.element.businessObject.$attrs[`flowable:dataType`]
|
||||
}
|
||||
// 写入userType节点信息到xml
|
||||
this.updateProperties({'flowable:userType': val})
|
||||
},
|
||||
'formData.async': function(val) {
|
||||
if (StrUtil.isNotBlank(val)) {
|
||||
this.updateProperties({'flowable:async': val})
|
||||
}
|
||||
},
|
||||
'formData.dueDate': function(val) {
|
||||
if (StrUtil.isNotBlank(val)) {
|
||||
this.updateProperties({'flowable:dueDate': val})
|
||||
}
|
||||
},
|
||||
'formData.formKey': function(val) {
|
||||
if (StrUtil.isNotBlank(val)) {
|
||||
this.updateProperties({'flowable:formKey': val})
|
||||
} else {
|
||||
// 删除xml中已选择表单信息
|
||||
delete this.element.businessObject[`formKey`]
|
||||
}
|
||||
},
|
||||
'formData.priority': function(val) {
|
||||
if (StrUtil.isNotBlank(val)) {
|
||||
this.updateProperties({'flowable:priority': val})
|
||||
}
|
||||
},
|
||||
'formData.skipExpression': function(val) {
|
||||
if (StrUtil.isNotBlank(val)) {
|
||||
this.updateProperties({'flowable:skipExpression': val})
|
||||
} else {
|
||||
delete this.element.businessObject.$attrs[`flowable:skipExpression`]
|
||||
}
|
||||
},
|
||||
'formData.isForCompensation': function(val) {
|
||||
if (StrUtil.isNotBlank(val)) {
|
||||
this.updateProperties({'isForCompensation': val})
|
||||
}
|
||||
},
|
||||
'formData.triggerable': function(val) {
|
||||
if (StrUtil.isNotBlank(val)) {
|
||||
this.updateProperties({'flowable:triggerable': val})
|
||||
}
|
||||
},
|
||||
'formData.class': function(val) {
|
||||
if (StrUtil.isNotBlank(val)) {
|
||||
this.updateProperties({'flowable:class': val})
|
||||
}
|
||||
},
|
||||
'formData.autoStoreVariables': function(val) {
|
||||
if (StrUtil.isNotBlank(val)) {
|
||||
this.updateProperties({'flowable:autoStoreVariables': val})
|
||||
}
|
||||
},
|
||||
'formData.exclude': function(val) {
|
||||
if (StrUtil.isNotBlank(val)) {
|
||||
this.updateProperties({'flowable:exclude': val})
|
||||
}
|
||||
},
|
||||
'formData.ruleVariablesInput': function(val) {
|
||||
if (StrUtil.isNotBlank(val)) {
|
||||
this.updateProperties({'flowable:ruleVariablesInput': val})
|
||||
}
|
||||
},
|
||||
'formData.rules': function(val) {
|
||||
if (StrUtil.isNotBlank(val)) {
|
||||
this.updateProperties({'flowable:rules': val})
|
||||
}
|
||||
},
|
||||
'formData.resultVariable': function(val) {
|
||||
if (StrUtil.isNotBlank(val)) {
|
||||
this.updateProperties({'flowable:resultVariable': val})
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
let cache = commonParse(this.element)
|
||||
cache = userTaskParse(cache)
|
||||
this.formData = cache
|
||||
this.computedExecutionListenerLength()
|
||||
this.computedTaskListenerLength()
|
||||
this.computedHasMultiInstance()
|
||||
// 人员信息回显
|
||||
this.checkValuesEcho();
|
||||
// 加载表单列表
|
||||
this.getListForm();
|
||||
},
|
||||
methods: {
|
||||
computedExecutionListenerLength() {
|
||||
this.executionListenerLength = this.element.businessObject.extensionElements?.values
|
||||
?.filter(item => item.$type === 'flowable:ExecutionListener').length ?? 0
|
||||
},
|
||||
computedTaskListenerLength() {
|
||||
this.taskListenerLength = this.element.businessObject.extensionElements?.values
|
||||
?.filter(item => item.$type === 'flowable:TaskListener').length ?? 0
|
||||
},
|
||||
computedHasMultiInstance() {
|
||||
if (this.element.businessObject.loopCharacteristics) {
|
||||
this.hasMultiInstance = true
|
||||
} else {
|
||||
this.hasMultiInstance = false
|
||||
}
|
||||
},
|
||||
// 获取表单信息
|
||||
getListForm(){
|
||||
listAllForm().then(res =>{
|
||||
res.data.forEach(item =>{
|
||||
item.formId = item.formId.toString();
|
||||
})
|
||||
this.formList = res.data;
|
||||
})
|
||||
},
|
||||
// 设计器右侧表单数据回显
|
||||
checkValuesEcho(){
|
||||
const that = this;
|
||||
const attrs = that.element.businessObject.$attrs;
|
||||
const businessObject = that.element.businessObject;
|
||||
console.log(that.element.businessObject,"this.element.businessObject")
|
||||
// 指定用户
|
||||
if (attrs.hasOwnProperty("flowable:assignee")) {
|
||||
const val = attrs["flowable:assignee"];
|
||||
// 查找是否动态指定人员(选中流程表达式)
|
||||
if (attrs["flowable:dataType"] === "dynamic") {
|
||||
this.checkValues = that.expList.find(item => item.expression == val).name;
|
||||
this.selectValues = that.expList.find(item => item.expression == val).id;
|
||||
} else {
|
||||
this.checkValues = that.userList.find(item => item.userId == val).nickName;
|
||||
this.selectValues = that.userList.find(item => item.userId == val).userId;
|
||||
}
|
||||
// 候选用户
|
||||
} else if (attrs.hasOwnProperty("flowable:candidateUsers")) {
|
||||
const val = attrs["flowable:candidateUsers"];
|
||||
if (attrs["flowable:dataType"] === "dynamic") {
|
||||
this.checkValues = that.expList.find(item => item.expression == val).name;
|
||||
this.selectValues = that.expList.find(item => item.expression == val).id;
|
||||
} else {
|
||||
const newArr = that.userList.filter(i => val.split(',').includes(i.userId))
|
||||
this.checkValues = newArr.map(item => item.nickName).join(',');
|
||||
this.selectValues = newArr.map(item => item.userId).join(',');
|
||||
}
|
||||
} else if (businessObject.hasOwnProperty("candidateGroups") || attrs.hasOwnProperty("flowable:candidateGroups") ) {
|
||||
// 候选角色信息
|
||||
const val = businessObject["candidateGroups"] || attrs["flowable:candidateGroups"];
|
||||
if (attrs["flowable:dataType"] === "dynamic") {
|
||||
this.checkValues = that.expList.find(item => item.expression == val).name;
|
||||
this.selectValues = that.expList.find(item => item.expression == val).id;
|
||||
} else {
|
||||
const newArr = that.groupList.filter(i => val.split(',').includes(i.roleId))
|
||||
this.checkValues = newArr.map(item => item.roleName).join(',');
|
||||
this.selectValues = newArr.map(item => item.roleId).join(',');
|
||||
}
|
||||
}
|
||||
},
|
||||
finishExecutionListener() {
|
||||
if (this.dialogName === 'executionListenerDialog') {
|
||||
this.computedExecutionListenerLength()
|
||||
}
|
||||
this.dialogName = ''
|
||||
},
|
||||
finishTaskListener() {
|
||||
if (this.dialogName === 'taskListenerDialog') {
|
||||
this.computedTaskListenerLength()
|
||||
}
|
||||
this.dialogName = ''
|
||||
},
|
||||
finishMultiInstance() {
|
||||
if (this.dialogName === 'multiInstanceDialog') {
|
||||
this.computedHasMultiInstance()
|
||||
}
|
||||
this.dialogName = ''
|
||||
},
|
||||
/*单选人员*/
|
||||
singleUserCheck(){
|
||||
this.userVisible = true;
|
||||
this.checkType = "single";
|
||||
},
|
||||
/*多选人员*/
|
||||
multipleUserCheck(){
|
||||
this.userVisible = true;
|
||||
this.checkType = "multiple";
|
||||
},
|
||||
/*单选角色*/
|
||||
singleRoleCheck(){
|
||||
this.roleVisible = true;
|
||||
this.checkType = "single";
|
||||
},
|
||||
/*多选角色*/
|
||||
multipleRoleCheck(){
|
||||
this.roleVisible = true;
|
||||
this.checkType = "multiple";
|
||||
},
|
||||
/*单选表达式*/
|
||||
singleExpCheck(expType){
|
||||
this.expVisible = true;
|
||||
this.expType = expType;
|
||||
},
|
||||
// 选中表达式
|
||||
handleSingleExpSelect(selection) {
|
||||
this.deleteFlowAttar();
|
||||
this.updateProperties({'flowable:dataType': 'dynamic'})
|
||||
if ("assignee" === this.expType) {
|
||||
this.updateProperties({'flowable:assignee': selection.expression});
|
||||
} else if ("candidateUsers" === this.expType) {
|
||||
this.updateProperties({'flowable:candidateUsers': selection.expression});
|
||||
} else if ("candidateGroups" === this.expType) {
|
||||
this.updateProperties({'flowable:candidateGroups': selection.expression});
|
||||
}
|
||||
this.checkValues = selection.name;
|
||||
this.expType = null;
|
||||
},
|
||||
// 用户选中数据
|
||||
handleUserSelect(selection) {
|
||||
const that = this;
|
||||
if (selection) {
|
||||
that.deleteFlowAttar();
|
||||
that.updateProperties({'flowable:dataType': 'fixed'})
|
||||
if (selection instanceof Array) {
|
||||
const userIds = selection.map(item => item.userId);
|
||||
const nickName = selection.map(item => item.nickName);
|
||||
that.updateProperties({'flowable:candidateUsers': userIds.join(',')})
|
||||
that.checkValues = nickName.join(',');
|
||||
} else {
|
||||
that.updateProperties({'flowable:assignee': selection.userId})
|
||||
that.checkValues = selection.nickName;
|
||||
}
|
||||
}
|
||||
},
|
||||
// 角色选中数据
|
||||
handleRoleSelect(selection, name) {
|
||||
const that = this;
|
||||
if (selection && name) {
|
||||
that.deleteFlowAttar();
|
||||
that.updateProperties({'flowable:dataType': 'fixed'})
|
||||
that.updateProperties({'flowable:candidateGroups': selection});
|
||||
that.checkValues = name;
|
||||
}
|
||||
},
|
||||
/*用户选中赋值*/
|
||||
checkUserComplete(){
|
||||
this.userVisible = false;
|
||||
this.checkType = "";
|
||||
},
|
||||
/*候选角色选中赋值*/
|
||||
checkRoleComplete(){
|
||||
this.roleVisible = false;
|
||||
this.checkType = "";
|
||||
},
|
||||
/*表达式选中赋值*/
|
||||
checkExpComplete(){
|
||||
this.expVisible = false;
|
||||
},
|
||||
// 删除节点
|
||||
deleteFlowAttar(){
|
||||
delete this.element.businessObject.$attrs[`flowable:dataType`]
|
||||
delete this.element.businessObject.$attrs[`flowable:assignee`]
|
||||
delete this.element.businessObject.$attrs[`flowable:candidateUsers`]
|
||||
delete this.element.businessObject.$attrs[`flowable:candidateGroups`]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@@ -0,0 +1,524 @@
|
||||
import {
|
||||
assign,
|
||||
forEach,
|
||||
isArray,
|
||||
every
|
||||
} from 'min-dash';
|
||||
|
||||
import {
|
||||
is
|
||||
} from 'bpmn-js/lib/util/ModelUtil';
|
||||
|
||||
import {
|
||||
isExpanded,
|
||||
isEventSubProcess
|
||||
} from 'bpmn-js/lib/util/DiUtil';
|
||||
|
||||
import {
|
||||
isAny
|
||||
} from 'bpmn-js/lib/features/modeling/util/ModelingUtil';
|
||||
|
||||
import {
|
||||
getChildLanes
|
||||
} from 'bpmn-js/lib/features/modeling/util/LaneUtil';
|
||||
|
||||
import {
|
||||
hasPrimaryModifier
|
||||
} from 'diagram-js/lib/util/Mouse';
|
||||
|
||||
|
||||
/**
|
||||
* A provider for BPMN 2.0 elements context pad
|
||||
*/
|
||||
export default function ContextPadProvider(
|
||||
config, injector, eventBus,
|
||||
contextPad, modeling, elementFactory,
|
||||
connect, create, popupMenu,
|
||||
canvas, rules, translate) {
|
||||
|
||||
config = config || {};
|
||||
|
||||
contextPad.registerProvider(this);
|
||||
|
||||
this._contextPad = contextPad;
|
||||
|
||||
this._modeling = modeling;
|
||||
|
||||
this._elementFactory = elementFactory;
|
||||
this._connect = connect;
|
||||
this._create = create;
|
||||
this._popupMenu = popupMenu;
|
||||
this._canvas = canvas;
|
||||
this._rules = rules;
|
||||
this._translate = translate;
|
||||
|
||||
if (config.autoPlace !== false) {
|
||||
this._autoPlace = injector.get('autoPlace', false);
|
||||
}
|
||||
|
||||
eventBus.on('create.end', 250, function(event) {
|
||||
var context = event.context,
|
||||
shape = context.shape;
|
||||
|
||||
if (!hasPrimaryModifier(event) || !contextPad.isOpen(shape)) {
|
||||
return;
|
||||
}
|
||||
|
||||
var entries = contextPad.getEntries(shape);
|
||||
|
||||
if (entries.replace) {
|
||||
entries.replace.action.click(event, shape);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
ContextPadProvider.$inject = [
|
||||
'config.contextPad',
|
||||
'injector',
|
||||
'eventBus',
|
||||
'contextPad',
|
||||
'modeling',
|
||||
'elementFactory',
|
||||
'connect',
|
||||
'create',
|
||||
'popupMenu',
|
||||
'canvas',
|
||||
'rules',
|
||||
'translate'
|
||||
];
|
||||
|
||||
ContextPadProvider.prototype.getMultiElementContextPadEntries = function(elements) {
|
||||
var modeling = this._modeling;
|
||||
|
||||
var actions = {};
|
||||
|
||||
if (this._isDeleteAllowed(elements)) {
|
||||
assign(actions, {
|
||||
'delete': {
|
||||
group: 'edit',
|
||||
className: 'bpmn-icon-trash',
|
||||
title: this._translate('Remove'),
|
||||
action: {
|
||||
click: function(event, elements) {
|
||||
modeling.removeElements(elements.slice());
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return actions;
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {djs.model.Base[]} elements
|
||||
* @return {boolean}
|
||||
*/
|
||||
ContextPadProvider.prototype._isDeleteAllowed = function(elements) {
|
||||
|
||||
var baseAllowed = this._rules.allowed('elements.delete', {
|
||||
elements: elements
|
||||
});
|
||||
|
||||
if (isArray(baseAllowed)) {
|
||||
return every(baseAllowed, function(element) {
|
||||
return includes(baseAllowed, element);
|
||||
});
|
||||
}
|
||||
|
||||
return baseAllowed;
|
||||
};
|
||||
|
||||
ContextPadProvider.prototype.getContextPadEntries = function(element) {
|
||||
var contextPad = this._contextPad,
|
||||
modeling = this._modeling,
|
||||
|
||||
elementFactory = this._elementFactory,
|
||||
connect = this._connect,
|
||||
create = this._create,
|
||||
popupMenu = this._popupMenu,
|
||||
rules = this._rules,
|
||||
autoPlace = this._autoPlace,
|
||||
translate = this._translate;
|
||||
|
||||
var actions = {};
|
||||
|
||||
if (element.type === 'label') {
|
||||
return actions;
|
||||
}
|
||||
|
||||
var businessObject = element.businessObject;
|
||||
|
||||
function startConnect(event, element) {
|
||||
connect.start(event, element);
|
||||
}
|
||||
|
||||
function removeElement(e, element) {
|
||||
modeling.removeElements([ element ]);
|
||||
}
|
||||
|
||||
function getReplaceMenuPosition(element) {
|
||||
|
||||
var Y_OFFSET = 5;
|
||||
|
||||
var pad = contextPad.getPad(element).html;
|
||||
|
||||
var padRect = pad.getBoundingClientRect();
|
||||
|
||||
var pos = {
|
||||
x: padRect.left,
|
||||
y: padRect.bottom + Y_OFFSET
|
||||
};
|
||||
|
||||
return pos;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Create an append action
|
||||
*
|
||||
* @param {string} type
|
||||
* @param {string} className
|
||||
* @param {string} [title]
|
||||
* @param {Object} [options]
|
||||
*
|
||||
* @return {Object} descriptor
|
||||
*/
|
||||
function appendAction(type, className, title, options) {
|
||||
|
||||
if (typeof title !== 'string') {
|
||||
options = title;
|
||||
title = translate('Append {type}', { type: type.replace(/^bpmn:/, '') });
|
||||
}
|
||||
|
||||
function appendStart(event, element) {
|
||||
|
||||
var shape = elementFactory.createShape(assign({ type: type }, options));
|
||||
create.start(event, shape, {
|
||||
source: element
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
var append = autoPlace ? function(event, element) {
|
||||
var shape = elementFactory.createShape(assign({ type: type }, options));
|
||||
|
||||
autoPlace.append(element, shape);
|
||||
} : appendStart;
|
||||
|
||||
|
||||
return {
|
||||
group: 'model',
|
||||
className: className,
|
||||
title: title,
|
||||
action: {
|
||||
dragstart: appendStart,
|
||||
click: append
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function splitLaneHandler(count) {
|
||||
|
||||
return function(event, element) {
|
||||
|
||||
// actual split
|
||||
modeling.splitLane(element, count);
|
||||
|
||||
// refresh context pad after split to
|
||||
// get rid of split icons
|
||||
contextPad.open(element, true);
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
if (isAny(businessObject, [ 'bpmn:Lane', 'bpmn:Participant' ]) && isExpanded(element)) {
|
||||
|
||||
var childLanes = getChildLanes(element);
|
||||
|
||||
assign(actions, {
|
||||
'lane-insert-above': {
|
||||
group: 'lane-insert-above',
|
||||
className: 'bpmn-icon-lane-insert-above',
|
||||
title: translate('Add Lane above'),
|
||||
action: {
|
||||
click: function(event, element) {
|
||||
modeling.addLane(element, 'top');
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if (childLanes.length < 2) {
|
||||
|
||||
if (element.height >= 120) {
|
||||
assign(actions, {
|
||||
'lane-divide-two': {
|
||||
group: 'lane-divide',
|
||||
className: 'bpmn-icon-lane-divide-two',
|
||||
title: translate('Divide into two Lanes'),
|
||||
action: {
|
||||
click: splitLaneHandler(2)
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (element.height >= 180) {
|
||||
assign(actions, {
|
||||
'lane-divide-three': {
|
||||
group: 'lane-divide',
|
||||
className: 'bpmn-icon-lane-divide-three',
|
||||
title: translate('Divide into three Lanes'),
|
||||
action: {
|
||||
click: splitLaneHandler(3)
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
assign(actions, {
|
||||
'lane-insert-below': {
|
||||
group: 'lane-insert-below',
|
||||
className: 'bpmn-icon-lane-insert-below',
|
||||
title: translate('Add Lane below'),
|
||||
action: {
|
||||
click: function(event, element) {
|
||||
modeling.addLane(element, 'bottom');
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
if (is(businessObject, 'bpmn:FlowNode')) {
|
||||
|
||||
if (is(businessObject, 'bpmn:EventBasedGateway')) {
|
||||
|
||||
assign(actions, {
|
||||
'append.receive-task': appendAction(
|
||||
'bpmn:ReceiveTask',
|
||||
'bpmn-icon-receive-task',
|
||||
translate('Append ReceiveTask')
|
||||
),
|
||||
'append.message-intermediate-event': appendAction(
|
||||
'bpmn:IntermediateCatchEvent',
|
||||
'bpmn-icon-intermediate-event-catch-message',
|
||||
translate('Append MessageIntermediateCatchEvent'),
|
||||
{ eventDefinitionType: 'bpmn:MessageEventDefinition' }
|
||||
),
|
||||
'append.timer-intermediate-event': appendAction(
|
||||
'bpmn:IntermediateCatchEvent',
|
||||
'bpmn-icon-intermediate-event-catch-timer',
|
||||
translate('Append TimerIntermediateCatchEvent'),
|
||||
{ eventDefinitionType: 'bpmn:TimerEventDefinition' }
|
||||
),
|
||||
'append.condition-intermediate-event': appendAction(
|
||||
'bpmn:IntermediateCatchEvent',
|
||||
'bpmn-icon-intermediate-event-catch-condition',
|
||||
translate('Append ConditionIntermediateCatchEvent'),
|
||||
{ eventDefinitionType: 'bpmn:ConditionalEventDefinition' }
|
||||
),
|
||||
'append.signal-intermediate-event': appendAction(
|
||||
'bpmn:IntermediateCatchEvent',
|
||||
'bpmn-icon-intermediate-event-catch-signal',
|
||||
translate('Append SignalIntermediateCatchEvent'),
|
||||
{ eventDefinitionType: 'bpmn:SignalEventDefinition' }
|
||||
)
|
||||
});
|
||||
} else
|
||||
|
||||
if (isEventType(businessObject, 'bpmn:BoundaryEvent', 'bpmn:CompensateEventDefinition')) {
|
||||
|
||||
assign(actions, {
|
||||
'append.compensation-activity':
|
||||
appendAction(
|
||||
'bpmn:Task',
|
||||
'bpmn-icon-task',
|
||||
translate('Append compensation activity'),
|
||||
{
|
||||
isForCompensation: true
|
||||
}
|
||||
)
|
||||
});
|
||||
} else
|
||||
|
||||
if (!is(businessObject, 'bpmn:EndEvent') &&
|
||||
!businessObject.isForCompensation &&
|
||||
!isEventType(businessObject, 'bpmn:IntermediateThrowEvent', 'bpmn:LinkEventDefinition') &&
|
||||
!isEventSubProcess(businessObject)) {
|
||||
|
||||
assign(actions, {
|
||||
'append.end-event': appendAction(
|
||||
'bpmn:EndEvent',
|
||||
'bpmn-icon-end-event-none',
|
||||
translate('Append EndEvent')
|
||||
),
|
||||
'append.gateway': appendAction(
|
||||
'bpmn:ExclusiveGateway',
|
||||
'bpmn-icon-gateway-none',
|
||||
translate('Append Gateway')
|
||||
),
|
||||
'append.append-user-task': appendAction(
|
||||
'bpmn:UserTask',
|
||||
'bpmn-icon-user-task',
|
||||
'添加用户任务'
|
||||
),
|
||||
'append.intermediate-event': appendAction(
|
||||
'bpmn:IntermediateThrowEvent',
|
||||
'bpmn-icon-intermediate-event-none',
|
||||
translate('Append Intermediate/Boundary Event')
|
||||
)
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (!popupMenu.isEmpty(element, 'bpmn-replace')) {
|
||||
|
||||
// Replace menu entry
|
||||
assign(actions, {
|
||||
'replace': {
|
||||
group: 'edit',
|
||||
className: 'bpmn-icon-screw-wrench',
|
||||
title: translate('Change type'),
|
||||
action: {
|
||||
click: function(event, element) {
|
||||
|
||||
var position = assign(getReplaceMenuPosition(element), {
|
||||
cursor: { x: event.x, y: event.y }
|
||||
});
|
||||
|
||||
popupMenu.open(element, 'bpmn-replace', position, {
|
||||
title: translate('Change element'),
|
||||
width: 300,
|
||||
search: true
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (is(businessObject, 'bpmn:SequenceFlow')) {
|
||||
assign(actions, {
|
||||
'append.text-annotation': appendAction(
|
||||
'bpmn:TextAnnotation',
|
||||
'bpmn-icon-text-annotation'
|
||||
)
|
||||
});
|
||||
}
|
||||
|
||||
if (
|
||||
isAny(businessObject, [
|
||||
'bpmn:FlowNode',
|
||||
'bpmn:InteractionNode',
|
||||
'bpmn:DataObjectReference',
|
||||
'bpmn:DataStoreReference',
|
||||
])
|
||||
) {
|
||||
assign(actions, {
|
||||
'append.text-annotation': appendAction(
|
||||
'bpmn:TextAnnotation',
|
||||
'bpmn-icon-text-annotation'
|
||||
),
|
||||
|
||||
'connect': {
|
||||
group: 'connect',
|
||||
className: 'bpmn-icon-connection-multi',
|
||||
title: translate(
|
||||
'Connect using ' +
|
||||
(businessObject.isForCompensation
|
||||
? ''
|
||||
: 'Sequence/MessageFlow or ') +
|
||||
'Association'
|
||||
),
|
||||
action: {
|
||||
click: startConnect,
|
||||
dragstart: startConnect,
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
if (is(businessObject, 'bpmn:TextAnnotation')) {
|
||||
assign(actions, {
|
||||
'connect': {
|
||||
group: 'connect',
|
||||
className: 'bpmn-icon-connection-multi',
|
||||
title: translate('Connect using Association'),
|
||||
action: {
|
||||
click: startConnect,
|
||||
dragstart: startConnect,
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
if (isAny(businessObject, [ 'bpmn:DataObjectReference', 'bpmn:DataStoreReference' ])) {
|
||||
assign(actions, {
|
||||
'connect': {
|
||||
group: 'connect',
|
||||
className: 'bpmn-icon-connection-multi',
|
||||
title: translate('Connect using DataInputAssociation'),
|
||||
action: {
|
||||
click: startConnect,
|
||||
dragstart: startConnect
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (is(businessObject, 'bpmn:Group')) {
|
||||
assign(actions, {
|
||||
'append.text-annotation': appendAction('bpmn:TextAnnotation', 'bpmn-icon-text-annotation')
|
||||
});
|
||||
}
|
||||
|
||||
// delete element entry, only show if allowed by rules
|
||||
var deleteAllowed = rules.allowed('elements.delete', { elements: [ element ] });
|
||||
|
||||
if (isArray(deleteAllowed)) {
|
||||
|
||||
// was the element returned as a deletion candidate?
|
||||
deleteAllowed = deleteAllowed[0] === element;
|
||||
}
|
||||
|
||||
if (deleteAllowed) {
|
||||
assign(actions, {
|
||||
'delete': {
|
||||
group: 'edit',
|
||||
className: 'bpmn-icon-trash',
|
||||
title: translate('Remove'),
|
||||
action: {
|
||||
click: removeElement
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return actions;
|
||||
};
|
||||
|
||||
|
||||
// helpers /////////
|
||||
|
||||
function isEventType(eventBo, type, definition) {
|
||||
|
||||
var isType = eventBo.$instanceOf(type);
|
||||
var isDefinition = false;
|
||||
|
||||
var definitions = eventBo.eventDefinitions || [];
|
||||
forEach(definitions, function(def) {
|
||||
if (def.$type === definition) {
|
||||
isDefinition = true;
|
||||
}
|
||||
});
|
||||
|
||||
return isType && isDefinition;
|
||||
}
|
||||
|
||||
function includes(array, item) {
|
||||
return array.indexOf(item) !== -1;
|
||||
}
|
||||
@@ -0,0 +1,142 @@
|
||||
import { assign } from "min-dash";
|
||||
|
||||
export default function CustomPalette(
|
||||
palette,
|
||||
create,
|
||||
elementFactory,
|
||||
handTool,
|
||||
lassoTool,
|
||||
spaceTool,
|
||||
globalConnect,
|
||||
translate
|
||||
) {
|
||||
this.create = create;
|
||||
this.elementFactory = elementFactory;
|
||||
this.handTool = handTool;
|
||||
this.lassoTool = lassoTool;
|
||||
this.spaceTool = spaceTool;
|
||||
this.globalConnect = globalConnect;
|
||||
this.translate = translate;
|
||||
|
||||
palette.registerProvider(this);
|
||||
}
|
||||
|
||||
CustomPalette.$inject = [
|
||||
"palette",
|
||||
"create",
|
||||
"elementFactory",
|
||||
"handTool",
|
||||
"lassoTool",
|
||||
"spaceTool",
|
||||
"globalConnect",
|
||||
"translate"
|
||||
];
|
||||
|
||||
CustomPalette.prototype.getPaletteEntries = function (element) {
|
||||
const {
|
||||
create,
|
||||
elementFactory,
|
||||
handTool,
|
||||
lassoTool,
|
||||
spaceTool,
|
||||
globalConnect,
|
||||
translate
|
||||
} = this;
|
||||
|
||||
function createAction(type, group, className, title, options) {
|
||||
function createListener(event) {
|
||||
var shape = elementFactory.createShape(assign({ type: type }, options));
|
||||
|
||||
if (options) {
|
||||
shape.businessObject.di.isExpanded = options.isExpanded;
|
||||
}
|
||||
|
||||
create.start(event, shape);
|
||||
}
|
||||
|
||||
var shortType = type.replace(/^bpmn:/, "");
|
||||
|
||||
return {
|
||||
group: group,
|
||||
className: className,
|
||||
title: title || translate("Create {type}", { type: shortType }),
|
||||
action: {
|
||||
dragstart: createListener,
|
||||
click: createListener
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
'hand-tool': {
|
||||
group: 'tools',
|
||||
className: 'bpmn-icon-hand-tool',
|
||||
title: '激活抓手工具',
|
||||
action: {
|
||||
click: function(event) {
|
||||
handTool.activateHand(event);
|
||||
}
|
||||
}
|
||||
},
|
||||
"lasso-tool": {
|
||||
group: "tools",
|
||||
className: "bpmn-icon-lasso-tool",
|
||||
title: "激活套索工具",
|
||||
action: {
|
||||
click: function (event) {
|
||||
lassoTool.activateSelection(event);
|
||||
}
|
||||
}
|
||||
},
|
||||
'space-tool': {
|
||||
group: 'tools',
|
||||
className: 'bpmn-icon-space-tool',
|
||||
title: translate('Activate the create/remove space tool'),
|
||||
action: {
|
||||
click: function(event) {
|
||||
spaceTool.activateSelection(event);
|
||||
}
|
||||
}
|
||||
},
|
||||
'global-connect-tool': {
|
||||
group: 'tools',
|
||||
className: 'bpmn-icon-connection-multi',
|
||||
title: translate('Activate the global connect tool'),
|
||||
action: {
|
||||
click: function(event) {
|
||||
globalConnect.start(event);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
"tool-separator": {
|
||||
group: "tools",
|
||||
separator: true
|
||||
},
|
||||
|
||||
"create.start-event": createAction(
|
||||
"bpmn:StartEvent",
|
||||
"event",
|
||||
"bpmn-icon-start-event-none",
|
||||
"创建开始节点"
|
||||
),
|
||||
"create.end-event": createAction(
|
||||
"bpmn:EndEvent",
|
||||
"event",
|
||||
"bpmn-icon-end-event-none",
|
||||
"创建结束节点"
|
||||
),
|
||||
"create.user-task": createAction(
|
||||
"bpmn:UserTask",
|
||||
"activity",
|
||||
"bpmn-icon-user-task",
|
||||
"创建用户任务"
|
||||
),
|
||||
"create.exclusive-gateway": createAction(
|
||||
"bpmn:ExclusiveGateway",
|
||||
"gateway",
|
||||
"bpmn-icon-gateway-xor",
|
||||
"创建排他网关"
|
||||
)
|
||||
};
|
||||
};
|
||||
@@ -0,0 +1,8 @@
|
||||
import CustomContextPad from './CustomContextPad';
|
||||
import CustomPalette from "./CustomPalette";
|
||||
|
||||
export default {
|
||||
__init__: [ 'paletteProvider','contextPadProvider'],
|
||||
paletteProvider: [ 'type', CustomPalette ],
|
||||
contextPadProvider: [ 'type', CustomContextPad ],
|
||||
};
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,33 @@
|
||||
|
||||
function randomStr() {
|
||||
return Math.random().toString(36).slice(-8)
|
||||
}
|
||||
|
||||
export default function() {
|
||||
return `<?xml version="1.0" encoding="UTF-8"?>
|
||||
<definitions
|
||||
xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL"
|
||||
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
|
||||
xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI"
|
||||
xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC"
|
||||
xmlns:bioc="http://bpmn.io/schema/bpmn/biocolor/1.0"
|
||||
xmlns:xsd="http://www.w3.org/2001/XMLSchema"
|
||||
xmlns:flowable="http://flowable.org/bpmn"
|
||||
targetNamespace="http://www.flowable.org/processdef"
|
||||
>
|
||||
<process id="flow_${randomStr()}" name="flow_${randomStr()}">
|
||||
<startEvent id="start_event" name="开始" />
|
||||
</process>
|
||||
<bpmndi:BPMNDiagram id="BPMNDiagram_flow">
|
||||
<bpmndi:BPMNPlane id="BPMNPlane_flow" bpmnElement="T-2d89e7a3-ba79-4abd-9f64-ea59621c258c">
|
||||
<bpmndi:BPMNShape id="BPMNShape_start_event" bpmnElement="start_event" bioc:stroke="">
|
||||
<omgdc:Bounds x="240" y="200" width="30" height="30" />
|
||||
<bpmndi:BPMNLabel>
|
||||
<omgdc:Bounds x="242" y="237" width="23" height="14" />
|
||||
</bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNShape>
|
||||
</bpmndi:BPMNPlane>
|
||||
</bpmndi:BPMNDiagram>
|
||||
</definitions>
|
||||
`
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
export default {
|
||||
'bpmn:EndEvent': {},
|
||||
'bpmn:StartEvent': {
|
||||
initiator: true,
|
||||
formKey: true
|
||||
},
|
||||
'bpmn:UserTask': {
|
||||
userType: true,
|
||||
assignee: true,
|
||||
candidateUsers: true,
|
||||
candidateGroups: true,
|
||||
async: true,
|
||||
priority: true,
|
||||
formKey: true,
|
||||
skipExpression: true,
|
||||
dueDate: true,
|
||||
taskListener: true
|
||||
},
|
||||
'bpmn:ServiceTask': {
|
||||
async: true,
|
||||
skipExpression: true,
|
||||
isForCompensation: true,
|
||||
triggerable: true,
|
||||
class: true
|
||||
},
|
||||
'bpmn:ScriptTask': {
|
||||
async: true,
|
||||
isForCompensation: true,
|
||||
autoStoreVariables: true
|
||||
},
|
||||
'bpmn:ManualTask': {
|
||||
async: true,
|
||||
isForCompensation: true
|
||||
},
|
||||
'bpmn:ReceiveTask': {
|
||||
async: true,
|
||||
isForCompensation: true
|
||||
},
|
||||
'bpmn:SendTask': {
|
||||
async: true,
|
||||
isForCompensation: true
|
||||
},
|
||||
'bpmn:BusinessRuleTask': {
|
||||
async: true,
|
||||
isForCompensation: true,
|
||||
ruleVariablesInput: true,
|
||||
rules: true,
|
||||
resultVariable: true,
|
||||
exclude: true
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import workflowBpmnModeler from './index.vue'
|
||||
|
||||
workflowBpmnModeler.install = Vue => Vue.component(workflowBpmnModeler.name, workflowBpmnModeler) // 给组件配置install方法
|
||||
|
||||
export default workflowBpmnModeler
|
||||
@@ -0,0 +1,353 @@
|
||||
<template>
|
||||
<div v-loading="isView" class="flow-containers" :class="{ 'view-mode': isView }">
|
||||
<el-container style="height: 100%">
|
||||
<el-header style="border-bottom: 1px solid rgb(218 218 218);height: auto;padding-left:0px">
|
||||
<div style="display: flex; padding: 10px 0px; justify-content: space-between;">
|
||||
<div>
|
||||
<el-upload action="" :before-upload="openBpmn" style="margin-right: 10px; display:inline-block;">
|
||||
<el-tooltip effect="dark" content="加载xml" placement="bottom">
|
||||
<el-button size="mini" icon="el-icon-folder-opened" />
|
||||
</el-tooltip>
|
||||
</el-upload>
|
||||
<el-tooltip effect="dark" content="新建" placement="bottom">
|
||||
<el-button size="mini" icon="el-icon-circle-plus" @click="newDiagram" />
|
||||
</el-tooltip>
|
||||
<el-tooltip effect="dark" content="自适应屏幕" placement="bottom">
|
||||
<el-button size="mini" icon="el-icon-rank" @click="fitViewport" />
|
||||
</el-tooltip>
|
||||
<el-tooltip effect="dark" content="放大" placement="bottom">
|
||||
<el-button size="mini" icon="el-icon-zoom-in" @click="zoomViewport(true)" />
|
||||
</el-tooltip>
|
||||
<el-tooltip effect="dark" content="缩小" placement="bottom">
|
||||
<el-button size="mini" icon="el-icon-zoom-out" @click="zoomViewport(false)" />
|
||||
</el-tooltip>
|
||||
<el-tooltip effect="dark" content="后退" placement="bottom">
|
||||
<el-button size="mini" icon="el-icon-back" @click="modeler.get('commandStack').undo()" />
|
||||
</el-tooltip>
|
||||
<el-tooltip effect="dark" content="前进" placement="bottom">
|
||||
<el-button size="mini" icon="el-icon-right" @click="modeler.get('commandStack').redo()" />
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div>
|
||||
<!-- <el-button size="mini" icon="el-icon-s-check" @click="verifyXML">校验xml</el-button>-->
|
||||
<el-button size="mini" icon="el-icon-view" @click="showXML">查看xml</el-button>
|
||||
<el-button size="mini" icon="el-icon-download" @click="saveXML(true)">下载xml</el-button>
|
||||
<el-button size="mini" icon="el-icon-picture" @click="saveImg('svg', true)">下载svg</el-button>
|
||||
<el-button size="mini" type="primary" @click="save">保存模型</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-container style="align-items: stretch">
|
||||
<el-main style="padding: 0;">
|
||||
<div ref="canvas" class="canvas" />
|
||||
</el-main>
|
||||
<el-aside style="width: 400px; min-height: 650px; background-color: #f0f2f5">
|
||||
<panel v-if="modeler" :modeler="modeler" :users="users" :groups="groups" :exps="exps" :categorys="categorys" />
|
||||
</el-aside>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 汉化
|
||||
import customTranslate from './common/customTranslate'
|
||||
import lintModule from 'bpmn-js-bpmnlint';
|
||||
import Modeler from 'bpmn-js/lib/Modeler'
|
||||
// import bpmnlintConfig from './.bpmnlintrc';
|
||||
import panel from './PropertyPanel'
|
||||
import getInitStr from './flowable/init'
|
||||
// 引入flowable的节点文件
|
||||
import FlowableModule from './flowable/flowable.json'
|
||||
import customControlsModule from './customPanel'
|
||||
|
||||
export default {
|
||||
name: 'WorkflowBpmnModeler',
|
||||
components: {
|
||||
panel
|
||||
},
|
||||
props: {
|
||||
xml: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
users: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
groups: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
categorys: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
exps: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
isView: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
modeler: null,
|
||||
zoom: 1
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
xml: function(val) {
|
||||
if (val) {
|
||||
this.createNewDiagram(val)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 生成实例
|
||||
this.modeler = new Modeler({
|
||||
container: this.$refs.canvas,
|
||||
additionalModules: [
|
||||
lintModule,
|
||||
customControlsModule,
|
||||
{ //汉化
|
||||
translate: ['value', customTranslate]
|
||||
},
|
||||
],
|
||||
// 去除流程校验器,有需求可自行添加,需要在package.json 加入 "bpmnlint-plugin-local": "file:bpmnlint-plugin-local"
|
||||
// linting: {
|
||||
// bpmnlint: bpmnlintConfig
|
||||
// },
|
||||
moddleExtensions: {
|
||||
flowable: FlowableModule
|
||||
}
|
||||
})
|
||||
// 新增流程定义
|
||||
if (!this.xml) {
|
||||
this.newDiagram()
|
||||
} else {
|
||||
this.createNewDiagram(this.xml)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
newDiagram() {
|
||||
this.createNewDiagram(getInitStr())
|
||||
},
|
||||
// 让图能自适应屏幕
|
||||
fitViewport() {
|
||||
this.zoom = this.modeler.get('canvas').zoom('fit-viewport')
|
||||
const bbox = document.querySelector('.flow-containers .viewport').getBBox()
|
||||
const currentViewbox = this.modeler.get('canvas').viewbox()
|
||||
const elementMid = {
|
||||
x: bbox.x + bbox.width / 2 - 65,
|
||||
y: bbox.y + bbox.height / 2
|
||||
}
|
||||
this.modeler.get('canvas').viewbox({
|
||||
x: elementMid.x - currentViewbox.width / 2,
|
||||
y: elementMid.y - currentViewbox.height / 2,
|
||||
width: currentViewbox.width,
|
||||
height: currentViewbox.height
|
||||
})
|
||||
this.zoom = bbox.width / currentViewbox.width * 1.8
|
||||
},
|
||||
// 放大缩小
|
||||
zoomViewport(zoomIn = true) {
|
||||
this.zoom = this.modeler.get('canvas').zoom()
|
||||
this.zoom += (zoomIn ? 0.1 : -0.1)
|
||||
this.modeler.get('canvas').zoom(this.zoom)
|
||||
},
|
||||
async createNewDiagram(data) {
|
||||
// 将字符串转换成图显示出来
|
||||
// data = data.replace(/<!\[CDATA\[(.+?)]]>/g, '<![CDATA[$1]]>')
|
||||
data = data.replace(/<!\[CDATA\[(.+?)]]>/g, function(match, str) {
|
||||
return str.replace(/</g, '<')
|
||||
})
|
||||
try {
|
||||
await this.modeler.importXML(data)
|
||||
// this.adjustPalette()
|
||||
this.fitViewport()
|
||||
} catch (err) {
|
||||
console.error(err.message, err.warnings)
|
||||
}
|
||||
},
|
||||
// 对外 api
|
||||
getProcess() {
|
||||
const element = this.getProcessElement()
|
||||
return {
|
||||
id: element.id,
|
||||
name: element.name,
|
||||
category: element.$attrs['flowable:processCategory']
|
||||
}
|
||||
},
|
||||
getProcessElement() {
|
||||
const rootElements = this.modeler.getDefinitions().rootElements
|
||||
for (let i = 0; i < rootElements.length; i++) {
|
||||
if (rootElements[i].$type === 'bpmn:Process') return rootElements[i]
|
||||
}
|
||||
},
|
||||
async verifyXML(){
|
||||
const linting = this.modeler.get('linting')
|
||||
linting.toggle();
|
||||
},
|
||||
async saveXML(download = false) {
|
||||
try {
|
||||
const { xml } = await this.modeler.saveXML({ format: true })
|
||||
if (download) {
|
||||
this.downloadFile(`${this.getProcessElement().name}.bpmn20.xml`, xml, 'application/xml')
|
||||
}
|
||||
return xml
|
||||
} catch (err) {
|
||||
console.log(err)
|
||||
}
|
||||
},
|
||||
async showXML() {
|
||||
try {
|
||||
const xml = await this.saveXML()
|
||||
this.$emit('showXML',xml)
|
||||
} catch (err) {
|
||||
console.log(err)
|
||||
}
|
||||
},
|
||||
async saveImg(type = 'svg', download = false) {
|
||||
try {
|
||||
const { svg } = await this.modeler.saveSVG({ format: true })
|
||||
if (download) {
|
||||
this.downloadFile(this.getProcessElement().name, svg, 'image/svg+xml')
|
||||
}
|
||||
return svg
|
||||
} catch (err) {
|
||||
console.log(err)
|
||||
}
|
||||
},
|
||||
async save() {
|
||||
const process = this.getProcess()
|
||||
const xml = await this.saveXML()
|
||||
const svg = await this.saveImg()
|
||||
const result = { process, xml, svg }
|
||||
this.$emit('save', result)
|
||||
window.parent.postMessage(result, '*')
|
||||
},
|
||||
openBpmn(file) {
|
||||
const reader = new FileReader()
|
||||
reader.readAsText(file, 'utf-8')
|
||||
reader.onload = () => {
|
||||
this.createNewDiagram(reader.result)
|
||||
}
|
||||
return false
|
||||
},
|
||||
downloadFile(filename, data, type) {
|
||||
const a = document.createElement('a');
|
||||
const url = window.URL.createObjectURL(new Blob([data], {type: type}));
|
||||
a.href = url
|
||||
a.download = filename
|
||||
a.click()
|
||||
window.URL.revokeObjectURL(url)
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/*左边工具栏以及编辑节点的样式*/
|
||||
@import "~bpmn-js/dist/assets/diagram-js.css";
|
||||
@import "~bpmn-js/dist/assets/bpmn-font/css/bpmn.css";
|
||||
@import "~bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css";
|
||||
@import "~bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css";
|
||||
//@import "~bpmn-js-bpmnlint/dist/assets/css/bpmn-js-bpmnlint.css";
|
||||
.view-mode {
|
||||
.el-header, .el-aside, .djs-palette, .bjs-powered-by {
|
||||
display: none;
|
||||
}
|
||||
.el-loading-mask {
|
||||
background-color: initial;
|
||||
}
|
||||
.el-loading-spinner {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.flow-containers {
|
||||
// background-color: #ffffff;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
//flex: 1;
|
||||
//position: relative;
|
||||
//background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTBoNDBNMTAgMHY0ME0wIDIwaDQwTTIwIDB2NDBNMCAzMGg0ME0zMCAwdjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMGUwZTAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQwIDBIMHY0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+")
|
||||
//repeat !important;
|
||||
//div.toggle-mode {
|
||||
// display: none;
|
||||
//}
|
||||
}
|
||||
.panel {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50px;
|
||||
width: 300px;
|
||||
}
|
||||
.load {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.el-form-item__label{
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.djs-palette{
|
||||
left: 0px!important;
|
||||
top: 0px;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.djs-container svg {
|
||||
//min-height: 650px;
|
||||
}
|
||||
|
||||
.highlight.djs-shape .djs-visual > :nth-child(1) {
|
||||
fill: green !important;
|
||||
stroke: green !important;
|
||||
fill-opacity: 0.2 !important;
|
||||
}
|
||||
.highlight.djs-shape .djs-visual > :nth-child(2) {
|
||||
fill: green !important;
|
||||
}
|
||||
.highlight.djs-shape .djs-visual > path {
|
||||
fill: green !important;
|
||||
fill-opacity: 0.2 !important;
|
||||
stroke: green !important;
|
||||
}
|
||||
.highlight.djs-connection > .djs-visual > path {
|
||||
stroke: green !important;
|
||||
}
|
||||
// .djs-connection > .djs-visual > path {
|
||||
// stroke: orange !important;
|
||||
// stroke-dasharray: 4px !important;
|
||||
// fill-opacity: 0.2 !important;
|
||||
// }
|
||||
// .djs-shape .djs-visual > :nth-child(1) {
|
||||
// fill: orange !important;
|
||||
// stroke: orange !important;
|
||||
// stroke-dasharray: 4px !important;
|
||||
// fill-opacity: 0.2 !important;
|
||||
// }
|
||||
.highlight-todo.djs-connection > .djs-visual > path {
|
||||
stroke: orange !important;
|
||||
stroke-dasharray: 4px !important;
|
||||
fill-opacity: 0.2 !important;
|
||||
}
|
||||
.highlight-todo.djs-shape .djs-visual > :nth-child(1) {
|
||||
fill: orange !important;
|
||||
stroke: orange !important;
|
||||
stroke-dasharray: 4px !important;
|
||||
fill-opacity: 0.2 !important;
|
||||
}
|
||||
.overlays-div {
|
||||
font-size: 10px;
|
||||
color: red;
|
||||
width: 100px;
|
||||
top: -20px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,232 @@
|
||||
export default {
|
||||
// Labels
|
||||
'Activate the global connect tool': '激活全局连接工具',
|
||||
'Append {type}': '添加 {type}',
|
||||
'Append Task': '添加任务',
|
||||
'Append Gateway': '添加网关',
|
||||
'Append EndEvent': '添加结束事件',
|
||||
'Append StartEvent': '添加开始事件',
|
||||
"Append Intermediate/Boundary Event": '添加边界事件',
|
||||
'Add Lane above': '在上面添加道',
|
||||
'Divide into two Lanes': '分割成两个道',
|
||||
'Divide into three Lanes': '分割成三个道',
|
||||
'Add Lane below': '在下面添加道',
|
||||
'Append compensation activity': '追加补偿活动',
|
||||
'Change type': '修改类型',
|
||||
'Connect using Association': '使用关联连接',
|
||||
'Connect using Sequence/MessageFlow or Association': '使用顺序/消息流或者关联连接',
|
||||
'Connect using DataInputAssociation': '使用数据输入关联连接',
|
||||
'Remove': '移除',
|
||||
'Activate the hand tool': '激活抓手工具',
|
||||
'Activate the lasso tool': '激活套索工具',
|
||||
'Activate the create/remove space tool': '激活创建/删除空间工具',
|
||||
'Create expanded SubProcess': '创建扩展子过程',
|
||||
'Create IntermediateThrowEvent/BoundaryEvent': '创建中间抛出事件/边界事件',
|
||||
'Create Pool/Participant': '创建池/参与者',
|
||||
'Parallel Multi Instance': '并行多重事件',
|
||||
'Sequential Multi Instance': '时序多重事件',
|
||||
'DataObjectReference': '数据对象参考',
|
||||
'DataStoreReference': '数据存储参考',
|
||||
'Loop': '循环',
|
||||
'Ad-hoc': '即席',
|
||||
'Create {type}': '创建 {type}',
|
||||
'Task': '任务',
|
||||
'Send Task': '发送任务',
|
||||
'Receive Task': '接收任务',
|
||||
'User Task': '用户任务',
|
||||
'Manual Task': '手工任务',
|
||||
'Business Rule Task': '业务规则任务',
|
||||
'Service Task': '服务任务',
|
||||
'Script Task': '脚本任务',
|
||||
'Call Activity': '调用活动',
|
||||
'Sub Process (collapsed)': '子流程（折叠的）',
|
||||
'Sub Process (expanded)': '子流程（展开的）',
|
||||
'Start Event': '开始事件',
|
||||
'StartEvent': '开始事件',
|
||||
'Intermediate Throw Event': '中间事件',
|
||||
'End Event': '结束事件',
|
||||
'EndEvent': '结束事件',
|
||||
'Create Gateway': '创建网关',
|
||||
'Create Intermediate/Boundary Event': '创建中间/边界事件',
|
||||
'Message Start Event': '消息开始事件',
|
||||
'Timer Start Event': '定时开始事件',
|
||||
'Conditional Start Event': '条件开始事件',
|
||||
'Signal Start Event': '信号开始事件',
|
||||
'Error Start Event': '错误开始事件',
|
||||
'Escalation Start Event': '升级开始事件',
|
||||
'Compensation Start Event': '补偿开始事件',
|
||||
'Message Start Event (non-interrupting)': '消息开始事件（非中断）',
|
||||
'Timer Start Event (non-interrupting)': '定时开始事件（非中断）',
|
||||
'Conditional Start Event (non-interrupting)': '条件开始事件（非中断）',
|
||||
'Signal Start Event (non-interrupting)': '信号开始事件（非中断）',
|
||||
'Escalation Start Event (non-interrupting)': '升级开始事件（非中断）',
|
||||
'Message Intermediate Catch Event': '消息中间捕获事件',
|
||||
'Message Intermediate Throw Event': '消息中间抛出事件',
|
||||
'Timer Intermediate Catch Event': '定时中间捕获事件',
|
||||
'Escalation Intermediate Throw Event': '升级中间抛出事件',
|
||||
'Conditional Intermediate Catch Event': '条件中间捕获事件',
|
||||
'Link Intermediate Catch Event': '链接中间捕获事件',
|
||||
'Link Intermediate Throw Event': '链接中间抛出事件',
|
||||
'Compensation Intermediate Throw Event': '补偿中间抛出事件',
|
||||
'Signal Intermediate Catch Event': '信号中间捕获事件',
|
||||
'Signal Intermediate Throw Event': '信号中间抛出事件',
|
||||
'Message End Event': '消息结束事件',
|
||||
'Escalation End Event': '定时结束事件',
|
||||
'Error End Event': '错误结束事件',
|
||||
'Cancel End Event': '取消结束事件',
|
||||
'Compensation End Event': '补偿结束事件',
|
||||
'Signal End Event': '信号结束事件',
|
||||
'Terminate End Event': '终止结束事件',
|
||||
'Message Boundary Event': '消息边界事件',
|
||||
'Message Boundary Event (non-interrupting)': '消息边界事件（非中断）',
|
||||
'Timer Boundary Event': '定时边界事件',
|
||||
'Timer Boundary Event (non-interrupting)': '定时边界事件（非中断）',
|
||||
'Escalation Boundary Event': '升级边界事件',
|
||||
'Escalation Boundary Event (non-interrupting)': '升级边界事件（非中断）',
|
||||
'Conditional Boundary Event': '条件边界事件',
|
||||
'Conditional Boundary Event (non-interrupting)': '条件边界事件（非中断）',
|
||||
'Error Boundary Event': '错误边界事件',
|
||||
'Cancel Boundary Event': '取消边界事件',
|
||||
'Signal Boundary Event': '信号边界事件',
|
||||
'Signal Boundary Event (non-interrupting)': '信号边界事件（非中断）',
|
||||
'Compensation Boundary Event': '补偿边界事件',
|
||||
'Exclusive Gateway': '互斥网关',
|
||||
'Parallel Gateway': '并行网关',
|
||||
'Inclusive Gateway': '相容网关',
|
||||
'Complex Gateway': '复杂网关',
|
||||
'Event based Gateway': '事件网关',
|
||||
'Transaction': '转运',
|
||||
'Sub Process': '子流程',
|
||||
'Event Sub Process': '事件子流程',
|
||||
'Collapsed Pool': '折叠池',
|
||||
'Expanded Pool': '展开池',
|
||||
// Errors
|
||||
'no parent for {element} in {parent}': '在{parent}里，{element}没有父类',
|
||||
'no shape type specified': '没有指定的形状类型',
|
||||
'flow elements must be children of pools/participants': '流元素必须是池/参与者的子类',
|
||||
'out of bounds release': 'out of bounds release',
|
||||
'more than {count} child lanes': '子道大于{count} ',
|
||||
'element required': '元素不能为空',
|
||||
'diagram not part of bpmn:Definitions': '流程图不符合bpmn规范',
|
||||
'no diagram to display': '没有可展示的流程图',
|
||||
'no process or collaboration to display': '没有可展示的流程/协作',
|
||||
'element {element} referenced by {referenced}#{property} not yet drawn': '由{referenced}#{property}引用的{element}元素仍未绘制',
|
||||
'already rendered {element}': '{element} 已被渲染',
|
||||
'failed to import {element}': '导入{element}失败',
|
||||
// 属性面板的参数
|
||||
'Id': '标识',
|
||||
'Name': '名称',
|
||||
'General': '常规',
|
||||
'Details': '详情',
|
||||
'Message Name': '消息名称',
|
||||
'Message': '消息',
|
||||
'Initiator': '创建者',
|
||||
'Asynchronous Continuations': '持续异步',
|
||||
'Asynchronous Before': '异步前',
|
||||
'Asynchronous After': '异步后',
|
||||
'Job Configuration': '工作配置',
|
||||
'Exclusive': '排除',
|
||||
'Job Priority': '工作优先级',
|
||||
'Retry Time Cycle': '重试时间周期',
|
||||
'Documentation': '文档',
|
||||
'Element Documentation': '元素文档',
|
||||
'History Configuration': '历史配置',
|
||||
'History Time To Live': '历史的生存时间',
|
||||
'Forms': '表单',
|
||||
'Form Key': '表单key',
|
||||
'Form Fields': '表单字段',
|
||||
'Business Key': '业务key',
|
||||
'Form Field': '表单字段',
|
||||
'ID': '编号',
|
||||
'Type': '类型',
|
||||
'Label': '名称',
|
||||
'Default Value': '默认值',
|
||||
'Validation': '校验',
|
||||
'Add Constraint': '添加约束',
|
||||
'Config': '配置',
|
||||
'Properties': '属性',
|
||||
'Add Property': '添加属性',
|
||||
'Value': '值',
|
||||
'Listeners': '监听器',
|
||||
'Execution Listener': '执行监听',
|
||||
'Event Type': '事件类型',
|
||||
'Listener Type': '监听器类型',
|
||||
'Java Class': 'Java类',
|
||||
'Expression': '表达式',
|
||||
'Must provide a value': '必须提供一个值',
|
||||
'Delegate Expression': '代理表达式',
|
||||
'Script': '脚本',
|
||||
'Script Format': '脚本格式',
|
||||
'Script Type': '脚本类型',
|
||||
'Inline Script': '内联脚本',
|
||||
'External Script': '外部脚本',
|
||||
'Resource': '资源',
|
||||
'Field Injection': '字段注入',
|
||||
'Extensions': '扩展',
|
||||
'Input/Output': '输入/输出',
|
||||
'Input Parameters': '输入参数',
|
||||
'Output Parameters': '输出参数',
|
||||
'Parameters': '参数',
|
||||
'Output Parameter': '输出参数',
|
||||
'Timer Definition Type': '定时器定义类型',
|
||||
'Timer Definition': '定时器定义',
|
||||
'Date': '日期',
|
||||
'Duration': '持续',
|
||||
'Cycle': '循环',
|
||||
'Signal': '信号',
|
||||
'Signal Name': '信号名称',
|
||||
'Escalation': '升级',
|
||||
'Error': '错误',
|
||||
'Link Name': '链接名称',
|
||||
'Condition': '条件名称',
|
||||
'Variable Name': '变量名称',
|
||||
'Variable Event': '变量事件',
|
||||
'Specify more than one variable change event as a comma separated list.': '多个变量事件以逗号隔开',
|
||||
'Wait for Completion': '等待完成',
|
||||
'Activity Ref': '活动参考',
|
||||
'Version Tag': '版本标签',
|
||||
'Executable': '可执行文件',
|
||||
'External Task Configuration': '扩展任务配置',
|
||||
'Task Priority': '任务优先级',
|
||||
'External': '外部',
|
||||
'Connector': '连接器',
|
||||
'Must configure Connector': '必须配置连接器',
|
||||
'Connector Id': '连接器编号',
|
||||
'Implementation': '实现方式',
|
||||
'Field Injections': '字段注入',
|
||||
'Fields': '字段',
|
||||
'Result Variable': '结果变量',
|
||||
'Topic': '主题',
|
||||
'Configure Connector': '配置连接器',
|
||||
'Input Parameter': '输入参数',
|
||||
'Assignee': '代理人',
|
||||
'Candidate Users': '候选用户',
|
||||
'Candidate Groups': '候选组',
|
||||
'Due Date': '到期时间',
|
||||
'Follow Up Date': '跟踪日期',
|
||||
'Priority': '优先级',
|
||||
'The follow up date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)': '跟踪日期必须符合EL表达式，如： ${someDate} ,或者一个ISO标准日期，如：2015-06-26T09:54:00',
|
||||
'The due date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)': '跟踪日期必须符合EL表达式，如： ${someDate} ,或者一个ISO标准日期，如：2015-06-26T09:54:00',
|
||||
'Variables': '变量'
|
||||
}
|
||||
|
||||
export const NodeName = {
|
||||
'bpmn:Process': '流程',
|
||||
'bpmn:StartEvent': '开始事件',
|
||||
'bpmn:IntermediateThrowEvent': '中间事件',
|
||||
'bpmn:Task': '任务',
|
||||
'bpmn:SendTask': '发送任务',
|
||||
'bpmn:ReceiveTask': '接收任务',
|
||||
'bpmn:UserTask': '用户任务',
|
||||
'bpmn:ManualTask': '手工任务',
|
||||
'bpmn:BusinessRuleTask': '业务规则任务',
|
||||
'bpmn:ServiceTask': '服务任务',
|
||||
'bpmn:ScriptTask': '脚本任务',
|
||||
'bpmn:EndEvent': '结束事件',
|
||||
'bpmn:SequenceFlow': '流程线',
|
||||
'bpmn:ExclusiveGateway': '互斥网关',
|
||||
'bpmn:ParallelGateway': '并行网关',
|
||||
'bpmn:InclusiveGateway': '相容网关',
|
||||
'bpmn:ComplexGateway': '复杂网关',
|
||||
'bpmn:EventBasedGateway': '事件网关'
|
||||
}
|
||||
@@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<div ref="rightPanel" class="rightPanel-container">
|
||||
<div class="rightPanel-background" />
|
||||
<div class="rightPanel">
|
||||
<div class="rightPanel-items">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'RightPanel',
|
||||
props: {
|
||||
clickNotClose: {
|
||||
default: false,
|
||||
type: Boolean
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
show: {
|
||||
get() {
|
||||
return this.$store.state.settings.showSettings
|
||||
},
|
||||
set(val) {
|
||||
this.$store.dispatch('settings/changeSetting', {
|
||||
key: 'showSettings',
|
||||
value: val
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
show(value) {
|
||||
if (value && !this.clickNotClose) {
|
||||
this.addEventClick()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.addEventClick()
|
||||
},
|
||||
beforeDestroy() {
|
||||
const elx = this.$refs.rightPanel
|
||||
elx.remove()
|
||||
},
|
||||
methods: {
|
||||
addEventClick() {
|
||||
window.addEventListener('click', this.closeSidebar)
|
||||
},
|
||||
closeSidebar(evt) {
|
||||
const parent = evt.target.closest('.el-drawer__body')
|
||||
if (!parent) {
|
||||
this.show = false
|
||||
window.removeEventListener('click', this.closeSidebar)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.rightPanel-background {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
|
||||
background: rgba(0, 0, 0, .2);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.rightPanel {
|
||||
width: 100%;
|
||||
max-width: 260px;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
|
||||
transition: all .25s cubic-bezier(.7, .3, .1, 1);
|
||||
transform: translate(100%);
|
||||
background: #fff;
|
||||
z-index: 40000;
|
||||
}
|
||||
|
||||
.handle-button {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
position: absolute;
|
||||
left: -48px;
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
border-radius: 6px 0 0 6px !important;
|
||||
z-index: 0;
|
||||
pointer-events: auto;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
line-height: 48px;
|
||||
i {
|
||||
font-size: 24px;
|
||||
line-height: 48px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<div class="top-right-btn" :style="style">
|
||||
<el-row>
|
||||
<el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top" v-if="search">
|
||||
<el-button size="mini" circle icon="el-icon-search" @click="toggleSearch()" />
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="刷新" placement="top">
|
||||
<el-button size="mini" circle icon="el-icon-refresh" @click="refresh()" />
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="columns">
|
||||
<el-button size="mini" circle icon="el-icon-menu" @click="showColumn()" v-if="showColumnsType == 'transfer'"/>
|
||||
<el-dropdown trigger="click" :hide-on-click="false" style="padding-left: 12px" v-if="showColumnsType == 'checkbox'">
|
||||
<el-button size="mini" circle icon="el-icon-menu" />
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<template v-for="item in columns">
|
||||
<el-dropdown-item :key="item.key">
|
||||
<el-checkbox :checked="item.visible" @change="checkboxChange($event, item.label)" :label="item.label" />
|
||||
</el-dropdown-item>
|
||||
</template>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</el-tooltip>
|
||||
</el-row>
|
||||
<el-dialog :title="title" :visible.sync="open" append-to-body>
|
||||
<el-transfer
|
||||
:titles="['显示', '隐藏']"
|
||||
v-model="value"
|
||||
:data="columns"
|
||||
@change="dataChange"
|
||||
></el-transfer>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "RightToolbar",
|
||||
data() {
|
||||
return {
|
||||
// 显隐数据
|
||||
value: [],
|
||||
// 弹出层标题
|
||||
title: "显示/隐藏",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
/* 是否显示检索条件 */
|
||||
showSearch: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
/* 显隐列信息 */
|
||||
columns: {
|
||||
type: Array,
|
||||
},
|
||||
/* 是否显示检索图标 */
|
||||
search: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
/* 显隐列类型（transfer穿梭框、checkbox复选框） */
|
||||
showColumnsType: {
|
||||
type: String,
|
||||
default: "checkbox",
|
||||
},
|
||||
/* 右外边距 */
|
||||
gutter: {
|
||||
type: Number,
|
||||
default: 10,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
style() {
|
||||
const ret = {};
|
||||
if (this.gutter) {
|
||||
ret.marginRight = `${this.gutter / 2}px`;
|
||||
}
|
||||
return ret;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (this.showColumnsType == 'transfer') {
|
||||
// 显隐列初始默认隐藏列
|
||||
for (let item in this.columns) {
|
||||
if (this.columns[item].visible === false) {
|
||||
this.value.push(parseInt(item));
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 搜索
|
||||
toggleSearch() {
|
||||
this.$emit("update:showSearch", !this.showSearch);
|
||||
},
|
||||
// 刷新
|
||||
refresh() {
|
||||
this.$emit("queryTable");
|
||||
},
|
||||
// 右侧列表元素变化
|
||||
dataChange(data) {
|
||||
for (let item in this.columns) {
|
||||
const key = this.columns[item].key;
|
||||
this.columns[item].visible = !data.includes(key);
|
||||
}
|
||||
},
|
||||
// 打开显隐列dialog
|
||||
showColumn() {
|
||||
this.open = true;
|
||||
},
|
||||
// 勾选
|
||||
checkboxChange(event, label) {
|
||||
this.columns.filter(item => item.label == label)[0].visible = event;
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-transfer__button {
|
||||
border-radius: 50%;
|
||||
padding: 12px;
|
||||
display: block;
|
||||
margin-left: 0px;
|
||||
}
|
||||
::v-deep .el-transfer__button:first-child {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<div>
|
||||
<svg-icon icon-class="question" @click="goto" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'RuoYiDoc',
|
||||
data() {
|
||||
return {
|
||||
url: 'http://doc.ruoyi.vip/ruoyi-vue'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goto() {
|
||||
window.open(this.url)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<div>
|
||||
<svg-icon icon-class="github" @click="goto" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'RuoYiGit',
|
||||
data() {
|
||||
return {
|
||||
url: 'https://gitee.com/y_project/RuoYi-Vue'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goto() {
|
||||
window.open(this.url)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<div>
|
||||
<svg-icon :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'" @click="click" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import screenfull from 'screenfull'
|
||||
|
||||
export default {
|
||||
name: 'Screenfull',
|
||||
data() {
|
||||
return {
|
||||
isFullscreen: false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init()
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.destroy()
|
||||
},
|
||||
methods: {
|
||||
click() {
|
||||
if (!screenfull.isEnabled) {
|
||||
this.$message({ message: '你的浏览器不支持全屏', type: 'warning' })
|
||||
return false
|
||||
}
|
||||
screenfull.toggle()
|
||||
},
|
||||
change() {
|
||||
this.isFullscreen = screenfull.isFullscreen
|
||||
},
|
||||
init() {
|
||||
if (screenfull.isEnabled) {
|
||||
screenfull.on('change', this.change)
|
||||
}
|
||||
},
|
||||
destroy() {
|
||||
if (screenfull.isEnabled) {
|
||||
screenfull.off('change', this.change)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.screenfull-svg {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
fill: #5a5e66;;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
vertical-align: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<el-dropdown trigger="click" @command="handleSetSize">
|
||||
<div>
|
||||
<svg-icon class-name="size-icon" icon-class="size" />
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item v-for="item of sizeOptions" :key="item.value" :disabled="size===item.value" :command="item.value">
|
||||
{{ item.label }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
sizeOptions: [
|
||||
{ label: 'Default', value: 'default' },
|
||||
{ label: 'Medium', value: 'medium' },
|
||||
{ label: 'Small', value: 'small' },
|
||||
{ label: 'Mini', value: 'mini' }
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
size() {
|
||||
return this.$store.getters.size
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSetSize(size) {
|
||||
this.$ELEMENT.size = size
|
||||
this.$store.dispatch('app/setSize', size)
|
||||
this.refreshView()
|
||||
this.$message({
|
||||
message: 'Switch Size Success',
|
||||
type: 'success'
|
||||
})
|
||||
},
|
||||
refreshView() {
|
||||
// In order to make the cached page re-rendered
|
||||
this.$store.dispatch('tagsView/delAllCachedViews', this.$route)
|
||||
|
||||
const { fullPath } = this.$route
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$router.replace({
|
||||
path: '/redirect' + fullPath
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
|
||||
<svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
|
||||
<use :xlink:href="iconName" />
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { isExternal } from '@/utils/validate'
|
||||
|
||||
export default {
|
||||
name: 'SvgIcon',
|
||||
props: {
|
||||
iconClass: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
className: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isExternal() {
|
||||
return isExternal(this.iconClass)
|
||||
},
|
||||
iconName() {
|
||||
return `#icon-${this.iconClass}`
|
||||
},
|
||||
svgClass() {
|
||||
if (this.className) {
|
||||
return 'svg-icon ' + this.className
|
||||
} else {
|
||||
return 'svg-icon'
|
||||
}
|
||||
},
|
||||
styleExternalIcon() {
|
||||
return {
|
||||
mask: `url(${this.iconClass}) no-repeat 50% 50%`,
|
||||
'-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.svg-icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
vertical-align: -0.15em;
|
||||
fill: currentColor;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.svg-external-icon {
|
||||
background-color: currentColor;
|
||||
mask-size: cover!important;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,173 @@
|
||||
<template>
|
||||
<el-color-picker
|
||||
v-model="theme"
|
||||
:predefine="['#409EFF', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]"
|
||||
class="theme-picker"
|
||||
popper-class="theme-picker-dropdown"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const version = require('element-ui/package.json').version // element-ui version from node_modules
|
||||
const ORIGINAL_THEME = '#409EFF' // default color
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
chalk: '', // content of theme-chalk css
|
||||
theme: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
defaultTheme() {
|
||||
return this.$store.state.settings.theme
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
defaultTheme: {
|
||||
handler: function(val, oldVal) {
|
||||
this.theme = val
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
async theme(val) {
|
||||
await this.setTheme(val)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if(this.defaultTheme !== ORIGINAL_THEME) {
|
||||
this.setTheme(this.defaultTheme)
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
async setTheme(val) {
|
||||
const oldVal = this.chalk ? this.theme : ORIGINAL_THEME
|
||||
if (typeof val !== 'string') return
|
||||
const themeCluster = this.getThemeCluster(val.replace('#', ''))
|
||||
const originalCluster = this.getThemeCluster(oldVal.replace('#', ''))
|
||||
|
||||
const getHandler = (variable, id) => {
|
||||
return () => {
|
||||
const originalCluster = this.getThemeCluster(ORIGINAL_THEME.replace('#', ''))
|
||||
const newStyle = this.updateStyle(this[variable], originalCluster, themeCluster)
|
||||
|
||||
let styleTag = document.getElementById(id)
|
||||
if (!styleTag) {
|
||||
styleTag = document.createElement('style')
|
||||
styleTag.setAttribute('id', id)
|
||||
document.head.appendChild(styleTag)
|
||||
}
|
||||
styleTag.innerText = newStyle
|
||||
}
|
||||
}
|
||||
|
||||
if (!this.chalk) {
|
||||
const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`
|
||||
await this.getCSSString(url, 'chalk')
|
||||
}
|
||||
|
||||
const chalkHandler = getHandler('chalk', 'chalk-style')
|
||||
|
||||
chalkHandler()
|
||||
|
||||
const styles = [].slice.call(document.querySelectorAll('style'))
|
||||
.filter(style => {
|
||||
const text = style.innerText
|
||||
return new RegExp(oldVal, 'i').test(text) && !/Chalk Variables/.test(text)
|
||||
})
|
||||
styles.forEach(style => {
|
||||
const { innerText } = style
|
||||
if (typeof innerText !== 'string') return
|
||||
style.innerText = this.updateStyle(innerText, originalCluster, themeCluster)
|
||||
})
|
||||
|
||||
this.$emit('change', val)
|
||||
},
|
||||
|
||||
updateStyle(style, oldCluster, newCluster) {
|
||||
let newStyle = style
|
||||
oldCluster.forEach((color, index) => {
|
||||
newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index])
|
||||
})
|
||||
return newStyle
|
||||
},
|
||||
|
||||
getCSSString(url, variable) {
|
||||
return new Promise(resolve => {
|
||||
const xhr = new XMLHttpRequest()
|
||||
xhr.onreadystatechange = () => {
|
||||
if (xhr.readyState === 4 && xhr.status === 200) {
|
||||
this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, '')
|
||||
resolve()
|
||||
}
|
||||
}
|
||||
xhr.open('GET', url)
|
||||
xhr.send()
|
||||
})
|
||||
},
|
||||
|
||||
getThemeCluster(theme) {
|
||||
const tintColor = (color, tint) => {
|
||||
let red = parseInt(color.slice(0, 2), 16)
|
||||
let green = parseInt(color.slice(2, 4), 16)
|
||||
let blue = parseInt(color.slice(4, 6), 16)
|
||||
|
||||
if (tint === 0) { // when primary color is in its rgb space
|
||||
return [red, green, blue].join(',')
|
||||
} else {
|
||||
red += Math.round(tint * (255 - red))
|
||||
green += Math.round(tint * (255 - green))
|
||||
blue += Math.round(tint * (255 - blue))
|
||||
|
||||
red = red.toString(16)
|
||||
green = green.toString(16)
|
||||
blue = blue.toString(16)
|
||||
|
||||
return `#${red}${green}${blue}`
|
||||
}
|
||||
}
|
||||
|
||||
const shadeColor = (color, shade) => {
|
||||
let red = parseInt(color.slice(0, 2), 16)
|
||||
let green = parseInt(color.slice(2, 4), 16)
|
||||
let blue = parseInt(color.slice(4, 6), 16)
|
||||
|
||||
red = Math.round((1 - shade) * red)
|
||||
green = Math.round((1 - shade) * green)
|
||||
blue = Math.round((1 - shade) * blue)
|
||||
|
||||
red = red.toString(16)
|
||||
green = green.toString(16)
|
||||
blue = blue.toString(16)
|
||||
|
||||
return `#${red}${green}${blue}`
|
||||
}
|
||||
|
||||
const clusters = [theme]
|
||||
for (let i = 0; i <= 9; i++) {
|
||||
clusters.push(tintColor(theme, Number((i / 10).toFixed(2))))
|
||||
}
|
||||
clusters.push(shadeColor(theme, 0.1))
|
||||
return clusters
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.theme-message,
|
||||
.theme-picker-dropdown {
|
||||
z-index: 99999 !important;
|
||||
}
|
||||
|
||||
.theme-picker .el-color-picker__trigger {
|
||||
height: 26px !important;
|
||||
width: 26px !important;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.theme-picker-dropdown .el-color-dropdown__link-btn {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,195 @@
|
||||
<template>
|
||||
<el-menu
|
||||
:default-active="activeMenu"
|
||||
mode="horizontal"
|
||||
@select="handleSelect"
|
||||
>
|
||||
<template v-for="(item, index) in topMenus">
|
||||
<el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index" v-if="index < visibleNumber">
|
||||
<svg-icon
|
||||
v-if="item.meta && item.meta.icon && item.meta.icon !== '#'"
|
||||
:icon-class="item.meta.icon"/>
|
||||
{{ item.meta.title }}
|
||||
</el-menu-item>
|
||||
</template>
|
||||
|
||||
<!-- 顶部菜单超出数量折叠 -->
|
||||
<el-submenu :style="{'--theme': theme}" index="more" v-if="topMenus.length > visibleNumber">
|
||||
<template slot="title">更多菜单</template>
|
||||
<template v-for="(item, index) in topMenus">
|
||||
<el-menu-item
|
||||
:index="item.path"
|
||||
:key="index"
|
||||
v-if="index >= visibleNumber">
|
||||
<svg-icon
|
||||
v-if="item.meta && item.meta.icon && item.meta.icon !== '#'"
|
||||
:icon-class="item.meta.icon"/>
|
||||
{{ item.meta.title }}
|
||||
</el-menu-item>
|
||||
</template>
|
||||
</el-submenu>
|
||||
</el-menu>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { constantRoutes } from "@/router";
|
||||
|
||||
// 隐藏侧边栏路由
|
||||
const hideList = ['/index', '/user/profile'];
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 顶部栏初始数
|
||||
visibleNumber: 5,
|
||||
// 当前激活菜单的 index
|
||||
currentIndex: undefined
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
theme() {
|
||||
return this.$store.state.settings.theme;
|
||||
},
|
||||
// 顶部显示菜单
|
||||
topMenus() {
|
||||
let topMenus = [];
|
||||
this.routers.map((menu) => {
|
||||
if (menu.hidden !== true) {
|
||||
// 兼容顶部栏一级菜单内部跳转
|
||||
if (menu.path === "/") {
|
||||
topMenus.push(menu.children[0]);
|
||||
} else {
|
||||
topMenus.push(menu);
|
||||
}
|
||||
}
|
||||
});
|
||||
return topMenus;
|
||||
},
|
||||
// 所有的路由信息
|
||||
routers() {
|
||||
return this.$store.state.permission.topbarRouters;
|
||||
},
|
||||
// 设置子路由
|
||||
childrenMenus() {
|
||||
var childrenMenus = [];
|
||||
this.routers.map((router) => {
|
||||
for (var item in router.children) {
|
||||
if (router.children[item].parentPath === undefined) {
|
||||
if(router.path === "/") {
|
||||
router.children[item].path = "/" + router.children[item].path;
|
||||
} else {
|
||||
if(!this.ishttp(router.children[item].path)) {
|
||||
router.children[item].path = router.path + "/" + router.children[item].path;
|
||||
}
|
||||
}
|
||||
router.children[item].parentPath = router.path;
|
||||
}
|
||||
childrenMenus.push(router.children[item]);
|
||||
}
|
||||
});
|
||||
return constantRoutes.concat(childrenMenus);
|
||||
},
|
||||
// 默认激活的菜单
|
||||
activeMenu() {
|
||||
const path = this.$route.path;
|
||||
let activePath = path;
|
||||
if (path !== undefined && path.lastIndexOf("/") > 0 && hideList.indexOf(path) === -1) {
|
||||
const tmpPath = path.substring(1, path.length);
|
||||
activePath = "/" + tmpPath.substring(0, tmpPath.indexOf("/"));
|
||||
if (!this.$route.meta.link) {
|
||||
this.$store.dispatch('app/toggleSideBarHide', false);
|
||||
}
|
||||
} else if(!this.$route.children) {
|
||||
activePath = path;
|
||||
this.$store.dispatch('app/toggleSideBarHide', true);
|
||||
}
|
||||
this.activeRoutes(activePath);
|
||||
return activePath;
|
||||
},
|
||||
},
|
||||
beforeMount() {
|
||||
window.addEventListener('resize', this.setVisibleNumber)
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setVisibleNumber)
|
||||
},
|
||||
mounted() {
|
||||
this.setVisibleNumber();
|
||||
},
|
||||
methods: {
|
||||
// 根据宽度计算设置显示栏数
|
||||
setVisibleNumber() {
|
||||
const width = document.body.getBoundingClientRect().width / 3;
|
||||
this.visibleNumber = parseInt(width / 85);
|
||||
},
|
||||
// 菜单选择事件
|
||||
handleSelect(key, keyPath) {
|
||||
this.currentIndex = key;
|
||||
const route = this.routers.find(item => item.path === key);
|
||||
if (this.ishttp(key)) {
|
||||
// http(s):// 路径新窗口打开
|
||||
window.open(key, "_blank");
|
||||
} else if (!route || !route.children) {
|
||||
// 没有子路由路径内部打开
|
||||
const routeMenu = this.childrenMenus.find(item => item.path === key);
|
||||
if (routeMenu && routeMenu.query) {
|
||||
let query = JSON.parse(routeMenu.query);
|
||||
this.$router.push({ path: key, query: query });
|
||||
} else {
|
||||
this.$router.push({ path: key });
|
||||
}
|
||||
this.$store.dispatch('app/toggleSideBarHide', true);
|
||||
} else {
|
||||
// 显示左侧联动菜单
|
||||
this.activeRoutes(key);
|
||||
this.$store.dispatch('app/toggleSideBarHide', false);
|
||||
}
|
||||
},
|
||||
// 当前激活的路由
|
||||
activeRoutes(key) {
|
||||
var routes = [];
|
||||
if (this.childrenMenus && this.childrenMenus.length > 0) {
|
||||
this.childrenMenus.map((item) => {
|
||||
if (key == item.parentPath || (key == "index" && "" == item.path)) {
|
||||
routes.push(item);
|
||||
}
|
||||
});
|
||||
}
|
||||
if(routes.length > 0) {
|
||||
this.$store.commit("SET_SIDEBAR_ROUTERS", routes);
|
||||
} else {
|
||||
this.$store.dispatch('app/toggleSideBarHide', true);
|
||||
}
|
||||
},
|
||||
ishttp(url) {
|
||||
return url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.topmenu-container.el-menu--horizontal > .el-menu-item {
|
||||
float: left;
|
||||
height: 50px !important;
|
||||
line-height: 50px !important;
|
||||
color: #999093 !important;
|
||||
padding: 0 5px !important;
|
||||
margin: 0 10px !important;
|
||||
}
|
||||
|
||||
.topmenu-container.el-menu--horizontal > .el-menu-item.is-active, .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
|
||||
border-bottom: 2px solid #{'var(--theme)'} !important;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
/* submenu item */
|
||||
.topmenu-container.el-menu--horizontal > .el-submenu .el-submenu__title {
|
||||
float: left;
|
||||
height: 50px !important;
|
||||
line-height: 50px !important;
|
||||
color: #999093 !important;
|
||||
padding: 0 5px !important;
|
||||
margin: 0 10px !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,12 @@
|
||||
import inherits from "inherits";
|
||||
import Viewer from "bpmn-js/lib/Viewer";
|
||||
import ZoomScrollModule from "diagram-js/lib/navigation/zoomscroll";
|
||||
import MoveCanvasModule from "diagram-js/lib/navigation/movecanvas";
|
||||
function CustomViewer(options) {
|
||||
Viewer.call(this, options);
|
||||
}
|
||||
inherits(CustomViewer, Viewer);
|
||||
CustomViewer.prototype._modules = [].concat(Viewer.prototype._modules, [ZoomScrollModule, MoveCanvasModule]);
|
||||
export {
|
||||
CustomViewer
|
||||
};
|
||||
@@ -0,0 +1,139 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input
|
||||
v-model="queryParams.name"
|
||||
placeholder="请输入表达式名称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.sys_common_status"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-table v-loading="loading" :data="expressionList" row-key="id" @current-change="handleSingleExpSelect">
|
||||
<el-table-column width="55" align="center" >
|
||||
<template slot-scope="scope">
|
||||
<!-- 可以手动的修改label的值，从而控制选择哪一项 -->
|
||||
<el-radio v-model="radioSelected" :label="scope.row.id">{{''}}</el-radio>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="主键" align="center" prop="id" />
|
||||
<el-table-column label="名称" align="center" prop="name" />
|
||||
<el-table-column label="表达式内容" align="center" prop="expression" />
|
||||
<el-table-column label="备注" align="center" prop="remark" />
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page-sizes="[5,10]"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listExpression } from "@/api/system/expression";
|
||||
import {StrUtil} from "@/utils/StrUtil";
|
||||
|
||||
export default {
|
||||
name: "Expression",
|
||||
dicts: ['sys_common_status'],
|
||||
// 接受父组件的值
|
||||
props: {
|
||||
// 回显数据传值
|
||||
selectValues: {
|
||||
type: Number | String,
|
||||
default: null,
|
||||
required: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 流程达式表格数据
|
||||
expressionList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
name: null,
|
||||
expression: null,
|
||||
status: null,
|
||||
},
|
||||
radioSelected: null // 单选框传值
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
selectValues: {
|
||||
handler(newVal) {
|
||||
if (StrUtil.isNotBlank(newVal)) {
|
||||
this.radioSelected = newVal
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询流程达式列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listExpression(this.queryParams).then(response => {
|
||||
this.expressionList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
// 单选框选中数据
|
||||
handleSingleExpSelect(selection) {
|
||||
this.radioSelected = selection.id;//点击当前行时,radio同样有选中效果
|
||||
this.$emit('handleSingleExpSelect',selection);
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-row>
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input
|
||||
v-model="queryParams.name"
|
||||
placeholder="请输入名称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="监听类型" prop="type">
|
||||
<el-select v-model="queryParams.type" placeholder="请选择监听类型" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.sys_listener_type"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="listenerList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center"/>
|
||||
<el-table-column label="名称" align="center" prop="name"/>
|
||||
<el-table-column label="监听类型" align="center" prop="type">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.sys_listener_type" :value="scope.row.type"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="事件类型" align="center" prop="eventType"/>
|
||||
<el-table-column label="值类型" align="center" prop="valueType">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.sys_listener_value_type" :value="scope.row.valueType"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="执行内容" align="center" prop="value"/>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page-sizes="[5,10]"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listListener } from '@/api/system/listener'
|
||||
|
||||
export default {
|
||||
name: 'FlowListener',
|
||||
dicts: ['sys_listener_value_type', 'sys_listener_type', 'common_status', 'sys_listener_event_type'],
|
||||
props: {
|
||||
selectValues: {
|
||||
type: Number | String | Array,
|
||||
default: null,
|
||||
required: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
/** 遮罩层 */
|
||||
loading: true,
|
||||
/** 流程监听表格数据 */
|
||||
listenerList: [],
|
||||
/** 总条数 */
|
||||
total: 0,
|
||||
/** 查询参数 */
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 5,
|
||||
name: null,
|
||||
type: null,
|
||||
eventType: null,
|
||||
valueType: null,
|
||||
value: null,
|
||||
status: null
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询流程监听列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listListener(this.queryParams).then(response => {
|
||||
this.listenerList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm('queryForm')
|
||||
this.handleQuery()
|
||||
},
|
||||
/** 多选框选中数据 */
|
||||
handleSelectionChange(selection) {
|
||||
this.$emit('handleSelect', selection)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,189 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
|
||||
<el-form-item label="角色名称" prop="roleName">
|
||||
<el-input
|
||||
v-model="queryParams.roleName"
|
||||
placeholder="请输入角色名称"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-table v-show="checkType === 'multiple'" ref="dataTable" v-loading="loading" :data="roleList" @selection-change="handleMultipleRoleSelect">
|
||||
<el-table-column type="selection" width="50" align="center" />
|
||||
<el-table-column label="角色编号" prop="roleId" width="120" />
|
||||
<el-table-column label="角色名称" prop="roleName" :show-overflow-tooltip="true" width="150" />
|
||||
<el-table-column label="权限字符" prop="roleKey" :show-overflow-tooltip="true" width="150" />
|
||||
<el-table-column label="显示顺序" prop="roleSort" width="100" />
|
||||
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-table v-show="checkType === 'single'" v-loading="loading" :data="roleList" @current-change="handleSingleRoleSelect">
|
||||
<el-table-column width="55" align="center" >
|
||||
<template slot-scope="scope">
|
||||
<!-- 可以手动的修改label的值，从而控制选择哪一项 -->
|
||||
<el-radio v-model="radioSelected" :label="scope.row.roleId">{{''}}</el-radio>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="角色编号" prop="roleId" width="120" />
|
||||
<el-table-column label="角色名称" prop="roleName" :show-overflow-tooltip="true" width="150" />
|
||||
<el-table-column label="权限字符" prop="roleKey" :show-overflow-tooltip="true" width="150" />
|
||||
<el-table-column label="显示顺序" prop="roleSort" width="100" />
|
||||
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page-sizes="[5,10]"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listRole, getRole, delRole, addRole, updateRole, dataScope, changeRoleStatus, deptTreeSelect } from "@/api/system/role";
|
||||
import { treeselect as menuTreeselect, roleMenuTreeselect } from "@/api/system/menu";
|
||||
import {StrUtil} from "@/utils/StrUtil";
|
||||
|
||||
export default {
|
||||
name: "FlowRole",
|
||||
dicts: ['sys_normal_disable'],
|
||||
// 接受父组件的值
|
||||
props: {
|
||||
// 回显数据传值
|
||||
selectValues: {
|
||||
type: Number | String | Array,
|
||||
default: null,
|
||||
required: false
|
||||
},
|
||||
checkType: {
|
||||
type: String,
|
||||
default: 'multiple',
|
||||
required: false
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 角色表格数据
|
||||
roleList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 5,
|
||||
roleName: undefined,
|
||||
roleKey: undefined,
|
||||
status: undefined
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
radioSelected: null, // 单选框传值
|
||||
selectRoleList: [] // 回显数据传值
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
selectValues: {
|
||||
handler(newVal) {
|
||||
if (StrUtil.isNotBlank(newVal)) {
|
||||
if (newVal instanceof Number || newVal instanceof String) {
|
||||
this.radioSelected = newVal
|
||||
} else {
|
||||
this.selectRoleList = newVal;
|
||||
}
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
roleList: {
|
||||
handler(newVal) {
|
||||
if (StrUtil.isNotBlank(newVal) && this.selectRoleList.length > 0) {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.dataTable.clearSelection();
|
||||
this.selectRoleList?.split(',').forEach(key => {
|
||||
this.$refs.dataTable.toggleRowSelection(newVal.find(
|
||||
item => key == item.roleId
|
||||
), true)
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
immediate: true, // 立即生效
|
||||
deep: true //监听对象或数组的时候，要用到深度监听
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询角色列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listRole(this.queryParams).then(response => {
|
||||
this.roleList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
}
|
||||
);
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleMultipleRoleSelect(selection) {
|
||||
const idList = selection.map(item => item.roleId);
|
||||
const nameList = selection.map(item => item.roleName);
|
||||
this.$emit('handleRoleSelect', idList.join(','), nameList.join(','));
|
||||
},
|
||||
// 单选框选中数据
|
||||
handleSingleRoleSelect(selection) {
|
||||
this.radioSelected = selection.roleId;
|
||||
const roleName = selection.roleName;
|
||||
this.$emit('handleRoleSelect', this.radioSelected.toString(), roleName);
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.handleQuery();
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
/*隐藏radio展示的label及本身自带的样式*/
|
||||
/*.el-radio__label{*/
|
||||
/* display:none;*/
|
||||
/*}*/
|
||||
</style>
|
||||
@@ -0,0 +1,266 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-row :gutter="20">
|
||||
<!--部门数据-->
|
||||
<el-col :span="6" :xs="24">
|
||||
<div class="head-container">
|
||||
<el-input
|
||||
v-model="deptName"
|
||||
placeholder="请输入部门名称"
|
||||
clearable
|
||||
size="small"
|
||||
prefix-icon="el-icon-search"
|
||||
style="margin-bottom: 20px"
|
||||
/>
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<el-tree
|
||||
:data="deptOptions"
|
||||
:props="defaultProps"
|
||||
:expand-on-click-node="false"
|
||||
:filter-node-method="filterNode"
|
||||
ref="tree"
|
||||
node-key="id"
|
||||
default-expand-all
|
||||
highlight-current
|
||||
@node-click="handleNodeClick"
|
||||
/>
|
||||
</div>
|
||||
</el-col>
|
||||
<!--用户数据-->
|
||||
<el-col :span="18" :xs="24">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="用户名称" prop="userName">
|
||||
<el-input
|
||||
v-model="queryParams.userName"
|
||||
placeholder="请输入用户名称"
|
||||
clearable
|
||||
style="width: 150px"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号码" prop="phonenumber">
|
||||
<el-input
|
||||
v-model="queryParams.phonenumber"
|
||||
placeholder="请输入手机号码"
|
||||
clearable
|
||||
style="width: 150px"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table v-show="checkType === 'multiple'" ref="dataTable" v-loading="loading" :row-key="getRowKey" :data="userList" @selection-change="handleMultipleUserSelect">
|
||||
<el-table-column type="selection" :reserve-selection="true" width="50" align="center" />
|
||||
<el-table-column label="用户编号" align="center" key="userId" prop="userId" v-if="columns[0].visible" />
|
||||
<el-table-column label="登录账号" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="用户姓名" align="center" key="nickName" prop="nickName" v-if="columns[2].visible" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" v-if="columns[3].visible" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" v-if="columns[4].visible" width="120" />
|
||||
</el-table>
|
||||
<el-table v-show="checkType === 'single'" v-loading="loading" :data="userList" @current-change="handleSingleUserSelect">
|
||||
<el-table-column width="55" align="center" >
|
||||
<template slot-scope="scope">
|
||||
<el-radio v-model="radioSelected" :label="scope.row.userId">{{''}}</el-radio>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="用户编号" align="center" key="userId" prop="userId" v-if="columns[0].visible" />
|
||||
<el-table-column label="登录账号" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="用户姓名" align="center" key="nickName" prop="nickName" v-if="columns[2].visible" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" v-if="columns[3].visible" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" v-if="columns[4].visible" width="120" />
|
||||
</el-table>
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page-sizes="[5,10]"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listUser, deptTreeSelect } from "@/api/system/user";
|
||||
import Treeselect from "@riophae/vue-treeselect";
|
||||
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||||
import {StrUtil} from "@/utils/StrUtil";
|
||||
|
||||
export default {
|
||||
name: "FlowUser",
|
||||
dicts: ['sys_normal_disable', 'sys_user_sex'],
|
||||
components: { Treeselect },
|
||||
// 接受父组件的值
|
||||
props: {
|
||||
// 回显数据传值
|
||||
selectValues: {
|
||||
type: Number | String | Array,
|
||||
default: null,
|
||||
required: false
|
||||
},
|
||||
// 表格类型
|
||||
checkType: {
|
||||
type: String,
|
||||
default: 'multiple',
|
||||
required: true
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 用户表格数据
|
||||
userList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 部门树选项
|
||||
deptOptions: undefined,
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 部门名称
|
||||
deptName: undefined,
|
||||
// 表单参数
|
||||
form: {},
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label"
|
||||
},
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 5,
|
||||
userName: undefined,
|
||||
phonenumber: undefined,
|
||||
status: undefined,
|
||||
deptId: undefined
|
||||
},
|
||||
// 列信息
|
||||
columns: [
|
||||
{ key: 0, label: `用户编号`, visible: true },
|
||||
{ key: 1, label: `用户名称`, visible: true },
|
||||
{ key: 2, label: `用户昵称`, visible: true },
|
||||
{ key: 3, label: `部门`, visible: true },
|
||||
{ key: 4, label: `手机号码`, visible: true },
|
||||
{ key: 5, label: `状态`, visible: true },
|
||||
{ key: 6, label: `创建时间`, visible: true }
|
||||
],
|
||||
radioSelected: null, // 单选框传值
|
||||
selectUserList: [] // 回显数据传值
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
// 根据名称筛选部门树
|
||||
deptName(val) {
|
||||
this.$refs.tree.filter(val);
|
||||
},
|
||||
selectValues: {
|
||||
handler(newVal) {
|
||||
if (StrUtil.isNotBlank(newVal)) {
|
||||
if (newVal instanceof Number) {
|
||||
this.radioSelected = newVal
|
||||
} else {
|
||||
this.selectUserList = newVal;
|
||||
}
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
userList: {
|
||||
handler(newVal) {
|
||||
if (StrUtil.isNotBlank(newVal) && this.selectUserList.length > 0) {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.dataTable.clearSelection();
|
||||
this.selectUserList?.split(',').forEach(key => {
|
||||
this.$refs.dataTable.toggleRowSelection(newVal.find(
|
||||
item => key == item.userId
|
||||
), true)
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
immediate: true, // 立即生效
|
||||
deep: true //监听对象或数组的时候，要用到深度监听
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
this.getDeptTree();
|
||||
},
|
||||
methods: {
|
||||
/** 查询用户列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listUser(this.queryParams).then(response => {
|
||||
this.userList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
}
|
||||
);
|
||||
},
|
||||
/** 查询部门下拉树结构 */
|
||||
getDeptTree() {
|
||||
deptTreeSelect().then(response => {
|
||||
this.deptOptions = response.data;
|
||||
});
|
||||
},
|
||||
// 保存选中的数据id,row-key就是要指定一个key标识这一行的数据
|
||||
getRowKey (row) {
|
||||
return row.id
|
||||
},
|
||||
// 筛选节点
|
||||
filterNode(value, data) {
|
||||
if (!value) return true;
|
||||
return data.label.indexOf(value) !== -1;
|
||||
},
|
||||
// 节点单击事件
|
||||
handleNodeClick(data) {
|
||||
this.queryParams.deptId = data.id;
|
||||
this.handleQuery();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleMultipleUserSelect(selection) {
|
||||
this.$emit('handleUserSelect', selection);
|
||||
},
|
||||
// 单选框选中数据
|
||||
handleSingleUserSelect(selection) {
|
||||
this.radioSelected = selection.userId;//点击当前行时,radio同样有选中效果
|
||||
this.$emit('handleUserSelect', selection);
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.dateRange = [];
|
||||
this.resetForm("queryForm");
|
||||
this.queryParams.deptId = undefined;
|
||||
this.$refs.tree.setCurrentKey(null);
|
||||
this.handleQuery();
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
/*隐藏radio展示的label及本身自带的样式*/
|
||||
/*.el-radio__label{*/
|
||||
/* display:none;*/
|
||||
/*}*/
|
||||
</style>
|
||||
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<div v-loading="loading" :style="'height:' + height">
|
||||
<iframe
|
||||
:src="src"
|
||||
frameborder="no"
|
||||
style="width: 100%; height: 100%"
|
||||
scrolling="auto"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
src: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
height: document.documentElement.clientHeight - 94.5 + "px;",
|
||||
loading: true,
|
||||
url: this.src
|
||||
};
|
||||
},
|
||||
mounted: function () {
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
}, 300);
|
||||
const that = this;
|
||||
window.onresize = function temp() {
|
||||
that.height = document.documentElement.clientHeight - 94.5 + "px;";
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,257 @@
|
||||
<script>
|
||||
import { deepClone } from '../../utils/index'
|
||||
import render from '../render/render.js'
|
||||
|
||||
const ruleTrigger = {
|
||||
'el-input': 'blur',
|
||||
'el-input-number': 'blur',
|
||||
'el-select': 'change',
|
||||
'el-radio-group': 'change',
|
||||
'el-checkbox-group': 'change',
|
||||
'el-cascader': 'change',
|
||||
'el-time-picker': 'change',
|
||||
'el-date-picker': 'change',
|
||||
'el-rate': 'change'
|
||||
}
|
||||
|
||||
const layouts = {
|
||||
colFormItem(h, scheme) {
|
||||
const config = scheme.__config__
|
||||
const listeners = buildListeners.call(this, scheme)
|
||||
|
||||
let labelWidth = config.labelWidth ? `${config.labelWidth}px` : null
|
||||
if (config.showLabel === false) labelWidth = '0'
|
||||
return (
|
||||
<el-col span={config.span}>
|
||||
<el-form-item label-width={labelWidth} prop={scheme.__vModel__}
|
||||
label={config.showLabel ? config.label : ''}>
|
||||
<render conf={scheme} on={listeners} />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
)
|
||||
},
|
||||
rowFormItem(h, scheme) {
|
||||
let child = renderChildren.apply(this, arguments)
|
||||
if (scheme.type === 'flex') {
|
||||
child = <el-row type={scheme.type} justify={scheme.justify} align={scheme.align}>
|
||||
{child}
|
||||
</el-row>
|
||||
}
|
||||
return (
|
||||
<el-col span={scheme.span}>
|
||||
<el-row gutter={scheme.gutter}>
|
||||
{child}
|
||||
</el-row>
|
||||
</el-col>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
function renderFrom(h) {
|
||||
const { formConfCopy } = this
|
||||
|
||||
return (
|
||||
<el-row gutter={formConfCopy.gutter}>
|
||||
<el-form
|
||||
size={formConfCopy.size}
|
||||
label-position={formConfCopy.labelPosition}
|
||||
disabled={formConfCopy.disabled}
|
||||
label-width={`${formConfCopy.labelWidth}px`}
|
||||
ref={formConfCopy.formRef}
|
||||
// model不能直接赋值 https://github.com/vuejs/jsx/issues/49#issuecomment-472013664
|
||||
props={{ model: this[formConfCopy.formModel] }}
|
||||
rules={this[formConfCopy.formRules]}
|
||||
>
|
||||
{renderFormItem.call(this, h, formConfCopy.fields)}
|
||||
{formConfCopy.formBtns && formBtns.call(this, h)}
|
||||
</el-form>
|
||||
</el-row>
|
||||
)
|
||||
}
|
||||
|
||||
function formBtns(h) {
|
||||
return <el-col>
|
||||
<el-form-item size="large">
|
||||
<el-button type="primary" onClick={this.submitForm}>提交</el-button>
|
||||
<el-button onClick={this.resetForm}>重置</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
}
|
||||
|
||||
function renderFormItem(h, elementList) {
|
||||
if (elementList) {
|
||||
return elementList.map(scheme => {
|
||||
const config = scheme.__config__
|
||||
const layout = layouts[config.layout]
|
||||
|
||||
if (layout) {
|
||||
return layout.call(this, h, scheme)
|
||||
}
|
||||
throw new Error(`没有与${config.layout}匹配的layout`)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function renderChildren(h, scheme) {
|
||||
const config = scheme.__config__
|
||||
if (!Array.isArray(config.children)) return null
|
||||
return renderFormItem.call(this, h, config.children)
|
||||
}
|
||||
|
||||
function setValue(event, config, scheme) {
|
||||
this.$set(config, 'defaultValue', event)
|
||||
this.$set(this[this.formConf.formModel], scheme.__vModel__, event)
|
||||
}
|
||||
|
||||
function buildListeners(scheme) {
|
||||
const config = scheme.__config__;
|
||||
const methods = this.formConf.__methods__ || {};
|
||||
const listeners = {};
|
||||
|
||||
// 给__methods__中的方法绑定this和event
|
||||
Object.keys(methods).forEach((key) => {
|
||||
listeners[key] = (event) => methods[key].call(this, event);
|
||||
});
|
||||
|
||||
// 响应 render.js 中的 vModel $emit('input', val)
|
||||
listeners.input = (event) => setValue.call(this, event, config, scheme);
|
||||
|
||||
// 上传表单元素组件的成功、移除和预览事件
|
||||
if (config.tag === "el-upload") {
|
||||
listeners.upload = (response, file, fileList) =>
|
||||
setUpload.call(this, config, scheme, response, file, fileList);
|
||||
|
||||
listeners.deleteUpload = (file, fileList) =>
|
||||
deleteUpload.call(this, config, scheme, file, fileList);
|
||||
|
||||
listeners.previewUpload = (file, fileList) =>
|
||||
window.open(file.url, "_blank");
|
||||
}
|
||||
|
||||
return listeners;
|
||||
}
|
||||
|
||||
//获取上传表单元素组件 上传的文件
|
||||
function setUpload(config, scheme, response, file, fileList) {
|
||||
//response: 上传接口返回的数据
|
||||
let fileObj = {
|
||||
name: response.fileName,
|
||||
url: response.url,
|
||||
fileType: response.contentType,
|
||||
};
|
||||
let oldValue = "";
|
||||
try {
|
||||
oldValue = JSON.parse(this[this.formConf.formModel][scheme.__vModel__]);
|
||||
} catch (err) {
|
||||
console.warn(err);
|
||||
}
|
||||
|
||||
if (oldValue) {
|
||||
oldValue.push(fileObj);
|
||||
} else {
|
||||
oldValue = [fileObj];
|
||||
}
|
||||
|
||||
this.$set(config, "defaultValue", JSON.stringify(oldValue));
|
||||
this.$set(
|
||||
this[this.formConf.formModel],
|
||||
scheme.__vModel__,
|
||||
JSON.stringify(oldValue)
|
||||
);
|
||||
}
|
||||
|
||||
//获取上传表单元素组件 删除文件后的文件列表
|
||||
function deleteUpload(config, scheme, file, fileList) {
|
||||
let oldValue = JSON.parse(this[this.formConf.formModel][scheme.__vModel__]);
|
||||
|
||||
//file 删除的文件
|
||||
//过滤掉删除的文件
|
||||
let newValue = oldValue.filter((item) => item.name !== file.name);
|
||||
this.$set(config, "defaultValue", JSON.stringify(newValue));
|
||||
this.$set(
|
||||
this[this.formConf.formModel],
|
||||
scheme.__vModel__,
|
||||
JSON.stringify(newValue)
|
||||
);
|
||||
}
|
||||
|
||||
export default {
|
||||
components: {
|
||||
render
|
||||
},
|
||||
props: {
|
||||
formConf: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
const data = {
|
||||
formConfCopy: deepClone(this.formConf),
|
||||
[this.formConf.formModel]: {},
|
||||
[this.formConf.formRules]: {}
|
||||
}
|
||||
if (data.formConfCopy.fields) {
|
||||
this.initFormData(data.formConfCopy.fields, data[this.formConf.formModel])
|
||||
this.buildRules(data.formConfCopy.fields, data[this.formConf.formRules])
|
||||
}
|
||||
return data
|
||||
},
|
||||
methods: {
|
||||
initFormData(componentList, formData) {
|
||||
componentList.forEach(cur => {
|
||||
const config = cur.__config__
|
||||
if (cur.__vModel__) formData[cur.__vModel__] = config.defaultValue
|
||||
if (config.children) this.initFormData(config.children, formData)
|
||||
})
|
||||
},
|
||||
buildRules(componentList, rules) {
|
||||
componentList.forEach(cur => {
|
||||
const config = cur.__config__
|
||||
if (Array.isArray(config.regList)) {
|
||||
if (config.required) {
|
||||
const required = { required: config.required, message: cur.placeholder }
|
||||
if (Array.isArray(config.defaultValue)) {
|
||||
required.type = 'array'
|
||||
required.message = `请至少选择一个${config.label}`
|
||||
}
|
||||
required.message === undefined && (required.message = `${config.label}不能为空`)
|
||||
config.regList.push(required)
|
||||
}
|
||||
rules[cur.__vModel__] = config.regList.map(item => {
|
||||
item.pattern && (item.pattern = eval(item.pattern))
|
||||
item.trigger = ruleTrigger && ruleTrigger[config.tag]
|
||||
return item
|
||||
})
|
||||
}
|
||||
if (config.children) this.buildRules(config.children, rules)
|
||||
})
|
||||
},
|
||||
resetForm() {
|
||||
this.formConfCopy = deepClone(this.formConf)
|
||||
this.$refs[this.formConf.formRef].resetFields()
|
||||
},
|
||||
submitForm() {
|
||||
this.$refs[this.formConf.formRef].validate(valid => {
|
||||
if (!valid) return false
|
||||
// 触发sumit事件
|
||||
// this.$emit('submit', this[this.formConf.formModel])
|
||||
const params = {
|
||||
formData: this.formConfCopy,
|
||||
valData: this[this.formConf.formModel]
|
||||
}
|
||||
this.$emit('submit', params)
|
||||
return true
|
||||
})
|
||||
},
|
||||
// 传值给父组件
|
||||
getData(){
|
||||
this.$emit('getData', this[this.formConf.formModel])
|
||||
// this.$emit('getData',this.formConfCopy)
|
||||
}
|
||||
},
|
||||
render(h) {
|
||||
return renderFrom.call(this, h)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,17 @@
|
||||
## form-generator JSON 解析器
|
||||
>用于将form-generator导出的JSON解析成一个表单。
|
||||
|
||||
### 安装组件
|
||||
```
|
||||
npm i form-gen-parser
|
||||
```
|
||||
或者
|
||||
```
|
||||
yarn add form-gen-parser
|
||||
```
|
||||
|
||||
### 使用示例
|
||||
> [查看在线示例](https://mrhj.gitee.io/form-generator/#/parser)
|
||||
|
||||
示例代码:
|
||||
> [src\components\parser\example\Index.vue](https://github.com/JakHuang/form-generator/blob/dev/src/components/parser/example/Index.vue)
|
||||
@@ -0,0 +1,324 @@
|
||||
<template>
|
||||
<div class="test-form">
|
||||
<parser :form-conf="formConf" @submit="sumbitForm1" />
|
||||
<parser :key="key2" :form-conf="formConf" @submit="sumbitForm2" />
|
||||
<el-button @click="change">
|
||||
change
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Parser from '../Parser'
|
||||
|
||||
// 若parser是通过安装npm方式集成到项目中的，使用此行引入
|
||||
// import Parser from 'form-gen-parser'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Parser
|
||||
},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
key2: +new Date(),
|
||||
formConf: {
|
||||
fields: [
|
||||
{
|
||||
__config__: {
|
||||
label: '单行文本',
|
||||
labelWidth: null,
|
||||
showLabel: true,
|
||||
changeTag: true,
|
||||
tag: 'el-input',
|
||||
tagIcon: 'input',
|
||||
required: true,
|
||||
layout: 'colFormItem',
|
||||
span: 24,
|
||||
document: 'https://element.eleme.cn/#/zh-CN/component/input',
|
||||
regList: [
|
||||
{
|
||||
pattern: '/^1(3|4|5|7|8|9)\\d{9}$/',
|
||||
message: '手机号格式错误'
|
||||
}
|
||||
]
|
||||
},
|
||||
__slot__: {
|
||||
prepend: '',
|
||||
append: ''
|
||||
},
|
||||
__vModel__: 'mobile',
|
||||
placeholder: '请输入手机号',
|
||||
style: {
|
||||
width: '100%'
|
||||
},
|
||||
clearable: true,
|
||||
'prefix-icon': 'el-icon-mobile',
|
||||
'suffix-icon': '',
|
||||
maxlength: 11,
|
||||
'show-word-limit': true,
|
||||
readonly: false,
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
__config__: {
|
||||
label: '日期范围',
|
||||
tag: 'el-date-picker',
|
||||
tagIcon: 'date-range',
|
||||
defaultValue: null,
|
||||
span: 24,
|
||||
showLabel: true,
|
||||
labelWidth: null,
|
||||
required: true,
|
||||
layout: 'colFormItem',
|
||||
regList: [],
|
||||
changeTag: true,
|
||||
document:
|
||||
'https://element.eleme.cn/#/zh-CN/component/date-picker',
|
||||
formId: 101,
|
||||
renderKey: 1585980082729
|
||||
},
|
||||
style: {
|
||||
width: '100%'
|
||||
},
|
||||
type: 'daterange',
|
||||
'range-separator': '至',
|
||||
'start-placeholder': '开始日期',
|
||||
'end-placeholder': '结束日期',
|
||||
disabled: false,
|
||||
clearable: true,
|
||||
format: 'yyyy-MM-dd',
|
||||
'value-format': 'yyyy-MM-dd',
|
||||
readonly: false,
|
||||
__vModel__: 'field101'
|
||||
},
|
||||
{
|
||||
__config__: {
|
||||
layout: 'rowFormItem',
|
||||
tagIcon: 'row',
|
||||
label: '行容器',
|
||||
layoutTree: true,
|
||||
children: [
|
||||
{
|
||||
__config__: {
|
||||
label: '评分',
|
||||
tag: 'el-rate',
|
||||
tagIcon: 'rate',
|
||||
defaultValue: 0,
|
||||
span: 24,
|
||||
showLabel: true,
|
||||
labelWidth: null,
|
||||
layout: 'colFormItem',
|
||||
required: true,
|
||||
regList: [],
|
||||
changeTag: true,
|
||||
document: 'https://element.eleme.cn/#/zh-CN/component/rate',
|
||||
formId: 102,
|
||||
renderKey: 1586839671259
|
||||
},
|
||||
style: {},
|
||||
max: 5,
|
||||
'allow-half': false,
|
||||
'show-text': false,
|
||||
'show-score': false,
|
||||
disabled: false,
|
||||
__vModel__: 'field102'
|
||||
}
|
||||
],
|
||||
document: 'https://element.eleme.cn/#/zh-CN/component/layout',
|
||||
formId: 101,
|
||||
span: 24,
|
||||
renderKey: 1586839668999,
|
||||
componentName: 'row101',
|
||||
gutter: 15
|
||||
},
|
||||
type: 'default',
|
||||
justify: 'start',
|
||||
align: 'top'
|
||||
},
|
||||
{
|
||||
__config__: {
|
||||
label: '按钮',
|
||||
showLabel: true,
|
||||
changeTag: true,
|
||||
labelWidth: null,
|
||||
tag: 'el-button',
|
||||
tagIcon: 'button',
|
||||
span: 24,
|
||||
layout: 'colFormItem',
|
||||
document: 'https://element.eleme.cn/#/zh-CN/component/button',
|
||||
renderKey: 1594288459289
|
||||
},
|
||||
__slot__: {
|
||||
default: '测试按钮1'
|
||||
},
|
||||
type: 'primary',
|
||||
icon: 'el-icon-search',
|
||||
round: false,
|
||||
size: 'medium',
|
||||
plain: false,
|
||||
circle: false,
|
||||
disabled: false,
|
||||
on: {
|
||||
click: 'clickTestButton1'
|
||||
}
|
||||
}
|
||||
],
|
||||
__methods__: {
|
||||
clickTestButton1() {
|
||||
console.log(
|
||||
`%c【测试按钮1】点击事件里可以访问当前表单：
|
||||
1) formModel='formData', 所以this.formData可以拿到当前表单的model
|
||||
2) formRef='elForm', 所以this.$refs.elForm可以拿到当前表单的ref(vue组件)
|
||||
`,
|
||||
'color:#409EFF;font-size: 15px'
|
||||
)
|
||||
console.log('表单的Model：', this.formData)
|
||||
console.log('表单的ref：', this.$refs.elForm)
|
||||
}
|
||||
},
|
||||
formRef: 'elForm',
|
||||
formModel: 'formData',
|
||||
size: 'small',
|
||||
labelPosition: 'right',
|
||||
labelWidth: 100,
|
||||
formRules: 'rules',
|
||||
gutter: 15,
|
||||
disabled: false,
|
||||
span: 24,
|
||||
formBtns: true,
|
||||
unFocusedComponentBorder: false
|
||||
},
|
||||
formConf2: {
|
||||
fields: [
|
||||
{
|
||||
__config__: {
|
||||
label: '单行文本',
|
||||
labelWidth: null,
|
||||
showLabel: true,
|
||||
changeTag: true,
|
||||
tag: 'el-input',
|
||||
tagIcon: 'input',
|
||||
required: true,
|
||||
layout: 'colFormItem',
|
||||
span: 24,
|
||||
document: 'https://element.eleme.cn/#/zh-CN/component/input',
|
||||
regList: [
|
||||
{
|
||||
pattern: '/^1(3|4|5|7|8|9)\\d{9}$/',
|
||||
message: '手机号格式错误'
|
||||
}
|
||||
]
|
||||
},
|
||||
__slot__: {
|
||||
prepend: '',
|
||||
append: ''
|
||||
},
|
||||
__vModel__: 'mobile',
|
||||
placeholder: '请输入手机号',
|
||||
style: {
|
||||
width: '100%'
|
||||
},
|
||||
clearable: true,
|
||||
'prefix-icon': 'el-icon-mobile',
|
||||
'suffix-icon': '',
|
||||
maxlength: 11,
|
||||
'show-word-limit': true,
|
||||
readonly: false,
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
__config__: {
|
||||
label: '日期范围',
|
||||
tag: 'el-date-picker',
|
||||
tagIcon: 'date-range',
|
||||
defaultValue: null,
|
||||
span: 24,
|
||||
showLabel: true,
|
||||
labelWidth: null,
|
||||
required: true,
|
||||
layout: 'colFormItem',
|
||||
regList: [],
|
||||
changeTag: true,
|
||||
document:
|
||||
'https://element.eleme.cn/#/zh-CN/component/date-picker',
|
||||
formId: 101,
|
||||
renderKey: 1585980082729
|
||||
},
|
||||
style: {
|
||||
width: '100%'
|
||||
},
|
||||
type: 'daterange',
|
||||
'range-separator': '至',
|
||||
'start-placeholder': '开始日期',
|
||||
'end-placeholder': '结束日期',
|
||||
disabled: false,
|
||||
clearable: true,
|
||||
format: 'yyyy-MM-dd',
|
||||
'value-format': 'yyyy-MM-dd',
|
||||
readonly: false,
|
||||
__vModel__: 'field101'
|
||||
}
|
||||
],
|
||||
formRef: 'elForm',
|
||||
formModel: 'formData',
|
||||
size: 'small',
|
||||
labelPosition: 'right',
|
||||
labelWidth: 100,
|
||||
formRules: 'rules',
|
||||
gutter: 15,
|
||||
disabled: false,
|
||||
span: 24,
|
||||
formBtns: true,
|
||||
unFocusedComponentBorder: false
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
created() {},
|
||||
mounted() {
|
||||
// 表单数据回填，模拟异步请求场景
|
||||
setTimeout(() => {
|
||||
// 请求回来的表单数据
|
||||
const data = {
|
||||
mobile: '18836662555'
|
||||
}
|
||||
// 回填数据
|
||||
this.fillFormData(this.formConf, data)
|
||||
// 更新表单
|
||||
this.key2 = +new Date()
|
||||
}, 2000)
|
||||
},
|
||||
methods: {
|
||||
fillFormData(form, data) {
|
||||
form.fields.forEach(item => {
|
||||
const val = data[item.__vModel__]
|
||||
if (val) {
|
||||
item.__config__.defaultValue = val
|
||||
}
|
||||
})
|
||||
},
|
||||
change() {
|
||||
this.key2 = +new Date()
|
||||
const t = this.formConf
|
||||
this.formConf = this.formConf2
|
||||
this.formConf2 = t
|
||||
},
|
||||
sumbitForm1(data) {
|
||||
console.log('sumbitForm1提交数据：', data)
|
||||
},
|
||||
sumbitForm2(data) {
|
||||
console.log('sumbitForm2提交数据：', data)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.test-form {
|
||||
margin: 15px auto;
|
||||
width: 800px;
|
||||
padding: 15px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,3 @@
|
||||
import Parser from './Parser'
|
||||
|
||||
export default Parser
|
||||
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"name": "form-gen-parser",
|
||||
"version": "1.0.3",
|
||||
"description": "表单json解析器",
|
||||
"main": "lib/form-gen-parser.umd.js",
|
||||
"directories": {
|
||||
"example": "example"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/JakHuang/form-generator.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"form-gen-render": "^1.0.0"
|
||||
},
|
||||
"author": "jakHuang",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/JakHuang/form-generator/issues"
|
||||
},
|
||||
"homepage": "https://github.com/JakHuang/form-generator/blob/dev/src/components/parser"
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"name": "form-gen-render",
|
||||
"version": "1.0.4",
|
||||
"description": "表单核心render",
|
||||
"main": "lib/form-gen-render.umd.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/JakHuang/form-generator.git"
|
||||
},
|
||||
"author": "jakhuang",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/JakHuang/form-generator/issues"
|
||||
},
|
||||
"homepage": "https://github.com/JakHuang/form-generator#readme"
|
||||
}
|
||||
@@ -0,0 +1,147 @@
|
||||
import { deepClone } from '@/utils/index'
|
||||
|
||||
const componentChild = {}
|
||||
/**
|
||||
* 将./slots中的文件挂载到对象componentChild上
|
||||
* 文件名为key，对应JSON配置中的__config__.tag
|
||||
* 文件内容为value，解析JSON配置中的__slot__
|
||||
*/
|
||||
const slotsFiles = require.context('./slots', false, /\.js$/)
|
||||
const keys = slotsFiles.keys() || []
|
||||
keys.forEach(key => {
|
||||
const tag = key.replace(/^\.\/(.*)\.\w+$/, '$1')
|
||||
const value = slotsFiles(key).default
|
||||
componentChild[tag] = value
|
||||
})
|
||||
|
||||
function vModel(dataObject, defaultValue, config) {
|
||||
// 获取上传表单元素组件上传的文件
|
||||
if (config.tag === "el-upload") {
|
||||
// 上传表单元素组件的成功和移除事件
|
||||
dataObject.attrs["on-success"] = (response, file, fileList) => {
|
||||
this.$emit("upload", response, file, fileList);
|
||||
};
|
||||
|
||||
dataObject.attrs["on-remove"] = (file, fileList) => {
|
||||
this.$emit("deleteUpload", file, fileList);
|
||||
};
|
||||
|
||||
dataObject.attrs["on-preview"] = (file, fileList) => {
|
||||
this.$emit("previewUpload", file, fileList);
|
||||
};
|
||||
|
||||
// 获取上传表单元素的默认值
|
||||
try {
|
||||
dataObject.props["file-list"] = JSON.parse(defaultValue);
|
||||
} catch (err) {
|
||||
console.warn(err);
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// 获取普通表单元素的值
|
||||
dataObject.props.value = defaultValue;
|
||||
dataObject.on.input = (val) => {
|
||||
this.$emit("input", val);
|
||||
};
|
||||
}
|
||||
|
||||
function mountSlotFiles(h, confClone, children) {
|
||||
const childObjs = componentChild[confClone.__config__.tag]
|
||||
if (childObjs) {
|
||||
Object.keys(childObjs).forEach(key => {
|
||||
const childFunc = childObjs[key]
|
||||
if (confClone.__slot__ && confClone.__slot__[key]) {
|
||||
children.push(childFunc(h, confClone, key))
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function emitEvents(confClone) {
|
||||
['on', 'nativeOn'].forEach(attr => {
|
||||
const eventKeyList = Object.keys(confClone[attr] || {})
|
||||
eventKeyList.forEach(key => {
|
||||
const val = confClone[attr][key]
|
||||
if (typeof val === 'string') {
|
||||
confClone[attr][key] = event => this.$emit(val, event)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
function buildDataObject(confClone, dataObject) {
|
||||
Object.keys(confClone).forEach(key => {
|
||||
const val = confClone[key]
|
||||
if (key === '__vModel__') {
|
||||
vModel.call(this, dataObject, confClone.__config__.defaultValue, confClone.__config__)
|
||||
} else if (dataObject[key] !== undefined) {
|
||||
if (dataObject[key] === null
|
||||
|| dataObject[key] instanceof RegExp
|
||||
|| ['boolean', 'string', 'number', 'function'].includes(typeof dataObject[key])) {
|
||||
dataObject[key] = val
|
||||
} else if (Array.isArray(dataObject[key])) {
|
||||
dataObject[key] = [...dataObject[key], ...val]
|
||||
} else {
|
||||
dataObject[key] = { ...dataObject[key], ...val }
|
||||
}
|
||||
} else {
|
||||
dataObject.attrs[key] = val
|
||||
}
|
||||
})
|
||||
|
||||
// 清理属性
|
||||
clearAttrs(dataObject)
|
||||
}
|
||||
|
||||
function clearAttrs(dataObject) {
|
||||
delete dataObject.attrs.__config__
|
||||
delete dataObject.attrs.__slot__
|
||||
delete dataObject.attrs.__methods__
|
||||
}
|
||||
|
||||
function makeDataObject() {
|
||||
// 深入数据对象：
|
||||
// https://cn.vuejs.org/v2/guide/render-function.html#%E6%B7%B1%E5%85%A5%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1
|
||||
return {
|
||||
class: {},
|
||||
attrs: {},
|
||||
props: {},
|
||||
domProps: {},
|
||||
nativeOn: {},
|
||||
on: {},
|
||||
style: {},
|
||||
directives: [],
|
||||
scopedSlots: {},
|
||||
slot: null,
|
||||
key: null,
|
||||
ref: null,
|
||||
refInFor: true
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
props: {
|
||||
conf: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
render(h) {
|
||||
const dataObject = makeDataObject()
|
||||
const confClone = deepClone(this.conf)
|
||||
const children = this.$slots.default || []
|
||||
|
||||
// 如果slots文件夹存在与当前tag同名的文件，则执行文件中的代码
|
||||
mountSlotFiles.call(this, h, confClone, children)
|
||||
|
||||
// 将字符串类型的事件，发送为消息
|
||||
emitEvents.call(this, confClone)
|
||||
|
||||
// 将json表单配置转化为vue render可以识别的 “数据对象（dataObject）”
|
||||
buildDataObject.call(this, confClone, dataObject)
|
||||
|
||||
return h(this.conf.__config__.tag, dataObject, children)
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
export default {
|
||||
default(h, conf, key) {
|
||||
return conf.__slot__[key]
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
export default {
|
||||
options(h, conf, key) {
|
||||
const list = []
|
||||
conf.__slot__.options.forEach(item => {
|
||||
if (conf.__config__.optionType === 'button') {
|
||||
list.push(<el-checkbox-button label={item.value}>{item.label}</el-checkbox-button>)
|
||||
} else {
|
||||
list.push(<el-checkbox label={item.value} border={conf.border}>{item.label}</el-checkbox>)
|
||||
}
|
||||
})
|
||||
return list
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
export default {
|
||||
prepend(h, conf, key) {
|
||||
return <template slot="prepend">{conf.__slot__[key]}</template>
|
||||
},
|
||||
append(h, conf, key) {
|
||||
return <template slot="append">{conf.__slot__[key]}</template>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
export default {
|
||||
options(h, conf, key) {
|
||||
const list = []
|
||||
conf.__slot__.options.forEach(item => {
|
||||
if (conf.__config__.optionType === 'button') {
|
||||
list.push(<el-radio-button label={item.value}>{item.label}</el-radio-button>)
|
||||
} else {
|
||||
list.push(<el-radio label={item.value} border={conf.border}>{item.label}</el-radio>)
|
||||
}
|
||||
})
|
||||
return list
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
export default {
|
||||
options(h, conf, key) {
|
||||
const list = []
|
||||
conf.__slot__.options.forEach(item => {
|
||||
list.push(<el-option label={item.label} value={item.value} disabled={item.disabled}></el-option>)
|
||||
})
|
||||
return list
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
export default {
|
||||
'list-type': (h, conf, key) => {
|
||||
const list = []
|
||||
const config = conf.__config__
|
||||
if (conf['list-type'] === 'picture-card') {
|
||||
list.push(<i class="el-icon-plus"></i>)
|
||||
} else {
|
||||
list.push(<el-button size="small" type="primary" icon="el-icon-upload">{config.buttonText}</el-button>)
|
||||
}
|
||||
if (config.showTip) {
|
||||
list.push(
|
||||
<div slot="tip" class="el-upload__tip">只能上传不超过 {config.fileSize}{config.sizeUnit} 的{conf.accept}文件</div>
|
||||
)
|
||||
}
|
||||
return list
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
## 简介
|
||||
富文本编辑器tinymce的一个vue版本封装。使用cdn动态脚本引入的方式加载。
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
/* eslint-disable max-len */
|
||||
|
||||
export const plugins = [
|
||||
'advlist anchor autolink autosave code codesample directionality emoticons fullscreen hr image imagetools insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textpattern visualblocks visualchars wordcount'
|
||||
]
|
||||
export const toolbar = [
|
||||
'code searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent blockquote removeformat subscript superscript codesample hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen'
|
||||
]
|
||||
@@ -0,0 +1,3 @@
|
||||
import Index from './index.vue'
|
||||
|
||||
export default Index
|
||||
@@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<textarea :id="tinymceId" style="visibility: hidden" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import loadTinymce from '@/utils/loadTinymce'
|
||||
import { plugins, toolbar } from './config'
|
||||
import { debounce } from 'throttle-debounce'
|
||||
|
||||
let num = 1
|
||||
|
||||
export default {
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: () => {
|
||||
num === 10000 && (num = 1)
|
||||
return `tinymce${+new Date()}${num++}`
|
||||
}
|
||||
},
|
||||
value: {
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tinymceId: this.id
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
loadTinymce(tinymce => {
|
||||
// eslint-disable-next-line global-require
|
||||
require('./zh_CN')
|
||||
let conf = {
|
||||
selector: `#${this.tinymceId}`,
|
||||
language: 'zh_CN',
|
||||
menubar: 'file edit insert view format table',
|
||||
plugins,
|
||||
toolbar,
|
||||
height: 300,
|
||||
branding: false,
|
||||
object_resizing: false,
|
||||
end_container_on_empty_block: true,
|
||||
powerpaste_word_import: 'clean',
|
||||
code_dialog_height: 450,
|
||||
code_dialog_width: 1000,
|
||||
advlist_bullet_styles: 'square',
|
||||
advlist_number_styles: 'default',
|
||||
default_link_target: '_blank',
|
||||
link_title: false,
|
||||
nonbreaking_force_tab: true
|
||||
}
|
||||
conf = Object.assign(conf, this.$attrs)
|
||||
conf.init_instance_callback = editor => {
|
||||
if (this.value) editor.setContent(this.value)
|
||||
this.vModel(editor)
|
||||
}
|
||||
tinymce.init(conf)
|
||||
})
|
||||
},
|
||||
destroyed() {
|
||||
this.destroyTinymce()
|
||||
},
|
||||
methods: {
|
||||
vModel(editor) {
|
||||
// 控制连续写入时setContent的触发频率
|
||||
const debounceSetContent = debounce(250, editor.setContent)
|
||||
this.$watch('value', (val, prevVal) => {
|
||||
if (editor && val !== prevVal && val !== editor.getContent()) {
|
||||
if (typeof val !== 'string') val = val.toString()
|
||||
debounceSetContent.call(editor, val)
|
||||
}
|
||||
})
|
||||
|
||||
editor.on('change keyup undo redo', () => {
|
||||
this.$emit('input', editor.getContent())
|
||||
})
|
||||
},
|
||||
destroyTinymce() {
|
||||
if (!window.tinymce) return
|
||||
const tinymce = window.tinymce.get(this.tinymceId)
|
||||
if (tinymce) {
|
||||
tinymce.destroy()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"name": "form-gen-tinymce",
|
||||
"version": "1.0.0",
|
||||
"description": "富文本编辑器tinymce的一个vue版本封装。使用cdn动态脚本引入的方式加载。",
|
||||
"main": "lib/form-gen-tinymce.umd.js",
|
||||
"directories": {
|
||||
"example": "example"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/JakHuang/form-generator.git"
|
||||
},
|
||||
"keywords": [
|
||||
"tinymce-vue"
|
||||
],
|
||||
"dependencies": {
|
||||
"throttle-debounce": "^2.1.0"
|
||||
},
|
||||
"author": "jakHuang",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/JakHuang/form-generator/issues"
|
||||
},
|
||||
"homepage": "https://github.com/JakHuang/form-generator/blob/dev/src/components/tinymce"
|
||||
}
|
||||
@@ -0,0 +1,420 @@
|
||||
/* eslint-disable */
|
||||
tinymce.addI18n('zh_CN',{
|
||||
"Redo": "\u91cd\u505a",
|
||||
"Undo": "\u64a4\u9500",
|
||||
"Cut": "\u526a\u5207",
|
||||
"Copy": "\u590d\u5236",
|
||||
"Paste": "\u7c98\u8d34",
|
||||
"Select all": "\u5168\u9009",
|
||||
"New document": "\u65b0\u6587\u4ef6",
|
||||
"Ok": "\u786e\u5b9a",
|
||||
"Cancel": "\u53d6\u6d88",
|
||||
"Visual aids": "\u7f51\u683c\u7ebf",
|
||||
"Bold": "\u7c97\u4f53",
|
||||
"Italic": "\u659c\u4f53",
|
||||
"Underline": "\u4e0b\u5212\u7ebf",
|
||||
"Strikethrough": "\u5220\u9664\u7ebf",
|
||||
"Superscript": "\u4e0a\u6807",
|
||||
"Subscript": "\u4e0b\u6807",
|
||||
"Clear formatting": "\u6e05\u9664\u683c\u5f0f",
|
||||
"Align left": "\u5de6\u8fb9\u5bf9\u9f50",
|
||||
"Align center": "\u4e2d\u95f4\u5bf9\u9f50",
|
||||
"Align right": "\u53f3\u8fb9\u5bf9\u9f50",
|
||||
"Justify": "\u4e24\u7aef\u5bf9\u9f50",
|
||||
"Bullet list": "\u9879\u76ee\u7b26\u53f7",
|
||||
"Numbered list": "\u7f16\u53f7\u5217\u8868",
|
||||
"Decrease indent": "\u51cf\u5c11\u7f29\u8fdb",
|
||||
"Increase indent": "\u589e\u52a0\u7f29\u8fdb",
|
||||
"Close": "\u5173\u95ed",
|
||||
"Formats": "\u683c\u5f0f",
|
||||
"Your browser doesn't support direct access to the clipboard. Please use the Ctrl+X\/C\/V keyboard shortcuts instead.": "\u4f60\u7684\u6d4f\u89c8\u5668\u4e0d\u652f\u6301\u6253\u5f00\u526a\u8d34\u677f\uff0c\u8bf7\u4f7f\u7528Ctrl+X\/C\/V\u7b49\u5feb\u6377\u952e\u3002",
|
||||
"Headers": "\u6807\u9898",
|
||||
"Header 1": "\u6807\u98981",
|
||||
"Header 2": "\u6807\u98982",
|
||||
"Header 3": "\u6807\u98983",
|
||||
"Header 4": "\u6807\u98984",
|
||||
"Header 5": "\u6807\u98985",
|
||||
"Header 6": "\u6807\u98986",
|
||||
"Headings": "\u6807\u9898",
|
||||
"Heading 1": "\u6807\u98981",
|
||||
"Heading 2": "\u6807\u98982",
|
||||
"Heading 3": "\u6807\u98983",
|
||||
"Heading 4": "\u6807\u98984",
|
||||
"Heading 5": "\u6807\u98985",
|
||||
"Heading 6": "\u6807\u98986",
|
||||
"Preformatted": "\u9884\u5148\u683c\u5f0f\u5316\u7684",
|
||||
"Div": "Div",
|
||||
"Pre": "Pre",
|
||||
"Code": "\u4ee3\u7801",
|
||||
"Paragraph": "\u6bb5\u843d",
|
||||
"Blockquote": "\u5f15\u6587\u533a\u5757",
|
||||
"Inline": "\u6587\u672c",
|
||||
"Blocks": "\u57fa\u5757",
|
||||
"Paste is now in plain text mode. Contents will now be pasted as plain text until you toggle this option off.": "\u5f53\u524d\u4e3a\u7eaf\u6587\u672c\u7c98\u8d34\u6a21\u5f0f\uff0c\u518d\u6b21\u70b9\u51fb\u53ef\u4ee5\u56de\u5230\u666e\u901a\u7c98\u8d34\u6a21\u5f0f\u3002",
|
||||
"Fonts": "\u5b57\u4f53",
|
||||
"Font Sizes": "\u5b57\u53f7",
|
||||
"Class": "\u7c7b\u578b",
|
||||
"Browse for an image": "\u6d4f\u89c8\u56fe\u50cf",
|
||||
"OR": "\u6216",
|
||||
"Drop an image here": "\u62d6\u653e\u4e00\u5f20\u56fe\u50cf\u81f3\u6b64",
|
||||
"Upload": "\u4e0a\u4f20",
|
||||
"Block": "\u5757",
|
||||
"Align": "\u5bf9\u9f50",
|
||||
"Default": "\u9ed8\u8ba4",
|
||||
"Circle": "\u7a7a\u5fc3\u5706",
|
||||
"Disc": "\u5b9e\u5fc3\u5706",
|
||||
"Square": "\u65b9\u5757",
|
||||
"Lower Alpha": "\u5c0f\u5199\u82f1\u6587\u5b57\u6bcd",
|
||||
"Lower Greek": "\u5c0f\u5199\u5e0c\u814a\u5b57\u6bcd",
|
||||
"Lower Roman": "\u5c0f\u5199\u7f57\u9a6c\u5b57\u6bcd",
|
||||
"Upper Alpha": "\u5927\u5199\u82f1\u6587\u5b57\u6bcd",
|
||||
"Upper Roman": "\u5927\u5199\u7f57\u9a6c\u5b57\u6bcd",
|
||||
"Anchor...": "\u951a\u70b9...",
|
||||
"Name": "\u540d\u79f0",
|
||||
"Id": "\u6807\u8bc6\u7b26",
|
||||
"Id should start with a letter, followed only by letters, numbers, dashes, dots, colons or underscores.": "\u6807\u8bc6\u7b26\u5e94\u8be5\u4ee5\u5b57\u6bcd\u5f00\u5934\uff0c\u540e\u8ddf\u5b57\u6bcd\u3001\u6570\u5b57\u3001\u7834\u6298\u53f7\u3001\u70b9\u3001\u5192\u53f7\u6216\u4e0b\u5212\u7ebf\u3002",
|
||||
"You have unsaved changes are you sure you want to navigate away?": "\u4f60\u8fd8\u6709\u6587\u6863\u5c1a\u672a\u4fdd\u5b58\uff0c\u786e\u5b9a\u8981\u79bb\u5f00\uff1f",
|
||||
"Restore last draft": "\u6062\u590d\u4e0a\u6b21\u7684\u8349\u7a3f",
|
||||
"Special character...": "\u7279\u6b8a\u5b57\u7b26...",
|
||||
"Source code": "\u6e90\u4ee3\u7801",
|
||||
"Insert\/Edit code sample": "\u63d2\u5165\/\u7f16\u8f91\u4ee3\u7801\u793a\u4f8b",
|
||||
"Language": "\u8bed\u8a00",
|
||||
"Code sample...": "\u793a\u4f8b\u4ee3\u7801...",
|
||||
"Color Picker": "\u9009\u8272\u5668",
|
||||
"R": "R",
|
||||
"G": "G",
|
||||
"B": "B",
|
||||
"Left to right": "\u4ece\u5de6\u5230\u53f3",
|
||||
"Right to left": "\u4ece\u53f3\u5230\u5de6",
|
||||
"Emoticons...": "\u8868\u60c5\u7b26\u53f7...",
|
||||
"Metadata and Document Properties": "\u5143\u6570\u636e\u548c\u6587\u6863\u5c5e\u6027",
|
||||
"Title": "\u6807\u9898",
|
||||
"Keywords": "\u5173\u952e\u8bcd",
|
||||
"Description": "\u63cf\u8ff0",
|
||||
"Robots": "\u673a\u5668\u4eba",
|
||||
"Author": "\u4f5c\u8005",
|
||||
"Encoding": "\u7f16\u7801",
|
||||
"Fullscreen": "\u5168\u5c4f",
|
||||
"Action": "\u64cd\u4f5c",
|
||||
"Shortcut": "\u5feb\u6377\u952e",
|
||||
"Help": "\u5e2e\u52a9",
|
||||
"Address": "\u5730\u5740",
|
||||
"Focus to menubar": "\u79fb\u52a8\u7126\u70b9\u5230\u83dc\u5355\u680f",
|
||||
"Focus to toolbar": "\u79fb\u52a8\u7126\u70b9\u5230\u5de5\u5177\u680f",
|
||||
"Focus to element path": "\u79fb\u52a8\u7126\u70b9\u5230\u5143\u7d20\u8def\u5f84",
|
||||
"Focus to contextual toolbar": "\u79fb\u52a8\u7126\u70b9\u5230\u4e0a\u4e0b\u6587\u83dc\u5355",
|
||||
"Insert link (if link plugin activated)": "\u63d2\u5165\u94fe\u63a5 (\u5982\u679c\u94fe\u63a5\u63d2\u4ef6\u5df2\u6fc0\u6d3b)",
|
||||
"Save (if save plugin activated)": "\u4fdd\u5b58(\u5982\u679c\u4fdd\u5b58\u63d2\u4ef6\u5df2\u6fc0\u6d3b)",
|
||||
"Find (if searchreplace plugin activated)": "\u67e5\u627e(\u5982\u679c\u67e5\u627e\u66ff\u6362\u63d2\u4ef6\u5df2\u6fc0\u6d3b)",
|
||||
"Plugins installed ({0}):": "\u5df2\u5b89\u88c5\u63d2\u4ef6 ({0}):",
|
||||
"Premium plugins:": "\u4f18\u79c0\u63d2\u4ef6\uff1a",
|
||||
"Learn more...": "\u4e86\u89e3\u66f4\u591a...",
|
||||
"You are using {0}": "\u4f60\u6b63\u5728\u4f7f\u7528 {0}",
|
||||
"Plugins": "\u63d2\u4ef6",
|
||||
"Handy Shortcuts": "\u5feb\u6377\u952e",
|
||||
"Horizontal line": "\u6c34\u5e73\u5206\u5272\u7ebf",
|
||||
"Insert\/edit image": "\u63d2\u5165\/\u7f16\u8f91\u56fe\u7247",
|
||||
"Image description": "\u56fe\u7247\u63cf\u8ff0",
|
||||
"Source": "\u5730\u5740",
|
||||
"Dimensions": "\u5927\u5c0f",
|
||||
"Constrain proportions": "\u4fdd\u6301\u7eb5\u6a2a\u6bd4",
|
||||
"General": "\u666e\u901a",
|
||||
"Advanced": "\u9ad8\u7ea7",
|
||||
"Style": "\u6837\u5f0f",
|
||||
"Vertical space": "\u5782\u76f4\u8fb9\u8ddd",
|
||||
"Horizontal space": "\u6c34\u5e73\u8fb9\u8ddd",
|
||||
"Border": "\u8fb9\u6846",
|
||||
"Insert image": "\u63d2\u5165\u56fe\u7247",
|
||||
"Image...": "\u56fe\u7247...",
|
||||
"Image list": "\u56fe\u7247\u5217\u8868",
|
||||
"Rotate counterclockwise": "\u9006\u65f6\u9488\u65cb\u8f6c",
|
||||
"Rotate clockwise": "\u987a\u65f6\u9488\u65cb\u8f6c",
|
||||
"Flip vertically": "\u5782\u76f4\u7ffb\u8f6c",
|
||||
"Flip horizontally": "\u6c34\u5e73\u7ffb\u8f6c",
|
||||
"Edit image": "\u7f16\u8f91\u56fe\u7247",
|
||||
"Image options": "\u56fe\u7247\u9009\u9879",
|
||||
"Zoom in": "\u653e\u5927",
|
||||
"Zoom out": "\u7f29\u5c0f",
|
||||
"Crop": "\u88c1\u526a",
|
||||
"Resize": "\u8c03\u6574\u5927\u5c0f",
|
||||
"Orientation": "\u65b9\u5411",
|
||||
"Brightness": "\u4eae\u5ea6",
|
||||
"Sharpen": "\u9510\u5316",
|
||||
"Contrast": "\u5bf9\u6bd4\u5ea6",
|
||||
"Color levels": "\u989c\u8272\u5c42\u6b21",
|
||||
"Gamma": "\u4f3d\u9a6c\u503c",
|
||||
"Invert": "\u53cd\u8f6c",
|
||||
"Apply": "\u5e94\u7528",
|
||||
"Back": "\u540e\u9000",
|
||||
"Insert date\/time": "\u63d2\u5165\u65e5\u671f\/\u65f6\u95f4",
|
||||
"Date\/time": "\u65e5\u671f\/\u65f6\u95f4",
|
||||
"Insert\/Edit Link": "\u63d2\u5165\/\u7f16\u8f91\u94fe\u63a5",
|
||||
"Insert\/edit link": "\u63d2\u5165\/\u7f16\u8f91\u94fe\u63a5",
|
||||
"Text to display": "\u663e\u793a\u6587\u5b57",
|
||||
"Url": "\u5730\u5740",
|
||||
"Open link in...": "\u94fe\u63a5\u6253\u5f00\u4f4d\u7f6e...",
|
||||
"Current window": "\u5f53\u524d\u7a97\u53e3",
|
||||
"None": "\u65e0",
|
||||
"New window": "\u5728\u65b0\u7a97\u53e3\u6253\u5f00",
|
||||
"Remove link": "\u5220\u9664\u94fe\u63a5",
|
||||
"Anchors": "\u951a\u70b9",
|
||||
"Link...": "\u94fe\u63a5...",
|
||||
"Paste or type a link": "\u7c98\u8d34\u6216\u8f93\u5165\u94fe\u63a5",
|
||||
"The URL you entered seems to be an email address. Do you want to add the required mailto: prefix?": "\u4f60\u6240\u586b\u5199\u7684URL\u5730\u5740\u4e3a\u90ae\u4ef6\u5730\u5740\uff0c\u9700\u8981\u52a0\u4e0amailto:\u524d\u7f00\u5417\uff1f",
|
||||
"The URL you entered seems to be an external link. Do you want to add the required http:\/\/ prefix?": "\u4f60\u6240\u586b\u5199\u7684URL\u5730\u5740\u5c5e\u4e8e\u5916\u90e8\u94fe\u63a5\uff0c\u9700\u8981\u52a0\u4e0ahttp:\/\/:\u524d\u7f00\u5417\uff1f",
|
||||
"Link list": "\u94fe\u63a5\u5217\u8868",
|
||||
"Insert video": "\u63d2\u5165\u89c6\u9891",
|
||||
"Insert\/edit video": "\u63d2\u5165\/\u7f16\u8f91\u89c6\u9891",
|
||||
"Insert\/edit media": "\u63d2\u5165\/\u7f16\u8f91\u5a92\u4f53",
|
||||
"Alternative source": "\u955c\u50cf",
|
||||
"Alternative source URL": "\u66ff\u4ee3\u6765\u6e90\u7f51\u5740",
|
||||
"Media poster (Image URL)": "\u5c01\u9762(\u56fe\u7247\u5730\u5740)",
|
||||
"Paste your embed code below:": "\u5c06\u5185\u5d4c\u4ee3\u7801\u7c98\u8d34\u5728\u4e0b\u9762:",
|
||||
"Embed": "\u5185\u5d4c",
|
||||
"Media...": "\u591a\u5a92\u4f53...",
|
||||
"Nonbreaking space": "\u4e0d\u95f4\u65ad\u7a7a\u683c",
|
||||
"Page break": "\u5206\u9875\u7b26",
|
||||
"Paste as text": "\u7c98\u8d34\u4e3a\u6587\u672c",
|
||||
"Preview": "\u9884\u89c8",
|
||||
"Print...": "\u6253\u5370...",
|
||||
"Save": "\u4fdd\u5b58",
|
||||
"Find": "\u67e5\u627e",
|
||||
"Replace with": "\u66ff\u6362\u4e3a",
|
||||
"Replace": "\u66ff\u6362",
|
||||
"Replace all": "\u5168\u90e8\u66ff\u6362",
|
||||
"Previous": "\u4e0a\u4e00\u4e2a",
|
||||
"Next": "\u4e0b\u4e00\u4e2a",
|
||||
"Find and replace...": "\u67e5\u627e\u5e76\u66ff\u6362...",
|
||||
"Could not find the specified string.": "\u672a\u627e\u5230\u641c\u7d22\u5185\u5bb9.",
|
||||
"Match case": "\u533a\u5206\u5927\u5c0f\u5199",
|
||||
"Find whole words only": "\u5168\u5b57\u5339\u914d",
|
||||
"Spell check": "\u62fc\u5199\u68c0\u67e5",
|
||||
"Ignore": "\u5ffd\u7565",
|
||||
"Ignore all": "\u5168\u90e8\u5ffd\u7565",
|
||||
"Finish": "\u5b8c\u6210",
|
||||
"Add to Dictionary": "\u6dfb\u52a0\u5230\u5b57\u5178",
|
||||
"Insert table": "\u63d2\u5165\u8868\u683c",
|
||||
"Table properties": "\u8868\u683c\u5c5e\u6027",
|
||||
"Delete table": "\u5220\u9664\u8868\u683c",
|
||||
"Cell": "\u5355\u5143\u683c",
|
||||
"Row": "\u884c",
|
||||
"Column": "\u5217",
|
||||
"Cell properties": "\u5355\u5143\u683c\u5c5e\u6027",
|
||||
"Merge cells": "\u5408\u5e76\u5355\u5143\u683c",
|
||||
"Split cell": "\u62c6\u5206\u5355\u5143\u683c",
|
||||
"Insert row before": "\u5728\u4e0a\u65b9\u63d2\u5165",
|
||||
"Insert row after": "\u5728\u4e0b\u65b9\u63d2\u5165",
|
||||
"Delete row": "\u5220\u9664\u884c",
|
||||
"Row properties": "\u884c\u5c5e\u6027",
|
||||
"Cut row": "\u526a\u5207\u884c",
|
||||
"Copy row": "\u590d\u5236\u884c",
|
||||
"Paste row before": "\u7c98\u8d34\u5230\u4e0a\u65b9",
|
||||
"Paste row after": "\u7c98\u8d34\u5230\u4e0b\u65b9",
|
||||
"Insert column before": "\u5728\u5de6\u4fa7\u63d2\u5165",
|
||||
"Insert column after": "\u5728\u53f3\u4fa7\u63d2\u5165",
|
||||
"Delete column": "\u5220\u9664\u5217",
|
||||
"Cols": "\u5217",
|
||||
"Rows": "\u884c",
|
||||
"Width": "\u5bbd",
|
||||
"Height": "\u9ad8",
|
||||
"Cell spacing": "\u5355\u5143\u683c\u5916\u95f4\u8ddd",
|
||||
"Cell padding": "\u5355\u5143\u683c\u5185\u8fb9\u8ddd",
|
||||
"Show caption": "\u663e\u793a\u6807\u9898",
|
||||
"Left": "\u5de6\u5bf9\u9f50",
|
||||
"Center": "\u5c45\u4e2d",
|
||||
"Right": "\u53f3\u5bf9\u9f50",
|
||||
"Cell type": "\u5355\u5143\u683c\u7c7b\u578b",
|
||||
"Scope": "\u8303\u56f4",
|
||||
"Alignment": "\u5bf9\u9f50\u65b9\u5f0f",
|
||||
"H Align": "\u6c34\u5e73\u5bf9\u9f50",
|
||||
"V Align": "\u5782\u76f4\u5bf9\u9f50",
|
||||
"Top": "\u9876\u90e8\u5bf9\u9f50",
|
||||
"Middle": "\u5782\u76f4\u5c45\u4e2d",
|
||||
"Bottom": "\u5e95\u90e8\u5bf9\u9f50",
|
||||
"Header cell": "\u8868\u5934\u5355\u5143\u683c",
|
||||
"Row group": "\u884c\u7ec4",
|
||||
"Column group": "\u5217\u7ec4",
|
||||
"Row type": "\u884c\u7c7b\u578b",
|
||||
"Header": "\u8868\u5934",
|
||||
"Body": "\u8868\u4f53",
|
||||
"Footer": "\u8868\u5c3e",
|
||||
"Border color": "\u8fb9\u6846\u989c\u8272",
|
||||
"Insert template...": "\u63d2\u5165\u6a21\u677f...",
|
||||
"Templates": "\u6a21\u677f",
|
||||
"Template": "\u6a21\u677f",
|
||||
"Text color": "\u6587\u5b57\u989c\u8272",
|
||||
"Background color": "\u80cc\u666f\u8272",
|
||||
"Custom...": "\u81ea\u5b9a\u4e49...",
|
||||
"Custom color": "\u81ea\u5b9a\u4e49\u989c\u8272",
|
||||
"No color": "\u65e0",
|
||||
"Remove color": "\u79fb\u9664\u989c\u8272",
|
||||
"Table of Contents": "\u5185\u5bb9\u5217\u8868",
|
||||
"Show blocks": "\u663e\u793a\u533a\u5757\u8fb9\u6846",
|
||||
"Show invisible characters": "\u663e\u793a\u4e0d\u53ef\u89c1\u5b57\u7b26",
|
||||
"Word count": "\u5b57\u6570",
|
||||
"Count": "\u8ba1\u6570",
|
||||
"Document": "\u6587\u6863",
|
||||
"Selection": "\u9009\u62e9",
|
||||
"Words": "\u5355\u8bcd",
|
||||
"Words: {0}": "\u5b57\u6570\uff1a{0}",
|
||||
"{0} words": "{0} \u5b57",
|
||||
"File": "\u6587\u4ef6",
|
||||
"Edit": "\u7f16\u8f91",
|
||||
"Insert": "\u63d2\u5165",
|
||||
"View": "\u89c6\u56fe",
|
||||
"Format": "\u683c\u5f0f",
|
||||
"Table": "\u8868\u683c",
|
||||
"Tools": "\u5de5\u5177",
|
||||
"Powered by {0}": "\u7531{0}\u9a71\u52a8",
|
||||
"Rich Text Area. Press ALT-F9 for menu. Press ALT-F10 for toolbar. Press ALT-0 for help": "\u5728\u7f16\u8f91\u533a\u6309ALT-F9\u6253\u5f00\u83dc\u5355\uff0c\u6309ALT-F10\u6253\u5f00\u5de5\u5177\u680f\uff0c\u6309ALT-0\u67e5\u770b\u5e2e\u52a9",
|
||||
"Image title": "\u56fe\u7247\u6807\u9898",
|
||||
"Border width": "\u8fb9\u6846\u5bbd\u5ea6",
|
||||
"Border style": "\u8fb9\u6846\u6837\u5f0f",
|
||||
"Error": "\u9519\u8bef",
|
||||
"Warn": "\u8b66\u544a",
|
||||
"Valid": "\u6709\u6548",
|
||||
"To open the popup, press Shift+Enter": "\u6309Shitf+Enter\u952e\u6253\u5f00\u5bf9\u8bdd\u6846",
|
||||
"Rich Text Area. Press ALT-0 for help.": "\u7f16\u8f91\u533a\u3002\u6309Alt+0\u952e\u6253\u5f00\u5e2e\u52a9\u3002",
|
||||
"System Font": "\u7cfb\u7edf\u5b57\u4f53",
|
||||
"Failed to upload image: {0}": "\u56fe\u7247\u4e0a\u4f20\u5931\u8d25: {0}",
|
||||
"Failed to load plugin: {0} from url {1}": "\u63d2\u4ef6\u52a0\u8f7d\u5931\u8d25: {0} \u6765\u81ea\u94fe\u63a5 {1}",
|
||||
"Failed to load plugin url: {0}": "\u63d2\u4ef6\u52a0\u8f7d\u5931\u8d25 \u94fe\u63a5: {0}",
|
||||
"Failed to initialize plugin: {0}": "\u63d2\u4ef6\u521d\u59cb\u5316\u5931\u8d25: {0}",
|
||||
"example": "\u793a\u4f8b",
|
||||
"Search": "\u641c\u7d22",
|
||||
"All": "\u5168\u90e8",
|
||||
"Currency": "\u8d27\u5e01",
|
||||
"Text": "\u6587\u5b57",
|
||||
"Quotations": "\u5f15\u7528",
|
||||
"Mathematical": "\u6570\u5b66",
|
||||
"Extended Latin": "\u62c9\u4e01\u8bed\u6269\u5145",
|
||||
"Symbols": "\u7b26\u53f7",
|
||||
"Arrows": "\u7bad\u5934",
|
||||
"User Defined": "\u81ea\u5b9a\u4e49",
|
||||
"dollar sign": "\u7f8e\u5143\u7b26\u53f7",
|
||||
"currency sign": "\u8d27\u5e01\u7b26\u53f7",
|
||||
"euro-currency sign": "\u6b27\u5143\u7b26\u53f7",
|
||||
"colon sign": "\u5192\u53f7",
|
||||
"cruzeiro sign": "\u514b\u9c81\u8d5b\u7f57\u5e01\u7b26\u53f7",
|
||||
"french franc sign": "\u6cd5\u90ce\u7b26\u53f7",
|
||||
"lira sign": "\u91cc\u62c9\u7b26\u53f7",
|
||||
"mill sign": "\u5bc6\u5c14\u7b26\u53f7",
|
||||
"naira sign": "\u5948\u62c9\u7b26\u53f7",
|
||||
"peseta sign": "\u6bd4\u585e\u5854\u7b26\u53f7",
|
||||
"rupee sign": "\u5362\u6bd4\u7b26\u53f7",
|
||||
"won sign": "\u97e9\u5143\u7b26\u53f7",
|
||||
"new sheqel sign": "\u65b0\u8c22\u514b\u5c14\u7b26\u53f7",
|
||||
"dong sign": "\u8d8a\u5357\u76fe\u7b26\u53f7",
|
||||
"kip sign": "\u8001\u631d\u57fa\u666e\u7b26\u53f7",
|
||||
"tugrik sign": "\u56fe\u683c\u91cc\u514b\u7b26\u53f7",
|
||||
"drachma sign": "\u5fb7\u62c9\u514b\u9a6c\u7b26\u53f7",
|
||||
"german penny symbol": "\u5fb7\u56fd\u4fbf\u58eb\u7b26\u53f7",
|
||||
"peso sign": "\u6bd4\u7d22\u7b26\u53f7",
|
||||
"guarani sign": "\u74dc\u62c9\u5c3c\u7b26\u53f7",
|
||||
"austral sign": "\u6fb3\u5143\u7b26\u53f7",
|
||||
"hryvnia sign": "\u683c\u91cc\u592b\u5c3c\u4e9a\u7b26\u53f7",
|
||||
"cedi sign": "\u585e\u5730\u7b26\u53f7",
|
||||
"livre tournois sign": "\u91cc\u5f17\u5f17\u5c14\u7b26\u53f7",
|
||||
"spesmilo sign": "spesmilo\u7b26\u53f7",
|
||||
"tenge sign": "\u575a\u6208\u7b26\u53f7",
|
||||
"indian rupee sign": "\u5370\u5ea6\u5362\u6bd4",
|
||||
"turkish lira sign": "\u571f\u8033\u5176\u91cc\u62c9",
|
||||
"nordic mark sign": "\u5317\u6b27\u9a6c\u514b",
|
||||
"manat sign": "\u9a6c\u7eb3\u7279\u7b26\u53f7",
|
||||
"ruble sign": "\u5362\u5e03\u7b26\u53f7",
|
||||
"yen character": "\u65e5\u5143\u5b57\u6837",
|
||||
"yuan character": "\u4eba\u6c11\u5e01\u5143\u5b57\u6837",
|
||||
"yuan character, in hong kong and taiwan": "\u5143\u5b57\u6837\uff08\u6e2f\u53f0\u5730\u533a\uff09",
|
||||
"yen\/yuan character variant one": "\u5143\u5b57\u6837\uff08\u5927\u5199\uff09",
|
||||
"Loading emoticons...": "\u52a0\u8f7d\u8868\u60c5\u7b26\u53f7...",
|
||||
"Could not load emoticons": "\u4e0d\u80fd\u52a0\u8f7d\u8868\u60c5\u7b26\u53f7",
|
||||
"People": "\u4eba\u7c7b",
|
||||
"Animals and Nature": "\u52a8\u7269\u548c\u81ea\u7136",
|
||||
"Food and Drink": "\u98df\u7269\u548c\u996e\u54c1",
|
||||
"Activity": "\u6d3b\u52a8",
|
||||
"Travel and Places": "\u65c5\u6e38\u548c\u5730\u70b9",
|
||||
"Objects": "\u7269\u4ef6",
|
||||
"Flags": "\u65d7\u5e1c",
|
||||
"Characters": "\u5b57\u7b26",
|
||||
"Characters (no spaces)": "\u5b57\u7b26(\u65e0\u7a7a\u683c)",
|
||||
"{0} characters": "{0} \u4e2a\u5b57\u7b26",
|
||||
"Error: Form submit field collision.": "\u9519\u8bef: \u8868\u5355\u63d0\u4ea4\u5b57\u6bb5\u51b2\u7a81\u3002",
|
||||
"Error: No form element found.": "\u9519\u8bef: \u6ca1\u6709\u8868\u5355\u63a7\u4ef6\u3002",
|
||||
"Update": "\u66f4\u65b0",
|
||||
"Color swatch": "\u989c\u8272\u6837\u672c",
|
||||
"Turquoise": "\u9752\u7eff\u8272",
|
||||
"Green": "\u7eff\u8272",
|
||||
"Blue": "\u84dd\u8272",
|
||||
"Purple": "\u7d2b\u8272",
|
||||
"Navy Blue": "\u6d77\u519b\u84dd",
|
||||
"Dark Turquoise": "\u6df1\u84dd\u7eff\u8272",
|
||||
"Dark Green": "\u6df1\u7eff\u8272",
|
||||
"Medium Blue": "\u4e2d\u84dd\u8272",
|
||||
"Medium Purple": "\u4e2d\u7d2b\u8272",
|
||||
"Midnight Blue": "\u6df1\u84dd\u8272",
|
||||
"Yellow": "\u9ec4\u8272",
|
||||
"Orange": "\u6a59\u8272",
|
||||
"Red": "\u7ea2\u8272",
|
||||
"Light Gray": "\u6d45\u7070\u8272",
|
||||
"Gray": "\u7070\u8272",
|
||||
"Dark Yellow": "\u6697\u9ec4\u8272",
|
||||
"Dark Orange": "\u6df1\u6a59\u8272",
|
||||
"Dark Red": "\u6df1\u7ea2\u8272",
|
||||
"Medium Gray": "\u4e2d\u7070\u8272",
|
||||
"Dark Gray": "\u6df1\u7070\u8272",
|
||||
"Light Green": "\u6d45\u7eff\u8272",
|
||||
"Light Yellow": "\u6d45\u9ec4\u8272",
|
||||
"Light Red": "\u6d45\u7ea2\u8272",
|
||||
"Light Purple": "\u6d45\u7d2b\u8272",
|
||||
"Light Blue": "\u6d45\u84dd\u8272",
|
||||
"Dark Purple": "\u6df1\u7d2b\u8272",
|
||||
"Dark Blue": "\u6df1\u84dd\u8272",
|
||||
"Black": "\u9ed1\u8272",
|
||||
"White": "\u767d\u8272",
|
||||
"Switch to or from fullscreen mode": "\u5207\u6362\u5168\u5c4f\u6a21\u5f0f",
|
||||
"Open help dialog": "\u6253\u5f00\u5e2e\u52a9\u5bf9\u8bdd\u6846",
|
||||
"history": "\u5386\u53f2",
|
||||
"styles": "\u6837\u5f0f",
|
||||
"formatting": "\u683c\u5f0f\u5316",
|
||||
"alignment": "\u5bf9\u9f50",
|
||||
"indentation": "\u7f29\u8fdb",
|
||||
"permanent pen": "\u8bb0\u53f7\u7b14",
|
||||
"comments": "\u5907\u6ce8",
|
||||
"Format Painter": "\u683c\u5f0f\u5237",
|
||||
"Insert\/edit iframe": "\u63d2\u5165\/\u7f16\u8f91\u6846\u67b6",
|
||||
"Capitalization": "\u5927\u5199",
|
||||
"lowercase": "\u5c0f\u5199",
|
||||
"UPPERCASE": "\u5927\u5199",
|
||||
"Title Case": "\u9996\u5b57\u6bcd\u5927\u5199",
|
||||
"Permanent Pen Properties": "\u6c38\u4e45\u7b14\u5c5e\u6027",
|
||||
"Permanent pen properties...": "\u6c38\u4e45\u7b14\u5c5e\u6027...",
|
||||
"Font": "\u5b57\u4f53",
|
||||
"Size": "\u5b57\u53f7",
|
||||
"More...": "\u66f4\u591a...",
|
||||
"Spellcheck Language": "\u62fc\u5199\u68c0\u67e5\u8bed\u8a00",
|
||||
"Select...": "\u9009\u62e9...",
|
||||
"Preferences": "\u9996\u9009\u9879",
|
||||
"Yes": "\u662f",
|
||||
"No": "\u5426",
|
||||
"Keyboard Navigation": "\u952e\u76d8\u6307\u5f15",
|
||||
"Version": "\u7248\u672c",
|
||||
"Anchor": "\u951a\u70b9",
|
||||
"Special character": "\u7279\u6b8a\u7b26\u53f7",
|
||||
"Code sample": "\u4ee3\u7801\u793a\u4f8b",
|
||||
"Color": "\u989c\u8272",
|
||||
"Emoticons": "\u8868\u60c5",
|
||||
"Document properties": "\u6587\u6863\u5c5e\u6027",
|
||||
"Image": "\u56fe\u7247",
|
||||
"Insert link": "\u63d2\u5165\u94fe\u63a5",
|
||||
"Target": "\u6253\u5f00\u65b9\u5f0f",
|
||||
"Link": "\u94fe\u63a5",
|
||||
"Poster": "\u5c01\u9762",
|
||||
"Media": "\u5a92\u4f53",
|
||||
"Print": "\u6253\u5370",
|
||||
"Prev": "\u4e0a\u4e00\u4e2a",
|
||||
"Find and replace": "\u67e5\u627e\u548c\u66ff\u6362",
|
||||
"Whole words": "\u5168\u5b57\u5339\u914d",
|
||||
"Spellcheck": "\u62fc\u5199\u68c0\u67e5",
|
||||
"Caption": "\u6807\u9898",
|
||||
"Insert template": "\u63d2\u5165\u6a21\u677f"
|
||||
});
|
||||
Reference in New Issue
Block a user