Skip to content

Commit

Permalink
♻️ Refactoring code. 调整前端组件增加相关api 方便二次开发
Browse files Browse the repository at this point in the history
  • Loading branch information
lbw committed Nov 20, 2023
1 parent 487ddea commit 3ece22d
Show file tree
Hide file tree
Showing 23 changed files with 596 additions and 944 deletions.
11 changes: 8 additions & 3 deletions src/components/ChinaArea/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<template>
<el-cascader :options="optionsData" v-model="selectedOptions" @change="handleChange" />
<el-cascader :options="optionsData" :disabled="disabled" v-model="selectedOptions" @change="handleChange" />
</template>
<script setup lang="ts" name="china-area">
import { provinceAndCityData, provinceAndCityDataPlus, regionData, regionDataPlus } from '/@/utils/chinaArea';
const emit = defineEmits(['update:value', 'change']);
const emit = defineEmits(['update:modelValue', 'change']);
const optionsData = ref();
const props = defineProps({
// 当前的值
Expand All @@ -18,14 +18,19 @@ const props = defineProps({
type: Boolean,
default: false,
},
// 是否禁用
disabled: {
type: Boolean,
default: () => false,
},
});
const selectedOptions = computed({
get: () => {
return props.modelValue?.split(',');
},
set: (val) => {
emit('update:value', val?.join(','));
emit('update:modelValue', val?.join(','));
},
});
Expand Down
170 changes: 84 additions & 86 deletions src/components/CodeEditor/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,18 @@
* @version: 1.0
* @Author: sakuya
* @Date: 2022年5月20日21:46:29
* @LastEditors:
* @LastEditTime:
* @LastEditors:
* @LastEditTime:
-->

<template>
<div class="code-editor" :style="{ height: _height}">
<textarea ref="textarea" v-model="contentValue"></textarea>
</div>
<div class="code-editor" :style="{ height: _height }">
<textarea ref="textarea" v-model="contentValue"></textarea>
</div>
</template>

<script>
import {markRaw} from 'vue';
import { markRaw } from 'vue';

//框架
import CodeMirror from 'codemirror';
Expand All @@ -32,92 +32,90 @@ import 'codemirror/mode/velocity/velocity';
import 'codemirror/mode/go/go';

export default {
props: {
modelValue: {
type: String,
default: '',
},
mode: {
type: String,
default: 'go',
},
height: {
type: [String, Number],
default: 300,
},
options: {
type: Object,
default: () => {
},
},
theme: {
type: String,
default: 'idea',
},
readOnly: {
type: Boolean,
default: false,
},
},
data() {
return {
contentValue: this.modelValue,
coder: null,
opt: {
theme: this.theme, //主题
styleActiveLine: true, //高亮当前行
lineNumbers: true, //行号
lineWrapping: false, //自动换行
tabSize: 4, //Tab缩进
indentUnit: 4, //缩进单位
indentWithTabs: true, //自动缩进
mode: this.mode, //语言
readOnly: this.readOnly, //只读
...this.options,
},
};
},
computed: {
_height() {
return Number(this.height) ? Number(this.height) + 'px' : this.height;
},
},
watch: {
modelValue(val) {
this.contentValue = val;
if (val !== this.coder.getValue()) {
this.coder.setValue(val);
}
},
},
mounted() {
this.init();
//获取挂载的所有modes
//console.log(CodeMirror.modes)
},
methods: {
init() {
this.coder = markRaw(CodeMirror.fromTextArea(this.$refs.textarea, this.opt));
this.coder.on('change', (coder) => {
this.contentValue = coder.getValue();
this.$emit('update:modelValue', this.contentValue);
});
},
formatStrInJson(strValue) {
return JSON.stringify(JSON.parse(strValue), null, 4);
},
},
props: {
modelValue: {
type: String,
default: '',
},
mode: {
type: String,
default: 'go',
},
height: {
type: [String, Number],
default: 300,
},
options: {
type: Object,
default: () => {},
},
theme: {
type: String,
default: 'idea',
},
readOnly: {
type: Boolean,
default: false,
},
},
data() {
return {
contentValue: this.modelValue,
coder: null,
opt: {
theme: this.theme, //主题
styleActiveLine: true, //高亮当前行
lineNumbers: true, //行号
lineWrapping: false, //自动换行
tabSize: 4, //Tab缩进
indentUnit: 4, //缩进单位
indentWithTabs: true, //自动缩进
mode: this.mode, //语言
readOnly: this.readOnly, //只读
...this.options,
},
};
},
computed: {
_height() {
return Number(this.height) ? Number(this.height) + 'px' : this.height;
},
},
watch: {
modelValue(val) {
this.contentValue = val;
if (val !== this.coder.getValue()) {
this.coder.setValue(val);
}
},
},
mounted() {
this.init();
//获取挂载的所有modes
//console.log(CodeMirror.modes)
},
methods: {
init() {
this.coder = markRaw(CodeMirror.fromTextArea(this.$refs.textarea, this.opt));
this.coder.on('change', (coder) => {
this.contentValue = coder.getValue();
this.$emit('update:modelValue', this.contentValue);
});
},
formatStrInJson(strValue) {
return JSON.stringify(JSON.parse(strValue), null, 4);
},
},
};
</script>

<style scoped>
.code-editor {
font-size: 14px;
border: 1px solid #ddd;
line-height: 150%;
font-size: 14px;
border: 1px solid #ddd;
line-height: 150%;
}

.code-editor:deep(.CodeMirror) {
height: 100%;
height: 100%;
}
</style>
66 changes: 33 additions & 33 deletions src/components/Crontab/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,10 +43,10 @@
<el-form>
<el-form-item label="类型">
<el-radio-group v-model="value.second.type">
<el-radio border label="0">任意值</el-radio>
<el-radio border label="1">范围</el-radio>
<el-radio border label="2">间隔</el-radio>
<el-radio border label="3">指定</el-radio>
<el-radio-button label="0">任意值</el-radio-button>
<el-radio-button label="1">范围</el-radio-button>
<el-radio-button label="2">间隔</el-radio-button>
<el-radio-button label="3">指定</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="范围" v-if="value.second.type == 1">
Expand Down Expand Up @@ -77,10 +77,10 @@
<el-form>
<el-form-item label="类型">
<el-radio-group v-model="value.minute.type">
<el-radio border label="0">任意值</el-radio>
<el-radio border label="1">范围</el-radio>
<el-radio border label="2">间隔</el-radio>
<el-radio border label="3">指定</el-radio>
<el-radio-button label="0">任意值</el-radio-button>
<el-radio-button label="1">范围</el-radio-button>
<el-radio-button label="2">间隔</el-radio-button>
<el-radio-button label="3">指定</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="范围" v-if="value.minute.type == 1">
Expand Down Expand Up @@ -111,10 +111,10 @@
<el-form>
<el-form-item label="类型">
<el-radio-group v-model="value.hour.type">
<el-radio border label="0">任意值</el-radio>
<el-radio border label="1">范围</el-radio>
<el-radio border label="2">间隔</el-radio>
<el-radio border label="3">指定</el-radio>
<el-radio-button label="0">任意值</el-radio-button>
<el-radio-button label="1">范围</el-radio-button>
<el-radio-button label="2">间隔</el-radio-button>
<el-radio-button label="3">指定</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="范围" v-if="value.hour.type == 1">
Expand Down Expand Up @@ -145,12 +145,12 @@
<el-form>
<el-form-item label="类型">
<el-radio-group v-model="value.day.type">
<el-radio border label="0">任意值</el-radio>
<el-radio border label="1">范围</el-radio>
<el-radio border label="2">间隔</el-radio>
<el-radio border label="3">指定</el-radio>
<el-radio border label="4">本月最后一天</el-radio>
<el-radio border label="5">不指定</el-radio>
<el-radio-button label="0">任意值</el-radio-button>
<el-radio-button label="1">范围</el-radio-button>
<el-radio-button label="2">间隔</el-radio-button>
<el-radio-button label="3">指定</el-radio-button>
<el-radio-button label="4">本月最后一天</el-radio-button>
<el-radio-button label="5">不指定</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="范围" v-if="value.day.type == 1">
Expand Down Expand Up @@ -181,10 +181,10 @@
<el-form>
<el-form-item label="类型">
<el-radio-group v-model="value.month.type">
<el-radio border label="0">任意值</el-radio>
<el-radio border label="1">范围</el-radio>
<el-radio border label="2">间隔</el-radio>
<el-radio border label="3">指定</el-radio>
<el-radio-button label="0">任意值</el-radio-button>
<el-radio-button label="1">范围</el-radio-button>
<el-radio-button label="2">间隔</el-radio-button>
<el-radio-button label="3">指定</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="范围" v-if="value.month.type == 1">
Expand Down Expand Up @@ -216,12 +216,12 @@
<el-form>
<el-form-item label="类型">
<el-radio-group v-model="value.week.type">
<el-radio border label="0">任意值</el-radio>
<el-radio border label="1">范围</el-radio>
<el-radio border label="2">间隔</el-radio>
<el-radio border label="3">指定</el-radio>
<el-radio border label="4">本月最后一周</el-radio>
<el-radio border label="5">不指定</el-radio>
<el-radio-button label="0">任意值</el-radio-button>
<el-radio-button label="1">范围</el-radio-button>
<el-radio-button label="2">间隔</el-radio-button>
<el-radio-button label="3">指定</el-radio-button>
<el-radio-button label="4">本月最后一周</el-radio-button>
<el-radio-button label="5">不指定</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="范围" v-if="value.week.type == 1">
Expand Down Expand Up @@ -265,11 +265,11 @@
<el-form>
<el-form-item label="类型">
<el-radio-group v-model="value.year.type">
<el-radio border label="-1">忽略</el-radio>
<el-radio border label="0">任意值</el-radio>
<el-radio border label="1">范围</el-radio>
<el-radio border label="2">间隔</el-radio>
<el-radio border label="3">指定</el-radio>
<el-radio-button label="-1">忽略</el-radio-button>
<el-radio-button label="0">任意值</el-radio-button>
<el-radio-button label="1">范围</el-radio-button>
<el-radio-button label="2">间隔</el-radio-button>
<el-radio-button label="3">指定</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="范围" v-if="value.year.type == 1">
Expand Down
8 changes: 5 additions & 3 deletions src/components/DictTag/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,18 @@
<template>
<div>
<template v-for="(item, index) in props.options">
<template v-if="values.includes(item.value)">
<span v-if="item.elTagType == 'default' || item.elTagType == ''" :key="index" :index="index" :class="item.elTagClass">{{ item.label }}</span>
<template v-if="values.includes(item.value || item)">
<span v-if="item.elTagType == 'default' || item.elTagType == ''" :key="index" :index="index" :class="item.elTagClass">{{
item.label || item
}}</span>
<el-tag
v-else
:disable-transitions="true"
:key="index * 2"
:index="index"
:type="item.elTagType === 'primary' ? '' : item.elTagType"
:class="item.elTagClass"
>{{ item.label }}</el-tag
>{{ item.label || item }}</el-tag
>
</template>
</template>
Expand Down
Loading

0 comments on commit 3ece22d

Please sign in to comment.