122 lines
2.6 KiB
Vue
122 lines
2.6 KiB
Vue
<template>
|
||
<view class="dict">
|
||
<view>字典管理</view>
|
||
<view class="dict-main">
|
||
<input
|
||
class="dict-input"
|
||
v-model="dictText"
|
||
placeholder=""
|
||
@keydown.enter.native="searchDict"
|
||
placeholder-class="input-placeholder"
|
||
/>
|
||
<view class="dict-but">
|
||
<button type="primary" @click="searchDict" size="mini">
|
||
搜索
|
||
</button></view
|
||
>
|
||
</view>
|
||
<view
|
||
>{{ dictValue }} <text class="dict-copy" @click="copy">复制</text
|
||
><text class="dict-copy" @click="clearDictValue">清空</text></view
|
||
>
|
||
</view>
|
||
<view class="dict-card-list">
|
||
<block v-for="(v, i) in dictLists">
|
||
<view class="dict-card-main">
|
||
<view
|
||
>type：{{ v.type }}
|
||
<text class="dict-add" @click="addDict(v.type)">添加</text></view
|
||
>
|
||
<view>value：{{ v.value }}</view>
|
||
<view>text：{{ v.text }}</view>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { reactive, ref, watch } from "vue";
|
||
import { filterDicts } from "@/hooks/dict";
|
||
|
||
const dictText = ref("");
|
||
const dictLists = ref([]);
|
||
let dictValue = ref([]);
|
||
function searchDict() {
|
||
dictLists.value = filterDicts(dictText.value);
|
||
}
|
||
function addDict(v) {
|
||
dictValue.value.push(v);
|
||
}
|
||
function copy() {
|
||
uni.setClipboardData({
|
||
data: toStringDictType(),
|
||
});
|
||
}
|
||
function toStringDictType() {
|
||
let text = "";
|
||
dictValue.value.forEach((v, i) => {
|
||
if (i != dictValue.value.length - 1) {
|
||
text += `"${v}",`;
|
||
} else {
|
||
text += `"${v}"`;
|
||
}
|
||
});
|
||
return `[${text}]`;
|
||
}
|
||
function clearDictValue() {
|
||
dictValue.value = [];
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.dict {
|
||
width: 50vw;
|
||
margin: auto;
|
||
.dict-main {
|
||
display: flex;
|
||
align-items: center;
|
||
.dict-input {
|
||
width: 180px;
|
||
padding: 2px 0;
|
||
margin: 10px 0;
|
||
border: 1px solid #ccc;
|
||
border-radius: 5px;
|
||
text-indent: 1em;
|
||
}
|
||
.dict-but {
|
||
margin-left: 10px;
|
||
transform: translateY(1px);
|
||
}
|
||
}
|
||
.dict-copy {
|
||
font-size: 12px;
|
||
border: 0.5px solid #ccc;
|
||
background-color: skyblue;
|
||
border-radius: 2px;
|
||
padding: 0 5px;
|
||
margin: 0 5px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
.dict-card-list {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
.dict-card-main {
|
||
padding: 10px;
|
||
margin: 10px;
|
||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
|
||
view {
|
||
padding: 5px;
|
||
}
|
||
.dict-add {
|
||
font-size: 12px;
|
||
border: 0.5px solid #ccc;
|
||
background-color: skyblue;
|
||
border-radius: 2px;
|
||
padding: 0 5px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
</style>
|