208 lines
7.6 KiB
Vue
208 lines
7.6 KiB
Vue
<template>
|
|
<div v-if="['bgcolor', 'color', 'textsize'].find((x) => x === sideBar)">
|
|
<p class="has-text-right has-text-grey is-italic fs-13">
|
|
Màu sắc sẽ hiển thị theo điều kiện Đúng / Sai, mã lệnh do hệ thống tự sinh
|
|
</p>
|
|
<div class="tabs is-boxed">
|
|
<ul>
|
|
<li v-for="(v, i) in tabs" :key="i" :class="tab.code === v.code ? 'is-active' : ''" @click="tab = v">
|
|
<a>{{ v.name }}</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<template v-if="tab.code === 'expression' && ['bgcolor', 'color', 'textsize'].find((x) => x === sideBar)">
|
|
<template v-if="radio ? radio.code === 'condition' && sideBar === 'bgcolor' : false">
|
|
<div v-for="(v, i) in bgcolorFilter" :key="v.id" class="px-4">
|
|
<FilterOption
|
|
v-bind="{ filterObj: v, filterType: 'color', pagename: pagename, field: openField }"
|
|
:ref="v.id"
|
|
@databack="doConditionFilter($event, 'bgcolor', v.id)"
|
|
/>
|
|
<p class="fs-14 mt-1" :class="currentField.format === 'string' ? 'mb-1' : 'mb-2'">
|
|
<a class="has-text-primary mr-5" @click="addCondition(bgcolorFilter)" v-if="bgcolorFilter.length <= 30">
|
|
Thêm
|
|
</a>
|
|
<a class="has-text-danger" @click="removeCondition(bgcolorFilter, i)" v-if="bgcolorFilter.length > 1">
|
|
Bớt
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</template>
|
|
|
|
<template v-else-if="radio ? radio.code === 'condition' && sideBar === 'color' : false">
|
|
<div v-for="(v, i) in colorFilter" :key="v.id" class="px-4">
|
|
<FilterOption
|
|
v-bind="{ filterObj: v, filterType: 'color', pagename: pagename, field: openField }"
|
|
:ref="v.id"
|
|
@databack="doConditionFilter($event, 'color', v.id)"
|
|
/>
|
|
<p class="fs-14 mt-1" :class="currentField.format === 'string' ? 'mb-1' : 'mb-2'">
|
|
<a class="has-text-primary mr-5" @click="addCondition(colorFilter)" v-if="colorFilter.length <= 30"> Thêm </a>
|
|
<a class="has-text-danger" @click="removeCondition(colorFilter, i)" v-if="colorFilter.length > 1"> Bớt </a>
|
|
</p>
|
|
</div>
|
|
</template>
|
|
|
|
<template v-else-if="radio ? radio.code === 'condition' && sideBar === 'textsize' : false">
|
|
<div v-for="(v, i) in sizeFilter" :key="v.id" class="px-4">
|
|
<FilterOption
|
|
v-bind="{ filterObj: v, filterType: 'size', pagename: pagename, field: openField }"
|
|
:ref="v.id"
|
|
@databack="doConditionFilter($event, 'textsize', v.id)"
|
|
/>
|
|
<p class="fs-14 mt-1" :class="currentField.format === 'string' ? 'mb-1' : 'mb-2'">
|
|
<a class="has-text-primary mr-5" @click="addCondition(sizeFilter)" v-if="sizeFilter.length <= 30"> Thêm </a>
|
|
<a class="has-text-danger" @click="removeCondition(sizeFilter, i)" v-if="sizeFilter.length > 1"> Bớt </a>
|
|
</p>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
<template v-else-if="tab.code === 'script' && ['bgcolor', 'color', 'textsize'].find((x) => x === sideBar)">
|
|
<p class="my-4 mx-4">
|
|
<a @click="copyContent(script ? script : '')" class="mr-6">
|
|
<span class="icon-text">
|
|
<SvgIcon class="mr-2" v-bind="{ name: 'copy.svg', type: 'primary', siz: 18 }"></SvgIcon>
|
|
<span class="fs-16">Copy</span>
|
|
</span>
|
|
</a>
|
|
<a @click="paste()" class="mr-6">
|
|
<span class="icon-text">
|
|
<SvgIcon class="mr-2" v-bind="{ name: 'pen1.svg', type: 'primary', siz: 18 }"></SvgIcon>
|
|
<span class="fs-16">Paste</span>
|
|
</span>
|
|
</a>
|
|
</p>
|
|
<div class="mx-4">
|
|
<textarea class="textarea fs-14" rows="8" v-model="script" @change="checkScript()" @dblclick="doCheck"></textarea>
|
|
</div>
|
|
<p class="mt-5 mx-4">
|
|
<span class="icon-text fsb-18">
|
|
Replace
|
|
<SvgIcon v-bind="{ name: 'right.svg', type: 'dark', size: 22 }"></SvgIcon>
|
|
</span>
|
|
</p>
|
|
<div class="field is-grouped mx-4 mt-4">
|
|
<div class="control">
|
|
<p class="fsb-14 mb-1">Đoạn text</p>
|
|
<input class="input" type="text" placeholder="" v-model="source" />
|
|
</div>
|
|
<div class="control">
|
|
<p class="fsb-14 mb-1">Thay bằng</p>
|
|
<input class="input" type="text" placeholder="" v-model="target" />
|
|
</div>
|
|
<div class="control pl-5">
|
|
<button class="button is-primary is-rounded is-outlined mt-5" @click="replace()">Replace</button>
|
|
</div>
|
|
</div>
|
|
<p class="mt-5 pt-2 mx-4">
|
|
<span class="icon-text fsb-18">
|
|
Thay đổi màu
|
|
<SvgIcon v-bind="{ name: 'right.svg', type: 'dark', size: 22 }"></SvgIcon>
|
|
</span>
|
|
</p>
|
|
<p class="mx-4 mt-4"><button class="button is-primary is-rounded" @click="changeScript()">Cập nhật</button></p>
|
|
</template>
|
|
<TableOption v-bind="{ pagename: pagename }" v-else-if="sideBar === 'option'"> </TableOption>
|
|
<CreateTemplate v-else-if="sideBar === 'template'" v-bind="{ pagename: pagename, field: openField }">
|
|
</CreateTemplate>
|
|
</template>
|
|
<script setup>
|
|
// FilterOption: () => import("@/components/datatable/FilterOption"),
|
|
// TableOption: () => import("@/components/datatable/TableOption"),
|
|
//CreateTemplate: () => import("@/components/datatable/CreateTemplate")
|
|
import CreateTemplate from "~/components/datatable/CreateTemplate";
|
|
const { $id, $copy, $empty, $stripHtml } = useNuxtApp();
|
|
var props = defineProps({
|
|
event: Object,
|
|
currentField: Object,
|
|
pagename: String,
|
|
});
|
|
var currentField = props.currentField;
|
|
var event = props.event;
|
|
var openField = {};
|
|
var bgcolorFilter = [];
|
|
var colorFilter = [];
|
|
var sizeFilter = [];
|
|
var sideBar = undefined;
|
|
var script = undefined;
|
|
var radio = undefined;
|
|
var tabs = [
|
|
{ code: "expression", name: "Biểu thức" },
|
|
{ code: "script", name: "Mã lệnh" },
|
|
];
|
|
var tab = { code: "expression", name: "Biểu thức" };
|
|
var source = undefined;
|
|
var target = $copy(currentField.name);
|
|
|
|
const initData = function () {
|
|
openField = event.field;
|
|
sideBar = event.name;
|
|
script = event.script;
|
|
radio = event.radio;
|
|
let field = event.field;
|
|
bgcolorFilter = [{ id: $id() }];
|
|
if (field.bgcolor) {
|
|
if (Array.isArray(field.bgcolor)) bgcolorFilter = $copy(field.bgcolor);
|
|
}
|
|
colorFilter = [{ id: $id() }];
|
|
if (field.color) {
|
|
if (Array.isArray(field.color)) colorFilter = $copy(field.color);
|
|
}
|
|
sizeFilter = [{ id: $id() }];
|
|
if (field.textsize) {
|
|
if (Array.isArray(field.textsize)) sizeFilter = field.textsize;
|
|
}
|
|
};
|
|
|
|
const doCheck = function () {
|
|
let text = window.getSelection().toString();
|
|
if ($empty(text)) return;
|
|
source = text;
|
|
};
|
|
const replace = function () {
|
|
if ($empty(script)) return;
|
|
script = script.replaceAll(source, target);
|
|
};
|
|
const paste = async function () {
|
|
script = await navigator.clipboard.readText();
|
|
};
|
|
const addCondition = function (arr) {
|
|
arr.push({ id: $id() });
|
|
};
|
|
const removeCondition = function (arr, i) {
|
|
$delete(arr, i);
|
|
};
|
|
const copyContent = function (value) {
|
|
$copyToClipboard(value);
|
|
};
|
|
const checkScript = function () {
|
|
if ($empty(script)) return;
|
|
try {
|
|
JSON.parse(script);
|
|
} catch (e) {
|
|
return false;
|
|
}
|
|
return true;
|
|
};
|
|
const changeScript = function () {
|
|
if (!checkScript()) return;
|
|
let copy = $copy(openField);
|
|
copy[sideBar] = JSON.parse(script);
|
|
$emit("modalevent", { name: "updatefields", data: copy });
|
|
};
|
|
const doConditionFilter = function (v, type, id) {
|
|
v.id = id;
|
|
let copy = $copy(currentField);
|
|
if (copy[type] ? Array.isArray(copy[type]) : false) {
|
|
let idx = copy[type].findIndex((x) => x.id === id);
|
|
idx >= 0 ? (copy[type][idx] = v) : copy[type].push(v);
|
|
} else copy[type] = [v];
|
|
$emit("modalevent", { name: "updatefields", data: copy });
|
|
};
|
|
initData();
|
|
console.log(sideBar);
|
|
</script>
|