管理和服务分离
This commit is contained in:
simple321vip
@@ -43,24 +43,6 @@ let blog_tab = reactive<Tab>(<Tab>{
|
||||
const data_type_list = reactive<BlogType[]>([])
|
||||
let checkedIndex = ref<number>(0)
|
||||
|
||||
data_type_list.push({
|
||||
blog_type_id: '1',
|
||||
blog_type_name: 'xxx',
|
||||
blog_list: []
|
||||
})
|
||||
// data_type_list[0].blog_list.push({})
|
||||
data_type_list.push({
|
||||
blog_type_id: '2',
|
||||
blog_type_name: 'yyy',
|
||||
blog_list: []
|
||||
})
|
||||
data_type_list.push({
|
||||
blog_type_id: '3',
|
||||
blog_type_name: 'zzz',
|
||||
blog_list: []
|
||||
})
|
||||
|
||||
|
||||
const blog_type_list = reactive<BlogType[]>([])
|
||||
get_user_blogs({}).then(response => {
|
||||
|
||||
@@ -87,8 +69,11 @@ const handleCheck = (id: string) => {
|
||||
return type_tab.id == id
|
||||
}
|
||||
const saveType = (params: any) => {
|
||||
console.log(params)
|
||||
update_blog_type(1).then(response => {
|
||||
const query = {
|
||||
blog_type_id: params.id,
|
||||
blog_type_name: params.name
|
||||
}
|
||||
update_blog_type(query).then(response => {
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
@@ -1,122 +0,0 @@
|
||||
<template>
|
||||
<div style="display: flex; align-items:center;">
|
||||
<el-input
|
||||
class="text_input"
|
||||
v-model="input.in"
|
||||
v-on:input="handle(data.from, data.to)"
|
||||
:maxlength="20"
|
||||
placeholder="请输入"
|
||||
/>
|
||||
<el-icon :size="10" style="margin-left: 10px;">
|
||||
<Right />
|
||||
</el-icon>
|
||||
<div class="text_output">
|
||||
<span>{{ input.out }}</span>
|
||||
<el-icon :size="20" @click="copyNumber" class="click-icon">
|
||||
<CopyDocument />
|
||||
</el-icon>
|
||||
</div>
|
||||
|
||||
<el-tag
|
||||
class="ml-2 click-icon"
|
||||
v-show="isPlus"
|
||||
type="success"
|
||||
@click="clickPlus"
|
||||
:data-clipboard-text="input.out"
|
||||
>+</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { CopyDocument, Right } from "@element-plus/icons-vue";
|
||||
import { reactive } from 'vue'
|
||||
import copy from 'copy-to-clipboard';
|
||||
import { h } from 'vue'
|
||||
import { ElNotification } from 'element-plus'
|
||||
|
||||
// 从父组件接受参数
|
||||
type Props = {
|
||||
data: {
|
||||
from: number,
|
||||
to: number
|
||||
},
|
||||
isPlus: boolean
|
||||
}
|
||||
const tt = defineProps<Props>()
|
||||
|
||||
// 对输入框进行响应式
|
||||
let input = reactive({
|
||||
in: '',
|
||||
out: ''
|
||||
})
|
||||
|
||||
// 进制转换控制器
|
||||
const handle = (from: number, to: number) => {
|
||||
if (from == 10) {
|
||||
convert10to(input.in, to)
|
||||
}
|
||||
if (to == 10) {
|
||||
input.out = parseInt(input.in, from) + ""
|
||||
}
|
||||
}
|
||||
|
||||
// 进制转换函数1
|
||||
const convert10to = (value: number | string, binary: number) => {
|
||||
if (value == '' || value == undefined) {
|
||||
input.out = ''
|
||||
return
|
||||
}
|
||||
let space = ' '
|
||||
// if (false == false) {
|
||||
// space = ''
|
||||
// }
|
||||
const tmp = Number(value).toString(binary)
|
||||
let firstByte = tmp.length > 3 ? tmp.substring(0, 4) : tmp.substring(0, tmp.length)
|
||||
for (let a = 4; a < tmp.length; a = a + 4) {
|
||||
firstByte = tmp.substring(a, a + 4) + space + firstByte
|
||||
}
|
||||
input.out = firstByte
|
||||
}
|
||||
|
||||
// 复制转换成功的数值，并提示 复制成功 信息
|
||||
const copyNumber = () => {
|
||||
copy(input.out)
|
||||
ElNotification({
|
||||
title: '',
|
||||
message: h('i', { style: 'color: teal' }, '复制成功'),
|
||||
})
|
||||
}
|
||||
|
||||
// 通知父组件增加一行，并提示 增加成功 信息
|
||||
const emit = defineEmits(['on-clickplus'])
|
||||
const clickPlus = () => {
|
||||
emit('on-clickplus')
|
||||
ElNotification({
|
||||
title: '',
|
||||
message: h('i', { style: 'color: teal' }, '增加成功'),
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.text_input {
|
||||
width: 300px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.text_output {
|
||||
width: 300px;
|
||||
border-radius: 4px;
|
||||
height: 30px;
|
||||
border: 1px solid rgba(151, 151, 151, 0.3);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-left: 10px;
|
||||
}
|
||||
span {
|
||||
font-size: 12px;
|
||||
}
|
||||
.click-icon {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
@@ -1,29 +0,0 @@
|
||||
<template>
|
||||
<div class="frame_box">
|
||||
<unit class="unit_one"></unit>
|
||||
</div>
|
||||
<div class="unit_box" v-for="(index) in total">
|
||||
<unit class="unit_one"></unit>
|
||||
</div>
|
||||
<el-tag class="ml-2 click-icon" type="success" @click="add">增加一组</el-tag>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import unit from './unit.vue'
|
||||
let total = ref(0)
|
||||
const add = () => {
|
||||
total.value++
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.unit_box {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
border-top: 1px solid rgba(151, 151, 151, 0.3);
|
||||
border-bottom: 1px solid rgba(151, 151, 151, 0.3);
|
||||
}
|
||||
</style>
|
||||
@@ -1,39 +0,0 @@
|
||||
<template>
|
||||
<div class="tools">
|
||||
<!-- <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
|
||||
<el-tab-pane label="User" name="first">User</el-tab-pane>
|
||||
<el-tab-pane label="Config" name="second">Config</el-tab-pane>
|
||||
<el-tab-pane label="Role" name="third">Role</el-tab-pane>
|
||||
<el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
|
||||
</el-tabs>-->
|
||||
<el-tabs type="border-card">
|
||||
<el-tab-pane label="进制转换">
|
||||
<frame />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="JSON格式化">JSON格式化</el-tab-pane>
|
||||
<el-tab-pane label="颜色识别">颜色识别</el-tab-pane>
|
||||
<el-tab-pane label="SQL格式化">SQL格式化</el-tab-pane>
|
||||
<el-tab-pane label="SQL生成器">SQL生成器</el-tab-pane>
|
||||
<el-tab-pane label="XML格式化">XML生成器</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import type { TabsPaneContext } from 'element-plus'
|
||||
import frame from './frame.vue'
|
||||
const activeName = ref('first')
|
||||
|
||||
const handleClick = (tab: TabsPaneContext, event: Event) => {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.demo-tabs > .el-tabs__content {
|
||||
padding: 32px;
|
||||
color: #6b778c;
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
@@ -1,84 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="unit_tag" style="margin-bottom: 10px;">
|
||||
<el-tag class="ml-2">from</el-tag>
|
||||
<div :class="'ml-1-' + index" v-for="(item, index) in colorup.list">
|
||||
<el-tag class="ml-2" :style="item.style" style @click="onChange(item.binary, item.flg, index)">{{ item.text }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="unit_tag" style="margin-bottom: 10px; border-color: red;">
|
||||
<el-tag class="ml-2" style="width: 47.625px">to</el-tag>
|
||||
<div :class="'ml-1-' + index" v-for="(item, index) in colordown.list">
|
||||
<el-tag class="ml-2" :style="item.style" @click="onChange(item.binary, item.flg, index)">{{ item.text }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="test" style="margin-bottom: 10px; border-color: red;" v-for="(index) in total">
|
||||
<Cal @on-clickplus="add" :data="t2t" :isPlus="total == index"></Cal>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { reactive } from 'vue'
|
||||
import Cal from './cal.vue'
|
||||
import { from_static_data, to_static_data } from '../../const/const'
|
||||
// 初期默认只有一个转换框，点击+号时增加一个转换框
|
||||
let total = ref(1)
|
||||
const add = () => {
|
||||
total.value++
|
||||
}
|
||||
|
||||
|
||||
// 相应式的 from 和 to，
|
||||
const t2t = reactive({
|
||||
from: 10,
|
||||
to: 2
|
||||
})
|
||||
|
||||
const colorup = reactive(JSON.parse(JSON.stringify(from_static_data)))
|
||||
colorup.list[2].style = 'background-color: gold'
|
||||
const colordown = reactive(JSON.parse(JSON.stringify(to_static_data)))
|
||||
colordown.list[0].style = 'background-color: gold'
|
||||
|
||||
//
|
||||
const onChange = (binary: number, isFrom: boolean, index: number) => {
|
||||
if (isFrom) {
|
||||
t2t.from = binary
|
||||
colorup.list.forEach((value: any, i: any) => {
|
||||
if (i == index) {
|
||||
value.style = 'background-color: gold'
|
||||
} else {
|
||||
value.style = 'background-color: #F8F8FF'
|
||||
}
|
||||
})
|
||||
|
||||
} else {
|
||||
t2t.to = binary
|
||||
colordown.list.forEach((value: any, i: any) => {
|
||||
if (i == index) {
|
||||
value.style = 'background-color: gold'
|
||||
} else {
|
||||
value.style = 'background-color: #F8F8FF'
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.unit_tag {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.test {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.ml-2 {
|
||||
margin-right: 10px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user