327 lines
8.6 KiB
Vue
327 lines
8.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 }"
|
|
v-else-if="sideBar === 'option'"
|
|
>
|
|
</TableOption>
|
|
<CreateTemplate
|
|
v-else-if="sideBar === 'template'"
|
|
v-bind="{ 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();
|
|
</script>
|