Skip to content

GitLab

S
Starter Web Vue
Commit f73bbf52 authored by 陈浩玮's avatar 陈浩玮
Browse files
Options

Merge branch 'feature/shuiluo' into 'master' 

feat: 完成菜单组件管理

See merge request product/kim3-web-vue/starter-web-vue!22
parents 9cc3fe98 e7671869
Show whitespace changes
Inline Side-by-side
Showing with 1663 additions and 1698 deletions
.env
View file @ f73bbf52
VUE_APP_PUBLIC_PATH=/
VUE_APP_NAME=Admin
VUE_APP_NAME=Karote
VUE_APP_ROUTES_KEY=admin.routes
VUE_APP_PERMISSIONS_KEY=admin.permissions
VUE_APP_ROLES_KEY=admin.roles
......
src/api/index.js
View file @ f73bbf52
import { request, METHOD } from '@/utils';
export * from './menu';
export * from './system';
export * from './task';
export function getUserDetailInfoApi() {
return request('/api/v1/detail', METHOD.GET);
......
src/api/menu.js
View file @ f73bbf52
......@@ -35,3 +35,11 @@ export function getRoleApi(id) {
export function updateRoleApi(data) {
return putReq('/api/v1/roles', data);
}
export function getMenuComponentApi(id) {
return getReq(`/api/v1/menus/${id}/components`);
}
export function addMenuComponentApi(id, data) {
return postReq(`/api/v1/menus/${id}/components`, data);
}
src/api/task.js 0 → 100644
View file @ f73bbf52
import { postReq, putReq } from '@/utils';
export function addTaskApi(data) {
return postReq('/api/v1/schedules', data);
}
export function updateTaskApi(data) {
return putReq('/api/v1/schedules', data);
}
src/components/Acron/ACron.vue
View file @ f73bbf52
<template>
<div class="components-input-demo-presuffix">
<a-input :placeholder="placeholder" :value="cron" @input="handleinput">
<a-input :placeholder="placeholder" :value="cron" @input="handleinput" :disabled="disabled">
<a-icon slot="prefix" type="schedule" title="corn控件" @click="openModal" />
<a-icon v-if="cron" slot="suffix" type="close-circle" @click="handleEmpty" title="清空" />
</a-input>
......@@ -8,29 +8,30 @@
</div>
</template>
<script>
import AntCron from "./AntCron";
import { replaceWeekName } from "./validator";
import AntCron from './AntCron';
import { replaceWeekName } from './validator';
export default {
name: "ACron",
name: 'ACron',
components: {
AntCron
AntCron,
},
props: {
value: {
required: false,
type: String,
default: ""
default: '',
},
placeholder: {
required: false,
type: String,
default: ""
}
default: '',
},
disabled: Boolean,
},
data() {
return {
cron: this.value,
afterCron: ""
afterCron: '',
};
},
watch: {
......@@ -41,33 +42,35 @@ export default {
console.log(replaceWeekName(val));
this.afterCron = replaceWeekName(val);
console.log(val);
this.$emit("input", val);
}
this.$emit('input', val);
},
},
methods: {
openModal() {
if (this.disabled) return;
this.$refs.innerVueCron.show();
},
handleOK(val) {
this.cron = val;
this.$emit("change", this.cron);
this.$emit('change', this.cron);
},
handleinput(evt) {
this.cron = evt.target.value;
if (this.cron !== "") {
this.$emit("change", this.cron);
if (this.cron !== '') {
this.$emit('change', this.cron);
} else {
this.$emit("change", undefined);
this.$emit('change', undefined);
}
},
handleEmpty() {
this.handleOK("");
}
if (this.disabled) return;
this.handleOK('');
},
},
model: {
prop: "value",
event: "change"
}
prop: 'value',
event: 'change',
},
};
</script>
<style scoped>
......
src/components/Acron/AntCron.vue
View file @ f73bbf52
......@@ -7,13 +7,12 @@
@ok="handleSubmit"
@cancel="close"
cancelText="关闭"
:getContainer="getContainer"
>
<div class="card-container">
<a-tabs type="card">
<a-tab-pane key="1" type="card">
<span slot="tab">
<a-icon type="schedule" />秒
</span>
<span slot="tab"> <a-icon type="schedule" />秒 </span>
<a-radio-group v-model="result.second.cronEvery">
<a-row>
<a-radio value="1">每一秒钟</a-radio>
......@@ -26,13 +25,15 @@
v-model="result.second.incrementIncrement"
:min="1"
:max="60"
></a-input-number>秒执行 从
></a-input-number
>秒执行 从
<a-input-number
size="small"
v-model="result.second.incrementStart"
:min="0"
:max="59"
></a-input-number>秒开始
></a-input-number
>秒开始
</a-radio>
</a-row>
<a-row>
......@@ -43,22 +44,34 @@
mode="multiple"
v-model="result.second.specificSpecific"
>
<a-select-option v-for="(val,index) in 60" :key="index" :value="index">{{ index }}</a-select-option>
<a-select-option v-for="(val, index) in 60" :key="index" :value="index">{{
index
}}</a-select-option>
</a-select>
</a-row>
<a-row>
<a-radio value="4">
周期从
<a-input-number size="small" v-model="result.second.rangeStart" :min="1" :max="60"></a-input-number>到
<a-input-number size="small" v-model="result.second.rangeEnd" :min="0" :max="59"></a-input-number>秒
<a-input-number
size="small"
v-model="result.second.rangeStart"
:min="1"
:max="60"
></a-input-number
>到
<a-input-number
size="small"
v-model="result.second.rangeEnd"
:min="0"
:max="59"
></a-input-number
>秒
</a-radio>
</a-row>
</a-radio-group>
</a-tab-pane>
<a-tab-pane key="2">
<span slot="tab">
<a-icon type="schedule" />分
</span>
<span slot="tab"> <a-icon type="schedule" />分 </span>
<div class="tabBody">
<a-radio-group v-model="result.minute.cronEvery">
<a-row>
......@@ -72,13 +85,15 @@
v-model="result.minute.incrementIncrement"
:min="1"
:max="60"
></a-input-number>分执行 从
></a-input-number
>分执行 从
<a-input-number
size="small"
v-model="result.minute.incrementStart"
:min="0"
:max="59"
></a-input-number>分开始
></a-input-number
>分开始
</a-radio>
</a-row>
<a-row>
......@@ -90,10 +105,11 @@
v-model="result.minute.specificSpecific"
>
<a-select-option
v-for="(val,index) in Array(60)"
v-for="(val, index) in Array(60)"
:key="index"
:value="index"
>{{ index }}</a-select-option>
>{{ index }}</a-select-option
>
</a-select>
</a-row>
<a-row>
......@@ -104,17 +120,22 @@
v-model="result.minute.rangeStart"
:min="1"
:max="60"
></a-input-number>到
<a-input-number size="small" v-model="result.minute.rangeEnd" :min="0" :max="59"></a-input-number>分
></a-input-number
>到
<a-input-number
size="small"
v-model="result.minute.rangeEnd"
:min="0"
:max="59"
></a-input-number
>分
</a-radio>
</a-row>
</a-radio-group>
</div>
</a-tab-pane>
<a-tab-pane key="3">
<span slot="tab">
<a-icon type="schedule" />时
</span>
<span slot="tab"> <a-icon type="schedule" />时 </span>
<div class="tabBody">
<a-radio-group v-model="result.hour.cronEvery">
<a-row>
......@@ -128,13 +149,15 @@
v-model="result.hour.incrementIncrement"
:min="0"
:max="23"
></a-input-number>小时执行 从
></a-input-number
>小时执行 从
<a-input-number
size="small"
v-model="result.hour.incrementStart"
:min="0"
:max="23"
></a-input-number>小时开始
></a-input-number
>小时开始
</a-radio>
</a-row>
<a-row>
......@@ -145,23 +168,35 @@
mode="multiple"
v-model="result.hour.specificSpecific"
>
<a-select-option v-for="(val,index) in Array(24)" :key="index">{{ index }}</a-select-option>
<a-select-option v-for="(val, index) in Array(24)" :key="index">{{
index
}}</a-select-option>
</a-select>
</a-row>
<a-row>
<a-radio value="4">
周期从
<a-input-number size="small" v-model="result.hour.rangeStart" :min="0" :max="23"></a-input-number>到
<a-input-number size="small" v-model="result.hour.rangeEnd" :min="0" :max="23"></a-input-number>小时
<a-input-number
size="small"
v-model="result.hour.rangeStart"
:min="0"
:max="23"
></a-input-number
>到
<a-input-number
size="small"
v-model="result.hour.rangeEnd"
:min="0"
:max="23"
></a-input-number
>小时
</a-radio>
</a-row>
</a-radio-group>
</div>
</a-tab-pane>
<a-tab-pane key="4">
<span slot="tab">
<a-icon type="schedule" />天
</span>
<span slot="tab"> <a-icon type="schedule" />天 </span>
<div class="tabBody">
<a-radio-group v-model="result.day.cronEvery">
<a-row>
......@@ -175,14 +210,16 @@
v-model="result.week.incrementIncrement"
:min="1"
:max="7"
></a-input-number>周执行 从
></a-input-number
>周执行 从
<a-select size="small" v-model="result.week.incrementStart">
<a-select-option
v-for="(val,index) in Array(7)"
v-for="(val, index) in Array(7)"
:key="index"
:value="index-1"
>{{ weekDays[index-1] }}</a-select-option>
</a-select>开始
:value="index - 1"
>{{ weekDays[index - 1] }}</a-select-option
> </a-select
>开始
</a-radio>
</a-row>
<a-row>
......@@ -193,13 +230,15 @@
v-model="result.day.incrementIncrement"
:min="1"
:max="31"
></a-input-number>天执行 从
></a-input-number
>天执行 从
<a-input-number
size="small"
v-model="result.day.incrementStart"
:min="1"
:max="31"
></a-input-number>日开始
></a-input-number
>日开始
</a-radio>
</a-row>
<a-row>
......@@ -211,10 +250,11 @@
v-model="result.week.specificSpecific"
>
<a-select-option
v-for="(val,index) in Array(7)"
v-for="(val, index) in Array(7)"
:key="index"
:value="index-1"
>{{ weekDays[index-1] }}</a-select-option>
:value="index - 1"
>{{ weekDays[index - 1] }}</a-select-option
>
</a-select>
</a-row>
<a-row>
......@@ -226,10 +266,11 @@
v-model="result.day.specificSpecific"
>
<a-select-option
v-for="(val,index) in Array(31)"
v-for="(val, index) in Array(31)"
:key="index"
:value="index+1"
>{{ index+1 }}</a-select-option>
:value="index + 1"
>{{ index + 1 }}</a-select-option
>
</a-select>
</a-row>
<a-row>
......@@ -243,10 +284,11 @@
在这个月的最后一个
<a-select size="small" v-model="result.day.cronLastSpecificDomDay">
<a-select-option
v-for="(val,index) in Array(7)"
v-for="(val, index) in Array(7)"
:key="index"
:value="index+1"
>{{ weekDays[index] }}</a-select-option>
:value="index + 1"
>{{ weekDays[index] }}</a-select-option
>
</a-select>
</a-radio>
</a-row>
......@@ -258,7 +300,8 @@
v-model="result.day.cronDaysBeforeEomMinus"
:min="1"
:max="31"
></a-input-number>天
></a-input-number
>天
</a-radio>
</a-row>
<a-row>
......@@ -269,7 +312,8 @@
v-model="result.day.cronDaysNearestWeekday"
:min="1"
:max="31"
></a-input-number>日
></a-input-number
>日
</a-radio>
</a-row>
<a-row>
......@@ -280,13 +324,15 @@
v-model="result.week.cronNthDayNth"
:min="1"
:max="5"
></a-input-number>个
></a-input-number
>个
<a-select size="small" v-model="result.week.cronNthDayDay">
<a-select-option
v-for="(val,index) in Array(7)"
v-for="(val, index) in Array(7)"
:key="index"
:value="index"
>{{ weekDays[index] }}</a-select-option>
>{{ weekDays[index] }}</a-select-option
>
</a-select>
</a-radio>
</a-row>
......@@ -294,9 +340,7 @@
</div>
</a-tab-pane>
<a-tab-pane key="5">
<span slot="tab">
<a-icon type="schedule" />月
</span>
<span slot="tab"> <a-icon type="schedule" />月 </span>
<div class="tabBody">
<a-radio-group v-model="result.month.cronEvery">
<a-row>
......@@ -310,13 +354,15 @@
v-model="result.month.incrementIncrement"
:min="0"
:max="12"
></a-input-number>月执行 从
></a-input-number
>月执行 从
<a-input-number
size="small"
v-model="result.month.incrementStart"
:min="0"
:max="12"
></a-input-number>月开始
></a-input-number
>月开始
</a-radio>
</a-row>
<a-row>
......@@ -329,26 +375,37 @@
v-model="result.month.specificSpecific"
>
<a-select-option
v-for="(val,index) in Array(12)"
v-for="(val, index) in Array(12)"
:key="index"
:value="index+1"
>{{ index+1 }}</a-select-option>
:value="index + 1"
>{{ index + 1 }}</a-select-option
>
</a-select>
</a-row>
<a-row>
<a-radio value="4">
从
<a-input-number size="small" v-model="result.month.rangeStart" :min="1" :max="12"></a-input-number>到
<a-input-number size="small" v-model="result.month.rangeEnd" :min="1" :max="12"></a-input-number>月之间的每个月
<a-input-number
size="small"
v-model="result.month.rangeStart"
:min="1"
:max="12"
></a-input-number
>到
<a-input-number
size="small"
v-model="result.month.rangeEnd"
:min="1"
:max="12"
></a-input-number
>月之间的每个月
</a-radio>
</a-row>
</a-radio-group>
</div>
</a-tab-pane>
<a-tab-pane key="6">
<span slot="tab">
<a-icon type="schedule" />年
</span>
<span slot="tab"> <a-icon type="schedule" />年 </span>
<div class="tabBody">
<a-radio-group v-model="result.year.cronEvery">
<a-row>
......@@ -362,13 +419,15 @@
v-model="result.year.incrementIncrement"
:min="1"
:max="99"
></a-input-number>年执行 从
></a-input-number
>年执行 从
<a-input-number
size="small"
v-model="result.year.incrementStart"
:min="curYear"
:max="curYear+100"
></a-input-number>年开始
:max="curYear + 100"
></a-input-number
>年开始
</a-radio>
</a-row>
<a-row>
......@@ -381,10 +440,11 @@
v-model="result.year.specificSpecific"
>
<a-select-option
v-for="(val,index) in Array(100)"
v-for="(val, index) in Array(100)"
:key="index"
:value="curYear+index-1"
>{{ curYear+index-1 }}</a-select-option>
:value="curYear + index - 1"
>{{ curYear + index - 1 }}</a-select-option
>
</a-select>
</a-row>
<a-row>
......@@ -394,14 +454,16 @@
size="small"
v-model="result.year.rangeStart"
:min="curYear"
:max="curYear+100"
></a-input-number>到
:max="curYear + 100"
></a-input-number
>到
<a-input-number
size="small"
v-model="result.year.rangeEnd"
:min="curYear"
:max="curYear+100"
></a-input-number>年之间的每一年
:max="curYear + 100"
></a-input-number
>年之间的每一年
</a-radio>
</a-row>
</a-radio-group>
......@@ -409,7 +471,7 @@
</a-tab-pane>
</a-tabs>
<div class="bottom">
<span class="value">{{this.cron }}</span>
<span class="value">{{ this.cron }}</span>
</div>
</div>
</a-modal>
......@@ -418,17 +480,15 @@
const now = new Date();
const curYear = now.getFullYear();
export default {
name: "AntCron",
props: ["data"],
name: 'AntCron',
props: ['data'],
data() {
return {
curYear,
visible: false,
confirmLoading: false,
size: "large",
weekDays: ["天", "一", "二", "三", "四", "五", "六"].map(
val => "星期" + val
),
size: 'large',
weekDays: ['天', '一', '二', '三', '四', '五', '六'].map(val => '星期' + val),
result: {
second: {},
minute: {},
......@@ -436,70 +496,70 @@ export default {
day: {},
week: {},
month: {},
year: {}
year: {},
},
defaultValue: {
second: {
cronEvery: "",
cronEvery: '',
incrementStart: 3,
incrementIncrement: 5,
rangeStart: 1,
rangeEnd: 0,
specificSpecific: []
specificSpecific: [],
},
minute: {
cronEvery: "",
cronEvery: '',
incrementStart: 3,
incrementIncrement: 5,
rangeStart: 1,
rangeEnd: "0",
specificSpecific: []
rangeEnd: '0',
specificSpecific: [],
},
hour: {
cronEvery: "",
cronEvery: '',
incrementStart: 3,
incrementIncrement: 5,
rangeStart: "0",
rangeEnd: "0",
specificSpecific: []
rangeStart: '0',
rangeEnd: '0',
specificSpecific: [],
},
day: {
cronEvery: "",
cronEvery: '',
incrementStart: 1,
incrementIncrement: "1",
rangeStart: "",
rangeEnd: "",
incrementIncrement: '1',
rangeStart: '',
rangeEnd: '',
specificSpecific: [],
cronLastSpecificDomDay: 1,
cronDaysBeforeEomMinus: 1,
cronDaysNearestWeekday: 1
cronDaysNearestWeekday: 1,
},
week: {
cronEvery: "",
cronEvery: '',
incrementStart: 1,
incrementIncrement: 1,
specificSpecific: [],
cronNthDayDay: 1,
cronNthDayNth: 1
cronNthDayNth: 1,
},
month: {
cronEvery: "",
cronEvery: '',
incrementStart: 3,
incrementIncrement: 5,
rangeStart: 1,
rangeEnd: 1,
specificSpecific: []
specificSpecific: [],
},
year: {
cronEvery: "",
cronEvery: '',
incrementStart: curYear,
incrementIncrement: 1,
rangeStart: curYear,
rangeEnd: curYear,
specificSpecific: []
specificSpecific: [],
},
label: '',
},
label: ""
}
};
},
computed: {
......@@ -507,216 +567,189 @@ export default {
return 608;
},
secondsText() {
let seconds = "";
let cronEvery = this.result.second.cronEvery || "";
let seconds = '';
let cronEvery = this.result.second.cronEvery || '';
switch (cronEvery.toString()) {
case "1":
seconds = "*";
case '1':
seconds = '*';
break;
case "2":
seconds =
this.result.second.incrementStart +
"/" +
this.result.second.incrementIncrement;
case '2':
seconds = this.result.second.incrementStart + '/' + this.result.second.incrementIncrement;
break;
case "3":
case '3':
this.result.second.specificSpecific.map(val => {
seconds += val + ",";
seconds += val + ',';
});
seconds = seconds.slice(0, -1);
break;
case "4":
seconds =
this.result.second.rangeStart + "-" + this.result.second.rangeEnd;
case '4':
seconds = this.result.second.rangeStart + '-' + this.result.second.rangeEnd;
break;
}
return seconds;
},
minutesText() {
let minutes = "";
let cronEvery = this.result.minute.cronEvery || "";
let minutes = '';
let cronEvery = this.result.minute.cronEvery || '';
switch (cronEvery.toString()) {
case "1":
minutes = "*";
case '1':
minutes = '*';
break;
case "2":
minutes =
this.result.minute.incrementStart +
"/" +
this.result.minute.incrementIncrement;
case '2':
minutes = this.result.minute.incrementStart + '/' + this.result.minute.incrementIncrement;
break;
case "3":
case '3':
this.result.minute.specificSpecific.map(val => {
minutes += val + ",";
minutes += val + ',';
});
minutes = minutes.slice(0, -1);
break;
case "4":
minutes =
this.result.minute.rangeStart + "-" + this.result.minute.rangeEnd;
case '4':
minutes = this.result.minute.rangeStart + '-' + this.result.minute.rangeEnd;
break;
}
return minutes;
},
hoursText() {
let hours = "";
let cronEvery = this.result.hour.cronEvery || "";
let hours = '';
let cronEvery = this.result.hour.cronEvery || '';
switch (cronEvery.toString()) {
case "1":
hours = "*";
case '1':
hours = '*';
break;
case "2":
hours =
this.result.hour.incrementStart +
"/" +
this.result.hour.incrementIncrement;
case '2':
hours = this.result.hour.incrementStart + '/' + this.result.hour.incrementIncrement;
break;
case "3":
case '3':
this.result.hour.specificSpecific.map(val => {
hours += val + ",";
hours += val + ',';
});
hours = hours.slice(0, -1);
break;
case "4":
hours = this.result.hour.rangeStart + "-" + this.result.hour.rangeEnd;
case '4':
hours = this.result.hour.rangeStart + '-' + this.result.hour.rangeEnd;
break;
}
return hours;
},
daysText() {
let days = "";
let cronEvery = this.result.day.cronEvery || "";
let days = '';
let cronEvery = this.result.day.cronEvery || '';
switch (cronEvery.toString()) {
case "1":
case '1':
break;
case "2":
case "4":
case "11":
days = "?";
case '2':
case '4':
case '11':
days = '?';
break;
case "3":
days =
this.result.day.incrementStart +
"/" +
this.result.day.incrementIncrement;
case '3':
days = this.result.day.incrementStart + '/' + this.result.day.incrementIncrement;
break;
case "5":
case '5':
this.result.day.specificSpecific.map(val => {
days += val + ",";
days += val + ',';
});
days = days.slice(0, -1);
break;
case "6":
days = "L";
case '6':
days = 'L';
break;
case "7":
days = "LW";
case '7':
days = 'LW';
break;
case "8":
days = this.result.day.cronLastSpecificDomDay + "L";
case '8':
days = this.result.day.cronLastSpecificDomDay + 'L';
break;
case "9":
days = "L-" + this.result.day.cronDaysBeforeEomMinus;
case '9':
days = 'L-' + this.result.day.cronDaysBeforeEomMinus;
break;
case "10":
days = this.result.day.cronDaysNearestWeekday + "W";
case '10':
days = this.result.day.cronDaysNearestWeekday + 'W';
break;
}
return days;
},
weeksText() {
let weeks = "";
let cronEvery = this.result.day.cronEvery || "";
let weeks = '';
let cronEvery = this.result.day.cronEvery || '';
switch (cronEvery.toString()) {
case "1":
case "3":
case "5":
weeks = "?";
break;
case "2":
weeks =
this.result.week.incrementStart +
"/" +
this.result.week.incrementIncrement;
break;
case "4":
case '1':
case '3':
case '5':
weeks = '?';
break;
case '2':
weeks = this.result.week.incrementStart + '/' + this.result.week.incrementIncrement;
break;
case '4':
this.result.week.specificSpecific.map(val => {
weeks += val + ",";
weeks += val + ',';
});
weeks = weeks.slice(0, -1);
break;
case "6":
case "7":
case "8":
case "9":
case "10":
weeks = "?";
case '6':
case '7':
case '8':
case '9':
case '10':
weeks = '?';
break;
case "11":
weeks =
this.result.week.cronNthDayDay +
"#" +
this.result.week.cronNthDayNth;
case '11':
weeks = this.result.week.cronNthDayDay + '#' + this.result.week.cronNthDayNth;
break;
}
return weeks;
},
monthsText() {
let months = "";
let cronEvery = this.result.month.cronEvery || "";
let months = '';
let cronEvery = this.result.month.cronEvery || '';
switch (cronEvery.toString()) {
case "1":
months = "*";
case '1':
months = '*';
break;
case "2":
months =
this.result.month.incrementStart +
"/" +
this.result.month.incrementIncrement;
case '2':
months = this.result.month.incrementStart + '/' + this.result.month.incrementIncrement;
break;
case "3":
case '3':
this.result.month.specificSpecific.map(val => {
months += val + ",";
months += val + ',';
});
months = months.slice(0, -1);
break;
case "4":
months =
this.result.month.rangeStart + "-" + this.result.month.rangeEnd;
case '4':
months = this.result.month.rangeStart + '-' + this.result.month.rangeEnd;
break;
}
return months;
},
yearsText() {
let years = "";
let cronEvery = this.result.year.cronEvery || "";
let years = '';
let cronEvery = this.result.year.cronEvery || '';
switch (cronEvery.toString()) {
case "1":
years = "*";
case '1':
years = '*';
break;
case "2":
years =
this.result.year.incrementStart +
"/" +
this.result.year.incrementIncrement;
case '2':
years = this.result.year.incrementStart + '/' + this.result.year.incrementIncrement;
break;
case "3":
case '3':
this.result.year.specificSpecific.map(val => {
years += val + ",";
years += val + ',';
});
years = years.slice(0, -1);
break;
case "4":
years = this.result.year.rangeStart + "-" + this.result.year.rangeEnd;
case '4':
years = this.result.year.rangeStart + '-' + this.result.year.rangeEnd;
break;
}
return years;
},
cron() {
return `${this.secondsText || "*"} ${this.minutesText || "*"} ${this
.hoursText || "*"} ${this.daysText || "*"} ${this.monthsText ||
"*"} ${this.weeksText || "?"} ${this.yearsText || "*"}`;
}
return `${this.secondsText || '*'} ${this.minutesText || '*'} ${this.hoursText || '*'} ${this
.daysText || '*'} ${this.monthsText || '*'} ${this.weeksText || '?'} ${this.yearsText ||
'*'}`;
},
},
watch: {
visible: {
......@@ -724,35 +757,48 @@ export default {
let label = this.data;
if (label) {
label = label.trim();
const len = label.split(" ").length;
const len = label.split(' ').length;
switch (true) {
case len > 0:
this.secondsReverseExp(label);
break;
case len > 1:
this.minutesReverseExp(label);
break;
case len > 2:
this.hoursReverseExp(label);
break;
case len > 3:
this.daysReverseExp(label);
break;
case len > 4:
this.daysReverseExp(label);
break;
case len > 5:
this.monthsReverseExp(label);
break;
case len > 6:
this.yearReverseExp(label);
}
} else {
this.result = JSON.parse(JSON.stringify(this.defaultValue));
}
}
}
},
},
},
methods: {
getContainer(e) {
return window.document.body;
},
show() {
this.visible = true;
},
handleSubmit() {
this.$emit("ok", this.cron);
this.$emit('ok', this.cron);
this.close();
this.visible = false;
},
......@@ -760,121 +806,121 @@ export default {
this.visible = false;
},
secondsReverseExp(seconds) {
let val = seconds.split(" ")[0];
let val = seconds.split(' ')[0];
let second = {
cronEvery: "",
cronEvery: '',
incrementStart: 3,
incrementIncrement: 5,
rangeStart: 1,
rangeEnd: 0,
specificSpecific: []
specificSpecific: [],
};
switch (true) {
case val.includes("*"):
second.cronEvery = "1";
case val.includes('*'):
second.cronEvery = '1';
break;
case val.includes("/"):
second.cronEvery = "2";
second.incrementStart = val.split("/")[0];
second.incrementIncrement = val.split("/")[1];
case val.includes('/'):
second.cronEvery = '2';
second.incrementStart = val.split('/')[0];
second.incrementIncrement = val.split('/')[1];
break;
case val.includes(","):
second.cronEvery = "3";
case val.includes(','):
second.cronEvery = '3';
second.specificSpecific = val
.split(",")
.split(',')
.map(Number)
.sort();
break;
case val.includes("-"):
second.cronEvery = "4";
second.rangeStart = val.split("-")[0];
second.rangeEnd = val.split("-")[1];
case val.includes('-'):
second.cronEvery = '4';
second.rangeStart = val.split('-')[0];
second.rangeEnd = val.split('-')[1];
break;
default:
second.cronEvery = "3";
second.cronEvery = '3';
second.specificSpecific = [val];
}
this.result.second = second;
},
minutesReverseExp(minutes) {
let val = minutes.split(" ")[1];
let val = minutes.split(' ')[1];
let minute = {
cronEvery: "",
cronEvery: '',
incrementStart: 3,
incrementIncrement: 5,
rangeStart: 1,
rangeEnd: 0,
specificSpecific: []
specificSpecific: [],
};
switch (true) {
case val.includes("*"):
minute.cronEvery = "1";
case val.includes('*'):
minute.cronEvery = '1';
break;
case val.includes("/"):
minute.cronEvery = "2";
minute.incrementStart = val.split("/")[0];
minute.incrementIncrement = val.split("/")[1];
case val.includes('/'):
minute.cronEvery = '2';
minute.incrementStart = val.split('/')[0];
minute.incrementIncrement = val.split('/')[1];
break;
case val.includes(","):
minute.cronEvery = "3";
case val.includes(','):
minute.cronEvery = '3';
minute.specificSpecific = val
.split(",")
.split(',')
.map(Number)
.sort();
break;
case val.includes("-"):
minute.cronEvery = "4";
minute.rangeStart = val.split("-")[0];
minute.rangeEnd = val.split("-")[1];
case val.includes('-'):
minute.cronEvery = '4';
minute.rangeStart = val.split('-')[0];
minute.rangeEnd = val.split('-')[1];
break;
default:
minute.cronEvery = "3";
minute.cronEvery = '3';
minute.specificSpecific = [val];
}
this.result.minute = minute;
},
hoursReverseExp(hours) {
let val = hours.split(" ")[2];
let val = hours.split(' ')[2];
let hour = {
cronEvery: "",
cronEvery: '',
incrementStart: 3,
incrementIncrement: 5,
rangeStart: 1,
rangeEnd: "0",
specificSpecific: []
rangeEnd: '0',
specificSpecific: [],
};
switch (true) {
case val.includes("*"):
hour.cronEvery = "1";
case val.includes('*'):
hour.cronEvery = '1';
break;
case val.includes("/"):
hour.cronEvery = "2";
hour.incrementStart = val.split("/")[0];
hour.incrementIncrement = val.split("/")[1];
case val.includes('/'):
hour.cronEvery = '2';
hour.incrementStart = val.split('/')[0];
hour.incrementIncrement = val.split('/')[1];
break;
case val.includes(","):
hour.cronEvery = "3";
case val.includes(','):
hour.cronEvery = '3';
hour.specificSpecific = val
.split(",")
.split(',')
.map(Number)
.sort();
break;
case val.includes("-"):
hour.cronEvery = "4";
hour.rangeStart = val.split("-")[0];
hour.rangeEnd = val.split("-")[1];
case val.includes('-'):
hour.cronEvery = '4';
hour.rangeStart = val.split('-')[0];
hour.rangeEnd = val.split('-')[1];
break;
default:
hour.cronEvery = "3";
hour.cronEvery = '3';
hour.specificSpecific = [val];
}
this.result.hour = hour;
},
daysReverseExp(cron) {
let days = cron.split(" ")[3];
let weeks = cron.split(" ")[5];
let days = cron.split(' ')[3];
let weeks = cron.split(' ')[5];
let day = {
cronEvery: "",
cronEvery: '',
incrementStart: 1,
incrementIncrement: 1,
rangeStart: 1,
......@@ -882,77 +928,77 @@ export default {
specificSpecific: [],
cronLastSpecificDomDay: 1,
cronDaysBeforeEomMinus: 1,
cronDaysNearestWeekday: 1
cronDaysNearestWeekday: 1,
};
let week = {
cronEvery: "",
cronEvery: '',
incrementStart: 1,
incrementIncrement: 1,
specificSpecific: [],
cronNthDayDay: 1,
cronNthDayNth: 1
cronNthDayNth: 1,
};
if (!days.includes("?")) {
if (!days.includes('?')) {
switch (true) {
case days.includes("*"):
day.cronEvery = "1";
case days.includes('*'):
day.cronEvery = '1';
break;
case days.includes("?"):
case days.includes('?'):
break;
case days.includes("/"):
day.cronEvery = "3";
day.incrementStart = days.split("/")[0];
day.incrementIncrement = days.split("/")[1];
case days.includes('/'):
day.cronEvery = '3';
day.incrementStart = days.split('/')[0];
day.incrementIncrement = days.split('/')[1];
break;
case days.includes(","):
day.cronEvery = "5";
case days.includes(','):
day.cronEvery = '5';
day.specificSpecific = days
.split(",")
.split(',')
.map(Number)
.sort();
break;
case days.includes("LW"):
day.cronEvery = "7";
case days.includes('LW'):
day.cronEvery = '7';
break;
case days.includes("L-"):
day.cronEvery = "9";
day.cronDaysBeforeEomMinus = days.split("L-")[1];
case days.includes('L-'):
day.cronEvery = '9';
day.cronDaysBeforeEomMinus = days.split('L-')[1];
break;
case days.includes("L"):
case days.includes('L'):
if (days.len == 1) {
day.cronEvery = "6";
day.cronLastSpecificDomDay = "1";
day.cronEvery = '6';
day.cronLastSpecificDomDay = '1';
} else {
day.cronEvery = "8";
day.cronLastSpecificDomDay = Number(days.split("L")[0]);
day.cronEvery = '8';
day.cronLastSpecificDomDay = Number(days.split('L')[0]);
}
break;
case days.includes("W"):
day.cronEvery = "10";
day.cronDaysNearestWeekday = days.split("W")[0];
case days.includes('W'):
day.cronEvery = '10';
day.cronDaysNearestWeekday = days.split('W')[0];
break;
default:
day.cronEvery = "5";
day.cronEvery = '5';
day.specificSpecific = [days];
}
} else {
switch (true) {
case weeks.includes("/"):
day.cronEvery = "2";
week.incrementStart = parseInt(weeks.split("/")[0]);
week.incrementIncrement = parseInt(weeks.split("/")[1]);
case weeks.includes('/'):
day.cronEvery = '2';
week.incrementStart = parseInt(weeks.split('/')[0]);
week.incrementIncrement = parseInt(weeks.split('/')[1]);
break;
case weeks.includes(","):
day.cronEvery = "4";
case weeks.includes(','):
day.cronEvery = '4';
week.specificSpecific = weeks
.split(",")
.split(',')
.map(Number)
.sort();
break;
case weeks.includes("#"):
day.cronEvery = "11";
week.cronNthDayDay = parseInt(weeks.split("#")[0]);
week.cronNthDayNth = parseInt(weeks.split("#")[1]);
case weeks.includes('#'):
day.cronEvery = '11';
week.cronNthDayDay = parseInt(weeks.split('#')[0]);
week.cronNthDayNth = parseInt(weeks.split('#')[1]);
break;
// case weeks.includes("-"):
// day.cronEvery = "11";
......@@ -960,8 +1006,8 @@ export default {
// week.cronNthDayNth = parseInt(weeks.split("#")[1]);
// break;
default:
day.cronEvery = "4";
week.cronEvery = "4";
day.cronEvery = '4';
week.cronEvery = '4';
week.specificSpecific = [parseInt(weeks)];
}
}
......@@ -969,88 +1015,88 @@ export default {
this.result.week = week;
},
monthsReverseExp(cron) {
let months = cron.split(" ")[4];
let months = cron.split(' ')[4];
let month = {
cronEvery: "",
cronEvery: '',
incrementStart: 3,
incrementIncrement: 5,
rangeStart: 1,
rangeEnd: 1,
specificSpecific: []
specificSpecific: [],
};
switch (true) {
case months.includes("*"):
month.cronEvery = "1";
case months.includes('*'):
month.cronEvery = '1';
break;
case months.includes("/"):
month.cronEvery = "2";
month.incrementStart = months.split("/")[0];
month.incrementIncrement = months.split("/")[1];
case months.includes('/'):
month.cronEvery = '2';
month.incrementStart = months.split('/')[0];
month.incrementIncrement = months.split('/')[1];
break;
case months.includes(","):
month.cronEvery = "3";
case months.includes(','):
month.cronEvery = '3';
month.specificSpecific = months
.split(",")
.split(',')
.map(Number)
.sort();
break;
case months.includes("-"):
month.cronEvery = "4";
month.rangeStart = months.split("-")[0];
month.rangeEnd = months.split("-")[1];
case months.includes('-'):
month.cronEvery = '4';
month.rangeStart = months.split('-')[0];
month.rangeEnd = months.split('-')[1];
break;
default:
month.cronEvery = "3";
month.cronEvery = '3';
month.specificSpecific = [months];
}
this.result.month = month;
},
yearReverseExp(cron) {
let years = cron.split(" ")[6];
let years = cron.split(' ')[6];
let year = {
cronEvery: "",
cronEvery: '',
incrementStart: curYear,
incrementIncrement: 5,
rangeStart: curYear,
rangeEnd: curYear,
specificSpecific: []
specificSpecific: [],
};
if (years !== undefined) {
switch (true) {
case years.includes("*"):
year.cronEvery = "1";
case years.includes('*'):
year.cronEvery = '1';
break;
case years.includes("/"):
year.cronEvery = "2";
year.incrementStart = years.split("/")[0];
year.incrementIncrement = years.split("/")[1];
case years.includes('/'):
year.cronEvery = '2';
year.incrementStart = years.split('/')[0];
year.incrementIncrement = years.split('/')[1];
break;
case years.includes(","):
year.cronEvery = "3";
case years.includes(','):
year.cronEvery = '3';
year.specificSpecific = years
.split(",")
.split(',')
.map(Number)
.sort();
break;
case years.includes("-"):
year.cronEvery = "4";
year.rangeStart = years.split("-")[0];
year.rangeEnd = years.split("-")[1];
case years.includes('-'):
year.cronEvery = '4';
year.rangeStart = years.split('-')[0];
year.rangeEnd = years.split('-')[1];
break;
default:
year.cronEvery = "3";
year.cronEvery = '3';
year.specificSpecific = [years];
}
} else {
year.cronEvery = "1";
year.cronEvery = '1';
}
this.result.year = year;
}
}
},
},
};
</script>
<style lang="scss">
<style lang="less">
.card-container {
background: #fff;
overflow: hidden;
......@@ -1099,7 +1145,8 @@ export default {
}
}
</style>
<style lang="scss" scoped>
<style lang="less" scoped>
.container-widthEn {
width: 755px;
}
......
src/components/FormMixin/index.js
View file @ f73bbf52
......@@ -20,15 +20,16 @@ export default {
async submit() {
await this.$refs.DrawerForm.validate();
if (this.isAdd) {
return this?.add();
return this.add();
}
if (this.isEdit) {
return this?.edit();
return this.edit();
}
},
setData(data, type) {
this.form = { ...data };
this.type = type;
console.log(data, type);
},
},
};
src/components/action_button/index.vue
View file @ f73bbf52
......@@ -9,7 +9,7 @@
:onOk="btn.onOk"
:label="btn.label"
/>
<a v-else @click="() => btn.click(row)">{{ btn.label }}</a>
<a v-else @click="() => btn.click(row)" v-bind="btn.option">{{ btn.label }}</a>
<a-divider type="vertical" v-if="moreBtns.length || index !== basicBtns.length - 1" />
</span>
......@@ -26,7 +26,7 @@
:onOk="btn.onOk"
:label="btn.label"
/>
<a v-else @click="() => btn.click(row)">{{ btn.label }}</a>
<a v-else @click="() => btn.click(row)" v-bind="btn.option">{{ btn.label }}</a>
</span>
</a-space>
</template>
......@@ -77,10 +77,10 @@ export default {
return url;
},
init() {
this.buttons.map((i) => {
this.buttons.map(i => {
i.__hidden__ = i.isHidden && i.isHidden(this.row);
});
this.buttonsArr = this.buttons.filter((i) => !i.__hidden__);
this.buttonsArr = this.buttons.filter(i => !i.__hidden__);
},
},
};
......
src/components/table/index.vue
View file @ f73bbf52
......@@ -180,6 +180,7 @@ export default {
this.addVisible = true;
this.type = 0;
this.noFooter = false;
this.title = '新增';
},
addDrawerClose() {
this.addVisible = false;
......
src/components/table/table.vue
View file @ f73bbf52
......@@ -15,10 +15,14 @@
</div>
</my-card>
<my-card class="tw-mt-3">
<a-space class="tw-mb-2.5">
<slot name="action" />
<my-card>
<a-space :class="{ 'tw-mb-2.5': !!$scopedSlots.search }">
<a-button type="primary" v-if="addBtn" @click="addBtnClick">
{{ typeof addBtn === 'object' ? addBtn.text : '新增' }}
</a-button>
<slot name="operation" />
</a-space>
<a-table
:data-source="data"
:loading="loading"
......@@ -27,8 +31,26 @@
@change="pageChange"
>
<slot />
<a-table-column title="操作" v-if="buttons">
<template #default="row">
<my-ac-btn :row="row" :buttons="buttons" />
</template>
</a-table-column>
</a-table>
</my-card>
<a-drawer
placement="right"
:visible="visible"
:drawerStyle="drawerStyle"
:bodyStyle="bodyStyle"
destroyOnClose
:width="600"
@close="hidden"
:maskClosable="false"
>
<slot name="drawer" :hidden="hidden" />
</a-drawer>
</div>
</template>
......@@ -43,6 +65,10 @@ const initQuery = {
export default {
props: {
url: String,
addBtn: [Object, Boolean],
buttons: Array,
noPage: Boolean,
formatData: Function,
},
data() {
......@@ -54,6 +80,17 @@ export default {
queryForm: {},
loading: false,
total: 0,
visible: false,
title: '新增',
drawerStyle: {
display: 'flex',
flexDirection: 'column',
overflowY: 'hidden',
},
bodyStyle: {
flex: 1,
overflow: 'hidden',
},
};
},
......@@ -63,7 +100,9 @@ export default {
computed: {
pagination() {
return {
return this.noPage
? false
: {
current: this.initQuery.pageNum,
pageSize: this.initQuery.pageSize,
total: this.total,
......@@ -76,7 +115,7 @@ export default {
async getData() {
this.loading = true;
try {
await this.getDataWithPage();
this.noPage ? await this.getDataNoPage() : await this.getDataWithPage();
} catch (error) {
// todo
}
......@@ -90,10 +129,34 @@ export default {
else this.data = res.records;
},
async getDataNoPage() {
const res = await request(this.url, METHOD.GET, this.queryForm);
if (this.formatData) this.data = this.formatData(res);
else this.data = res;
},
pageChange(page) {
this.initQuery.pageNum = page.current;
this.getData();
},
hidden() {
this.visible = false;
},
show({ title } = {}) {
this.visible = true;
if (title) this.title = title;
},
reset() {
this.queryForm = {};
this.initQuery = { ...initQuery };
this.getData();
},
addBtnClick() {
const { click } = typeof this.addBtn === 'object' ? this.addBtn : {};
click && click();
this.visible = true;
},
},
};
</script>
src/components/table/tableDrawer.vue deleted 100644 → 0
View file @ 9cc3fe98
<template>
<div>
<Drawer />
<Table>
<template #search="query">
<slot name="search" :query="query" />
</template>
<slot name="table" />
</Table>
</div>
</template>
<script>
import Table from './table.vue';
import Drawer from './drawer.vue';
export default {
components: { Table, Drawer },
};
</script>
src/components/table/wraper.vue 0 → 100644
View file @ f73bbf52
<template>
<div class="tw-flex tw-flex-col tw-h-full">
<div class="tw-overflow-y-hidden tw-flex-1">
<div class="tw-overflow-y-auto tw-h-full">
<slot />
</div>
</div>
<template>
<a-divider />
<a-space class="tw-justify-end">
<a-button @click="cancel">取消</a-button>
<slot name="footer">
<a-button type="primary" @click="ok" :loading="loading">确认</a-button>
</slot>
</a-space>
</template>
</div>
</template>
<script>
import { EMPTY_FUN } from '@/utils';
export default {
props: {
onOk: {
type: Function,
default: EMPTY_FUN,
},
onCancel: Function,
hidden: {
type: Function,
default: EMPTY_FUN,
},
},
data: () => ({
loading: false,
}),
methods: {
cancel() {
if (this.onCancel) this.onCancel();
this.hidden();
},
async ok() {
this.loading = true;
await this.onOk();
this.loading = false;
this.hidden();
},
},
};
</script>
src/config/global.config.js
View file @ f73bbf52
// 全部的配置数据
const globalConfig = {
//支持语言
langs: [
{key: 'zh_CN', name: '简体中文', alias: '简体'},
{key: 'en_US', name: 'English', alias: 'English'}
],
//调色板 颜色
palettes: ["#f5222d", "#fa541c", "#fadb14", "#3eaf7c", "#13c2c2", "#1890ff", "#722ed1", "#eb2f96"],
palettes: ['#f5222d', '#fa541c', '#fadb14', '#3eaf7c', '#13c2c2', '#1890ff', '#722ed1', '#eb2f96'],
//tab出入动画效果
animates: {
preset: [
//参考Animate.css 各种特效的css命名，default对应没有 direction的情况
{ name: "back", alias: "渐近", directions: ["Left", "Right"] },
{ name: "bounce", alias: "弹跳", directions: ["Left", "Right", "Default"] },
{ name: 'back', alias: '渐近', directions: ['Left', 'Right'] },
{ name: 'bounce', alias: '弹跳', directions: ['Left', 'Right', 'Default'] },
{
name: "fade",
alias: "淡化",
directions: ["Left", "LeftBig", "Right", "RightBig", "Default"],
name: 'fade',
alias: '淡化',
directions: ['Left', 'LeftBig', 'Right', 'RightBig', 'Default'],
},
{ name: "lightSpeed", alias: "光速", directions: ["Left", "Right"] },
{ name: "slide", alias: "滑动", directions: ["Left", "Right"] },
{ name: 'lightSpeed', alias: '光速', directions: ['Left', 'Right'] },
{ name: 'slide', alias: '滑动', directions: ['Left', 'Right'] },
],
},
//当前主色调 + 3个功能颜色 + 3个模式菜单颜色
primary: {
color: "#3eaf7c",
warning: "#faad14",
success: "#52c41a",
error: "#f5222d",
color: '#3eaf7c',
warning: '#faad14',
success: '#52c41a',
error: '#f5222d',
light: {
menuColors: ["#000c17", "#001529", "#002140"],
menuColors: ['#000c17', '#001529', '#002140'],
},
dark: {
menuColors: ["#000c17", "#001529", "#002140"],
menuColors: ['#000c17', '#001529', '#002140'],
},
night: {
menuColors: ["#151515", "#1f1f1f", "#1e1e1e"],
menuColors: ['#151515', '#1f1f1f', '#1e1e1e'],
},
},
//主题
theme: {
mode: {
DARK: "dark",
LIGHT: "light",
NIGHT: "night",
DARK: 'dark',
LIGHT: 'light',
NIGHT: 'night',
},
dark: {
"layout-body-background": "#f0f2f5",
"body-background": "#fff",
"component-background": "#fff",
"heading-color": "rgba(0, 0, 0, 0.85)",
"text-color": "rgba(0, 0, 0, 0.65)",
"text-color-inverse": "#fff",
"text-color-secondary": "rgba(0, 0, 0, 0.45)",
"shadow-color": "rgba(0, 0, 0, 0.15)",
"border-color-split": "#f0f0f0",
"background-color-light": "#fafafa",
"background-color-base": "#f5f5f5",
"table-selected-row-bg": "#fafafa",
"table-expanded-row-bg": "#fbfbfb",
"checkbox-check-color": "#fff",
"disabled-color": "rgba(0, 0, 0, 0.25)",
"menu-dark-color": "rgba(254, 254, 254, 0.65)",
"menu-dark-highlight-color": "#fefefe",
"menu-dark-arrow-color": "#fefefe",
"btn-primary-color": "#fff",
'layout-body-background': '#f0f2f5',
'body-background': '#fff',
'component-background': '#fff',
'heading-color': 'rgba(0, 0, 0, 0.85)',
'text-color': 'rgba(0, 0, 0, 0.65)',
'text-color-inverse': '#fff',
'text-color-secondary': 'rgba(0, 0, 0, 0.45)',
'shadow-color': 'rgba(0, 0, 0, 0.15)',
'border-color-split': '#f0f0f0',
'background-color-light': '#fafafa',
'background-color-base': '#f5f5f5',
'table-selected-row-bg': '#fafafa',
'table-expanded-row-bg': '#fbfbfb',
'checkbox-check-color': '#fff',
'disabled-color': 'rgba(0, 0, 0, 0.25)',
'menu-dark-color': 'rgba(254, 254, 254, 0.65)',
'menu-dark-highlight-color': '#fefefe',
'menu-dark-arrow-color': '#fefefe',
'btn-primary-color': '#fff',
},
light: {
"layout-body-background": "#f0f2f5",
"body-background": "#fff",
"component-background": "#fff",
"heading-color": "rgba(0, 0, 0, 0.85)",
"text-color": "rgba(0, 0, 0, 0.65)",
"text-color-inverse": "#fff",
"text-color-secondary": "rgba(0, 0, 0, 0.45)",
"shadow-color": "rgba(0, 0, 0, 0.15)",
"border-color-split": "#f0f0f0",
"background-color-light": "#fafafa",
"background-color-base": "#f5f5f5",
"table-selected-row-bg": "#fafafa",
"table-expanded-row-bg": "#fbfbfb",
"checkbox-check-color": "#fff",
"disabled-color": "rgba(0, 0, 0, 0.25)",
"menu-dark-color": "rgba(1, 1, 1, 0.65)",
"menu-dark-highlight-color": "#fefefe",
"menu-dark-arrow-color": "#fefefe",
"btn-primary-color": "#fff",
'layout-body-background': '#f0f2f5',
'body-background': '#fff',
'component-background': '#fff',
'heading-color': 'rgba(0, 0, 0, 0.85)',
'text-color': 'rgba(0, 0, 0, 0.65)',
'text-color-inverse': '#fff',
'text-color-secondary': 'rgba(0, 0, 0, 0.45)',
'shadow-color': 'rgba(0, 0, 0, 0.15)',
'border-color-split': '#f0f0f0',
'background-color-light': '#fafafa',
'background-color-base': '#f5f5f5',
'table-selected-row-bg': '#fafafa',
'table-expanded-row-bg': '#fbfbfb',
'checkbox-check-color': '#fff',
'disabled-color': 'rgba(0, 0, 0, 0.25)',
'menu-dark-color': 'rgba(1, 1, 1, 0.65)',
'menu-dark-highlight-color': '#fefefe',
'menu-dark-arrow-color': '#fefefe',
'btn-primary-color': '#fff',
},
night: {
"layout-body-background": "#000",
"body-background": "#141414",
"component-background": "#141414",
"heading-color": "rgba(255, 255, 255, 0.85)",
"text-color": "rgba(255, 255, 255, 0.85)",
"text-color-inverse": "#141414",
"text-color-secondary": "rgba(255, 255, 255, 0.45)",
"shadow-color": "rgba(255, 255, 255, 0.15)",
"border-color-split": "#303030",
"background-color-light": "#ffffff0a",
"background-color-base": "#2a2a2a",
"table-selected-row-bg": "#ffffff0a",
"table-expanded-row-bg": "#ffffff0b",
"checkbox-check-color": "#141414",
"disabled-color": "rgba(255, 255, 255, 0.25)",
"menu-dark-color": "rgba(254, 254, 254, 0.65)",
"menu-dark-highlight-color": "#fefefe",
"menu-dark-arrow-color": "#fefefe",
"btn-primary-color": "#141414",
'layout-body-background': '#000',
'body-background': '#141414',
'component-background': '#141414',
'heading-color': 'rgba(255, 255, 255, 0.85)',
'text-color': 'rgba(255, 255, 255, 0.85)',
'text-color-inverse': '#141414',
'text-color-secondary': 'rgba(255, 255, 255, 0.45)',
'shadow-color': 'rgba(255, 255, 255, 0.15)',
'border-color-split': '#303030',
'background-color-light': '#ffffff0a',
'background-color-base': '#2a2a2a',
'table-selected-row-bg': '#ffffff0a',
'table-expanded-row-bg': '#ffffff0b',
'checkbox-check-color': '#141414',
'disabled-color': 'rgba(255, 255, 255, 0.25)',
'menu-dark-color': 'rgba(254, 254, 254, 0.65)',
'menu-dark-highlight-color': '#fefefe',
'menu-dark-arrow-color': '#fefefe',
'btn-primary-color': '#141414',
},
},
layout: {
SIDE: "side",
HEAD: "head",
SIDE: 'side',
HEAD: 'head',
},
};
module.exports = globalConfig;
\ No newline at end of file
src/main.js
View file @ f73bbf52
......@@ -8,17 +8,16 @@ import VueI18n from 'vue-i18n';
import { accountModule, settingModule } from './pages/frame/store';
import globalStore from '@/store';
import App from './App.vue';
import 'tailwindcss/tailwind.css';
import 'animate.css/source/animate.css';
import './theme/index.less';
import Plugins from './plugins';
import { loadRoutes, loadGuards, setAppOptions } from './utils/routerUtil';
import guards from './router/guards';
import { loadResponseInterceptor } from './utils/requestUtil';
import langUtils from '@/utils/langUtils';
import 'tailwindcss/tailwind.css';
import 'animate.css/source/animate.css';
import './theme/index.less';
// import '@/mock';
import 'moment/locale/zh-cn';
//设置为非生产提示
......@@ -40,13 +39,12 @@ const router = new Router(options);
//装载vue-i18n控件 如果语言优先级 请直接修改这里localeLang和fallbackLang
Vue.use(VueI18n);
//defalt 'CN'
const localeLang = store.state.settingModule.lang;
//default'EN'
const fallbackLang = store.state.settingModule.fallbackLang;
const localeLang = langUtils.get();
const i18n = new VueI18n({
locale: localeLang,
fallbackLocale: fallbackLang,
fallbackLocale: langUtils.fallbackLocale,
silentFallbackWarn: true,
});
......
src/pages/frame/components/header/LayoutTopHeaderLang.vue
View file @ f73bbf52
<template>
<a-dropdown class="lang header-item">
<div><a-icon type="global" /> {{ langAlias }}</div>
<a-menu @click="val => setLang(val.key)" :selected-keys="[lang]" slot="overlay">
<a-menu @click="changeLang" :selected-keys="[lang]" slot="overlay">
<a-menu-item v-for="lang in langList" :key="lang.key">
{{ lang.key.toLowerCase() + ' ' + lang.name }}
</a-menu-item>
......@@ -10,26 +10,28 @@
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import { globalConfig } from '@/config';
import langUtils from '@/utils/langUtils';
export default {
name: 'LayoutTopHeaderLang',
data() {
return {
langList: globalConfig.langs,
langList: langUtils.langList,
lang: langUtils.get(),
};
},
computed: {
...mapState('settingModule', ['lang']),
langAlias() {
let lang = this.langList.find(item => item.key == this.lang);
const lang = this.langList.find(item => item.key == this.lang);
return lang.alias;
},
},
methods: {
...mapMutations('settingModule', ['setLang']),
change(langKey) {
this.$i18n.locale = langKey;
this.lang = langKey;
langUtils.set(langKey);
},
},
};
</script>
src/pages/frame/view/template/BlankTemplateView.vue
View file @ f73bbf52
<template>
<page-toggle-transition
:disabled="animate.disabled"
:animate="animate.name"
:direction="animate.direction"
>
<router-view />
</page-toggle-transition>
</template>
<script>
import PageToggleTransition from '@/components/transition/PageToggleTransition.vue';
import { mapState } from 'vuex';
export default {
name: 'BlankTemplateView',
components: { PageToggleTransition },
computed: {
...mapState('settingModule', ['multiPage', 'animate']),
...mapState('settingModule', ['multiPage']),
},
};
</script>
src/pages/frame/view/template/PageTemplateView.vue
View file @ f73bbf52
<template>
<page-layout :desc="desc" :linkList="linkList">
<div v-if="this.extraImage && !isMobile" slot="extra" class="extraImg">
<div v-if="this.extraImage && !isMobile" slot="extra" :class="$style.extraImg">
<img :src="extraImage" />
</div>
<page-toggle-transition :disabled="animate.disabled" :animate="animate.name" :direction="animate.direction">
<router-view ref="page" />
</page-toggle-transition>
</page-layout>
</template>
<script>
import PageLayout from '../../layouts/PageLayout.vue';
import PageToggleTransition from '@/components/transition/PageToggleTransition';
import { mapState } from 'vuex';
export default {
name: 'PageTemplateView',
components: { PageToggleTransition, PageLayout },
components: { PageLayout },
data() {
return {
page: {},
};
},
computed: {
...mapState('settingModule', ['isMobile', 'multiPage', 'animate']),
...mapState('settingModule', ['isMobile', 'multiPage']),
desc() {
return this.page.desc;
},
......@@ -43,7 +40,7 @@ export default {
};
</script>
<style lang="less" scoped>
<style lang="less" modle>
.extraImg {
margin-top: -60px;
text-align: center;
......
src/pages/frame/view/template/TabsTemplateView.vue
View file @ f73bbf52
......@@ -13,17 +13,11 @@
<div
:class="['tabs-view-content', layout, pageWidth]"
:style="`margin-top: ${multiPage ? -20 : 0}px`"
>
<page-toggle-transition
:disabled="animate.disabled"
:animate="animate.name"
:direction="animate.direction"
>
<a-keep-alive :exclude-keys="excludeKeys" v-if="multiPage && cachePage" v-model="clearCaches">
<router-view v-if="!refreshing" ref="tabContent" :key="$route.fullPath" />
</a-keep-alive>
<router-view ref="tabContent" v-else-if="!refreshing" />
</page-toggle-transition>
</div>
</admin-layout>
</template>
......@@ -31,7 +25,6 @@
<script>
import AdminLayout from '../../layouts/AdminLayout';
import Contextmenu from '@/components/menu/Contextmenu.vue';
import PageToggleTransition from '@/components/transition/PageToggleTransition';
import { mapState, mapMutations } from 'vuex';
import { getI18nKey } from '@/utils/routerUtil';
import AKeepAlive from '@/components/cache/AKeepAlive';
......@@ -41,7 +34,7 @@ import templateI18n from './i18n';
export default {
name: 'TabsTemplateView',
i18n: templateI18n,
components: { LayoutTabsHeader, PageToggleTransition, Contextmenu, AdminLayout, AKeepAlive },
components: { LayoutTabsHeader, Contextmenu, AdminLayout, AKeepAlive },
data() {
return {
clearCaches: [],
......@@ -53,7 +46,7 @@ export default {
};
},
computed: {
...mapState('settingModule', ['multiPage', 'cachePage', 'animate', 'layout', 'pageWidth']),
...mapState('settingModule', ['multiPage', 'cachePage', 'layout', 'pageWidth']),
menuItemList() {
return [
......
src/pages/system/view/menu/MenuManagement.vue
View file @ f73bbf52
......@@ -8,7 +8,7 @@
ref="table"
>
<template #drawer>
<AddCom v-if="addCom" />
<AddCom v-if="addCom" :row="currentClickRow" ref="addCom" />
<Form ref="addForm" v-else />
</template>
......@@ -33,24 +33,30 @@ import AddCom from './add_com.vue';
export default {
data: vm => ({
addCom: false,
currentClickRow: null,
addBtn: {
text: '新建',
onOk() {
return vm.$refs['addForm']?.submit();
return vm.addCom ? vm.$refs['addCom']?.submit() : vm.$refs['addForm']?.submit();
},
onCancel() {
vm.addCom = false;
vm.currentClickRow = null;
},
},
sortOrder: 'ascend',
buttons: [
{
label: '新增组件',
click() {
option: {
style: 'color: #ff4d4f',
},
click(row) {
vm.show();
vm.addCom = true;
vm.currentClickRow = row;
},
isHidden: row => row.menuType === 'MENU',
isHidden: row => row.menuType !== 'MENU',
},
{ label: '编辑', click: vm.edit },
{ type: 'confirm', url: row => `/api/v1/menus/${row.menuId}`, after: vm.refreshTable },
......@@ -74,7 +80,7 @@ export default {
});
},
show() {
this.$refs['table'].show();
this.$refs['table'].show({ title: '菜单组件' });
},
},
};
......
src/pages/system/view/menu/add_com.vue
View file @ f73bbf52
<template>
<h1>addCom</h1>
<div>
<a-button type="primary" class="tw-mb-2" @click="add">新增</a-button>
<a-table :dataSource="components" :rowKey="getRowKey">
<a-table-column title="组件编码">
<template #default="row">
<span v-if="row.componentId">{{ row.componentCode }}</span>
<a-input v-else v-model="row.componentCode" />
</template>
</a-table-column>
<a-table-column title="组件名称">
<template #default="row">
<span v-if="row.componentId">{{ row.componentName }}</span>
<a-input v-else v-model="row.componentName" />
</template>
</a-table-column>
<a-table-column title="操作">
<template #default="row">
<a @click="() => del(row)">删除</a>
</template>
</a-table-column>
</a-table>
</div>
</template>
<script>
import { getMenuComponentApi, addMenuComponentApi } from '@/api';
export default {
props: ['row'],
data: () => ({
components: [],
}),
mounted() {
this.getData();
},
methods: {
async getData() {
const { menuId } = this.row;
this.components = await getMenuComponentApi(menuId);
},
add() {
this.components.push({
componentCode: '',
componentName: '',
__key__: this.components.length,
});
},
del(row) {
this.components = this.components.filter(r => r !== row);
},
getRowKey(row) {
return row.__key__ ? row.__key__ : row.componentId;
},
submit() {
const { menuId } = this.row;
return addMenuComponentApi(
menuId,
this.components.map(i => {
delete i.__key__;
return i;
}),
);
},
},
};
</script>
src/pages/system/view/task/form.vue
View file @ f73bbf52
<template>
<a-form-model layout="vertical" :model="form" :rules="rules" ref="DrawerForm">
<a-form-model-item label="任务名称" prop="jobName">
<a-input v-model="form.jobName" :disabled="isView" />
<a-form-model-item label="任务名称" prop="taskName">
<a-input v-model="form.taskName" :disabled="isView" />
</a-form-model-item>
<a-form-model-item label="调度规则" prop="jobDescription">
<a-textarea v-model="form.jobDescription" :disabled="isView" :rows="4" />
<a-form-model-item label="调度规则" prop="taskRule">
<ACron v-model="form.taskRule" :disabled="isView" />
</a-form-model-item>
<a-form-model-item label="实现类" prop="jobDescription">
<a-input v-model="form.jobDescription" :disabled="isView" />
<a-form-model-item label="实现类" prop="implementClass">
<a-input v-model="form.implementClass" :disabled="isView" />
</a-form-model-item>
<a-form-model-item label="说明" prop="jobDescription">
<a-textarea v-model="form.jobDescription" :disabled="isView" :rows="4" />
<a-form-model-item label="说明" prop="remark">
<a-textarea v-model="form.remark" :disabled="isView" :rows="4" />
</a-form-model-item>
</a-form-model>
</template>
<script>
import JobsApi from '@/api/organization';
import { addTaskApi, updateTaskApi } from '@/api';
import FormMixin from '@/components/FormMixin';
import ACron from '@/components/Acron/ACron.vue';
export default {
components: { ACron },
props: ['row'],
mixins: [FormMixin],
data() {
return {
rules: {
jobName: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
jobDescription: [
{ required: true, message: 'Please select Activity zone', trigger: 'change' },
],
taskName: [{ required: true }],
taskRule: [{ required: true }],
},
};
},
methods: {
add() {
return JobsApi.add({ ...this.form });
return addTaskApi({ ...this.form });
},
edit() {
return JobsApi.update({ ...this.form });
return updateTaskApi({ ...this.form });
},
},
};
......
src/pages/system/view/task/index.vue
View file @ f73bbf52
<template>
<my-table url="/api/v1/schedules" rowKey="taskId" :addBtn="addBtn" ref="table">
<template #drawer>
<Form ref="form" />
<Form ref="form" :row="currentClickRow" />
</template>
<a-table-column title="任务名称" data-index="taskName" />
<a-table-column title="调度规则" data-index="taskRule" />
......@@ -23,7 +23,12 @@ export default {
components: { ActionButton, Form },
data() {
return {
addBtn: {},
addBtn: {
onOk: () => {
return this.$refs.form.submit();
},
},
currentClickRow: null,
buttons: [
{
label: '查看',
......@@ -47,8 +52,9 @@ export default {
type: 'confirm',
label: '失效',
title: '确认是否失效?',
url: row => `/api/v1/schedules/${row.taskId}`,
url: row => ({ url: `/api/v1/schedules/${row.taskId}/pause`, method: 'del' }),
after: () => this.refreshTable(),
isHidden: row => row.isPaused === 1,
},
{
type: 'confirm',
......
src/pages/user/components/form.vue 0 → 100644
View file @ f73bbf52
<template>
<Wraper :onCancel="hidden" :hidden="hidden">
<h1>这是内容</h1>
</Wraper>
</template>
<script>
import Wraper from '@/components/table/wraper.vue';
export default {
components: { Wraper },
props: ['hidden'],
};
</script>
src/pages/user/components/todo.vue
View file @ f73bbf52
<template>
<h1>TODO</h1>
<Table url="/api/v1/logger/login" rowKey="logId" addBtn :actions="actions" ref="table">
<template #search="{query}">
<my-form-item label="开始时间">
<a-date-picker
class="tw-w-full"
show-time
v-model="query.startTime"
valueFormat="YYYY-MM-DD HH:mm:ss"
/>
</my-form-item>
</template>
<template #drawer="{hidden}">
<Form :hidden="hidden" />
</template>
<a-table-column title="用户Id" data-index="userId" />
<a-table-column title="登录用户" data-index="userName" />
<a-table-column title="登录IP" data-index="loginIp" />
<a-table-column title="事件类型" data-index="loginTypeName" />
<a-table-column title="事件状态" data-index="isSuccessName" />
<a-table-column title="登录时间" data-index="loginTime" />
<a-table-column title="说明" data-index="logResultContent" />
</Table>
</template>
<script>
import Table from '@/components/table/table.vue';
import Form from './form.vue';
export default {
components: { Table, Form },
data: () => ({
addBtn: {
text: '新增',
},
actions: [],
}),
};
</script>
src/utils/demo.js deleted 100644 → 0
View file @ 9cc3fe98
import { notification } from 'antd';
import { getLocale, history } from 'umi';
import config from '@/config';
import { clearLoginStatus, getLocaleText } from '@/utils';
import HttpRequest from './kim-request';
import store from 'store';
// const codeMessage = {
// 200: getLocaleText('kim.system.request.200'),
// 201: getLocaleText('kim.system.request.201'),
// 202: getLocaleText('kim.system.request.202'),
// 204: getLocaleText('kim.system.request.204'),
// 400: getLocaleText('kim.system.request.400'),
// 401: getLocaleText('kim.system.request.401'),
// 403: getLocaleText('kim.system.request.403'),
// 404: getLocaleText('kim.system.request.404'),
// 406: getLocaleText('kim.system.request.406'),
// 410: getLocaleText('kim.system.request.410'),
// 422: getLocaleText('kim.system.request.422'),
// 500: getLocaleText('kim.system.request.500'),
// 502: getLocaleText('kim.system.request.502'),
// 503: getLocaleText('kim.system.request.503'),
// 504: getLocaleText('kim.system.request.504'),
// };
const {
request: {
baseUrl,
apiPrefix,
resCodeKey,
resMessageKey,
successCode,
isThrowError = true,
authCodes = ['error.system.authc'],
},
} = config;
/**
* 组装url
* @param {url} url
* @param {{}} more
*/
const merge = (url: string, more: any) => {
if (more && more.apiPrefix && typeof more.apiPrefix === 'string') {
return `${config.apiPrefix}${url}`;
}
if (apiPrefix && typeof apiPrefix === 'string') {
return `${config.apiPrefix}${url}`;
}
return url;
};
const headers = () => ({
Authorization: store.get('token'),
'X-Access-Lang': getLocale().replace(/-/, '_'),
});
const axios = new HttpRequest({
baseUrl,
headers: headers || {},
});
/**
* 正常返回结果处理
* @param {返回请求数据} response
* @param {配置项} more
*/
const handleResponse = (response) => {
const { data } = response;
console.log('response', response);
//
if (`${data[resCodeKey]}` !== `${successCode}`) {
if (isThrowError) {
const errorMessage =
data[resMessageKey] || getLocaleText('kim.system.request.default.message');
let error = new Error();
error = { ...error, ...data };
error.code = data[resCodeKey];
error.message = errorMessage;
return Promise.reject(error);
}
}
// success
return data;
};
const handleError = (error, more) => {
const codeMessage = {
200: getLocaleText('kim.system.request.200'),
201: getLocaleText('kim.system.request.201'),
202: getLocaleText('kim.system.request.202'),
204: getLocaleText('kim.system.request.204'),
400: getLocaleText('kim.system.request.400'),
401: getLocaleText('kim.system.request.401'),
403: getLocaleText('kim.system.request.403'),
404: getLocaleText('kim.system.request.404'),
406: getLocaleText('kim.system.request.406'),
410: getLocaleText('kim.system.request.410'),
422: getLocaleText('kim.system.request.422'),
500: getLocaleText('kim.system.request.500'),
502: getLocaleText('kim.system.request.502'),
503: getLocaleText('kim.system.request.503'),
504: getLocaleText('kim.system.request.504'),
};
const { response } = error;
const options = { isThrowError, ...more };
// status
if (response && response.status) {
const errorText = codeMessage[response.status] || response.statusText;
const {
status,
config: { url },
} = response;
notification.error({
message: `${getLocaleText('kim.system.request.dialog.title')} ${status}`,
description: `${url}${errorText}`,
});
// 跳转到404页面
if (status >= 404 && status < 422) {
history.push('/exception/404');
}
if (status <= 504 && status >= 500) {
history.push('/exception/500');
}
// 跳转到登录页面 可能原因:token 失效
if (status === 403 && status === 401) {
clearLoginStatus();
history.push('/user/login');
}
} else {
// code
const { code, message } = error;
notification.error({
key: `notification_${code ? message : code}`,
message: getLocaleText('kim.system.request.dialog.title'),
description: message,
});
// 跳转到登录页面 可能原因:token 失效
if (authCodes && authCodes.includes(code)) {
// 清空相关信息
clearLoginStatus();
history.push('/user/login');
}
}
if (options.isThrowError) {
throw error;
} else {
return error;
}
};
export default function request(url, options = {}, more = {}, handle = false) {
let newOptions = options;
newOptions.url = url;
if (more.headers) {
newOptions = { ...options, headers: more.headers };
}
if (handle) {
return axios.request(newOptions);
}
return axios
.request(newOptions)
.then((response) => handleResponse(response, more))
.catch((error) => handleError(error, more));
}
/**
* get请求
* @param url
* @param data
* @param more
* @returns {AxiosPromise<any>|Promise<Promise<never> | 返回请求数据.data | *>}
*/
const get = (url, data, more = {}) => {
if (data?.current && !data?.pageNum) {
// eslint-disable-next-line no-param-reassign
data.pageNum = data.current;
}
return request(
`${merge(url, more)}`,
{
method: 'get', // default
params: data,
},
more,
);
};
/**
* post请求
* @param url
* @param data
* @param more
* @returns {AxiosPromise<any>|Promise<Promise<never> | 返回请求数据.data | *>}
*/
const post = (url, data, more = {}) =>
request(
`${merge(url, more)}`,
{
method: 'post', // default
data,
},
more,
);
/**
* put请求
* @param url
* @param data
* @param more
* @returns {AxiosPromise<any>|Promise<Promise<never> | 返回请求数据.data | *>}
*/
const put = (url, data, more = {}) =>
request(
`${merge(url, more)}`,
{
method: 'put', // default
data,
},
more,
);
/**
* delete请求
* @param url
* @param data
* @param more
* @returns {AxiosPromise<any>|Promise<Promise<never> | 返回请求数据.data | *>}
*/
const del = (url, data, more = {}) =>
request(
`${merge(url, more)}`,
{
method: 'delete', // default
data,
},
more,
);
/**
* patch请求
* @param url
* @param data
* @param more
* @returns {AxiosPromise<any>|Promise<Promise<never> | 返回请求数据.data | *>}
*/
const patch = (url, data, more = {}) =>
request(
`${merge(url, more)}`,
{
method: 'patch', // default
data,
...more,
},
more,
);
const downloadFile = (url, data, more = {}) => {
console.log('xiazai');
return request(
`${merge(url, more)}`,
{
method: 'get', // default
params: data,
responseType: 'blob',
},
more,
true,
).then((response) => {
return new Blob([response.data]);
});
};
const formDataUpload = (url, options, more = {}) => {
const formData = new FormData();
if (options) {
Object.keys(options).forEach((key) => {
formData.append(key, options[key]);
});
}
return post(`${merge(url, more)}`, formData, {
headers: {
'Content-Type': 'multipart/form-data',
Authorization: store.get('token'),
},
...more,
}).then((res) => {
const { code } = res;
if (code === 'sys.success' && typeof options.onSuccess) {
return options.onSuccess(res);
}
return res;
});
};
/**
* 上传文件
* @param {url} url
* @param {data} data
* @param {type} type
* @param {more} more
*/
const uploadFile = (url, data, type = 'formData', more = {}) => {
if (type === 'formData') {
return formDataUpload(url, data, more);
}
return null;
};
export { request, get, post, put, del, patch, uploadFile, downloadFile };
src/utils/langUtils.js
View file @ f73bbf52
const LANG_KEY = 'LANG_KEY';
// 假如 第一语言没有， 就使用这个配置的语言
const fallbackLocale = 'zh_CN';
// 支持的语言列表
const langList = [
{ key: 'zh_CN', name: '简体中文', alias: '简体' },
{ key: 'en_US', name: 'English', alias: 'English' },
];
function setLang(val) {
window.sessionStorage.setItem(LANG_KEY, val);
window.localStorage.setItem(LANG_KEY, val);
}
function getLang() {
return window.sessionStorage.getItem(LANG_KEY);
return window.localStorage.getItem(LANG_KEY) || 'zh_CN';
}
export default {
get: getLang,
set: setLang,
fallbackLocale,
langList,
};
src/utils/requestUtil.js
View file @ f73bbf52
......@@ -21,7 +21,7 @@ function loadResponseInterceptor({ router }) {
config.headers = {
...config.headers,
Authorization: getToken(),
'X-Access-Lang': langUtil.get() || 'zh_CN',
'X-Access-Lang': langUtil.get(),
};
return config;
},
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment