541 lines
17 KiB
Vue
541 lines
17 KiB
Vue
<template>
|
|
<span class="tooltip">
|
|
<a
|
|
class="mr-4"
|
|
@click="checkFilter() ? false : $emit('modalevent', { name: 'dosort', data: 'az' })"
|
|
>
|
|
<SvgIcon
|
|
v-bind="{ name: 'az.svg', type: checkFilter() ? 'grey' : 'primary', size: 22 }"
|
|
></SvgIcon>
|
|
</a>
|
|
<span
|
|
class="tooltiptext"
|
|
style="top: 100%; bottom: unset; min-width: max-content; left: 25px"
|
|
v-html="'Sắp xếp tăng dần'"
|
|
></span>
|
|
</span>
|
|
<span class="tooltip">
|
|
<a
|
|
class="mr-4"
|
|
@click="checkFilter() ? false : $emit('modalevent', { name: 'dosort', data: 'za' })"
|
|
>
|
|
<SvgIcon
|
|
v-bind="{ name: 'az.svg', type: checkFilter() ? 'grey' : 'primary', size: 22 }"
|
|
></SvgIcon>
|
|
</a>
|
|
<span
|
|
class="tooltiptext"
|
|
style="top: 100%; bottom: unset; min-width: max-content; left: 25px"
|
|
>Sắp xếp giảm dần</span
|
|
>
|
|
</span>
|
|
<span class="tooltip">
|
|
<a class="mr-4" @click="moveLeft()">
|
|
<SvgIcon v-bind="{ name: 'left5.png', type: 'primary', size: 22 }"></SvgIcon>
|
|
</a>
|
|
<span
|
|
class="tooltiptext"
|
|
style="top: 100%; bottom: unset; min-width: max-content; left: 25px"
|
|
>Chuyển cột sang trái</span
|
|
>
|
|
</span>
|
|
<span class="tooltip">
|
|
<a class="mr-4" @click="moveRight()">
|
|
<SvgIcon v-bind="{ name: 'right5.png', type: 'primary', size: 22 }"></SvgIcon>
|
|
</a>
|
|
<span
|
|
class="tooltiptext"
|
|
style="top: 100%; bottom: unset; min-width: max-content; left: 25px"
|
|
>Chuyển cột sang phải</span
|
|
>
|
|
</span>
|
|
<span class="tooltip">
|
|
<a class="mr-4" @click="resizeWidth()">
|
|
<SvgIcon v-bind="{ name: 'thick.svg', type: 'primary', size: 22 }"></SvgIcon>
|
|
</a>
|
|
<span
|
|
class="tooltiptext"
|
|
style="top: 100%; bottom: unset; min-width: max-content; left: 25px"
|
|
>Tăng độ rộng cột</span
|
|
>
|
|
</span>
|
|
<span class="tooltip">
|
|
<a class="mr-4" @click="resizeWidth(true)">
|
|
<SvgIcon v-bind="{ name: 'thin.svg', type: 'primary', size: 23 }"></SvgIcon>
|
|
</a>
|
|
<span
|
|
class="tooltiptext"
|
|
style="top: 100%; bottom: unset; min-width: max-content; left: 25px"
|
|
>Giảm độ rộng cột</span
|
|
>
|
|
</span>
|
|
<span class="tooltip">
|
|
<a class="mr-4" @click="hideField()">
|
|
<SvgIcon v-bind="{ name: 'eye-off.svg', type: 'primary', size: 23 }"></SvgIcon>
|
|
</a>
|
|
<span
|
|
class="tooltiptext"
|
|
style="top: 100%; bottom: unset; min-width: max-content; left: 25px"
|
|
>Ẩn cột</span
|
|
>
|
|
</span>
|
|
<!-- <template v-if="store.login ? store.login.is_admin : false"> -->
|
|
<span class="tooltip">
|
|
<a class="mr-4" @click="currentField.mandatory ? false : doRemove()">
|
|
<SvgIcon v-bind="{ name: 'bin.svg', type: 'primary', size: 23 }"></SvgIcon>
|
|
</a>
|
|
<span
|
|
class="tooltiptext"
|
|
style="top: 100%; bottom: unset; min-width: max-content; left: 25px"
|
|
>Xóa cột</span
|
|
>
|
|
</span>
|
|
<span class="tooltip">
|
|
<a
|
|
class="mr-4"
|
|
:class="currentField.format === 'number' ? null : 'has-text-grey-light'"
|
|
@click="
|
|
currentField.format === 'number'
|
|
? $emit('modalevent', { name: 'copyfield', data: currentField })
|
|
: false
|
|
"
|
|
>
|
|
<SvgIcon v-bind="{ name: 'copy.svg', type: 'primary', size: 22 }"></SvgIcon>
|
|
</a>
|
|
<span
|
|
class="tooltiptext"
|
|
style="top: 100%; bottom: unset; min-width: max-content; left: 25px"
|
|
>Sao chép cột</span
|
|
>
|
|
</span>
|
|
<span class="tooltip">
|
|
<a class="mr-4" @click="fieldList()">
|
|
<SvgIcon v-bind="{ name: 'menu4.png', type: 'primary', size: 22 }"></SvgIcon>
|
|
</a>
|
|
<span
|
|
class="tooltiptext"
|
|
style="top: 100%; bottom: unset; min-width: max-content; left: 25px"
|
|
>Danh sách cột</span
|
|
>
|
|
</span>
|
|
<span class="tooltip">
|
|
<a class="mr-4" @click="createField()">
|
|
<SvgIcon v-bind="{ name: 'add.png', type: 'primary', size: 22 }"></SvgIcon>
|
|
</a>
|
|
<span
|
|
class="tooltiptext"
|
|
style="top: 100%; bottom: unset; min-width: max-content; left: 25px"
|
|
>Tạo cột mới</span
|
|
>
|
|
</span>
|
|
<span class="tooltip">
|
|
<a class="mr-4" @click="tableOption()">
|
|
<SvgIcon v-bind="{ name: 'more.svg', type: 'primary', size: 22 }"></SvgIcon>
|
|
</a>
|
|
<span
|
|
class="tooltiptext"
|
|
style="top: 100%; bottom: unset; min-width: max-content; left: 25px"
|
|
>Tùy chọn bảng</span
|
|
>
|
|
</span>
|
|
<span class="tooltip">
|
|
<a class="mr-4" @click="saveSetting()">
|
|
<SvgIcon v-bind="{ name: 'save.svg', type: 'primary', size: 22 }"></SvgIcon>
|
|
</a>
|
|
<span
|
|
class="tooltiptext"
|
|
style="top: 100%; bottom: unset; min-width: max-content; left: 25px"
|
|
>Lưu thiết lập</span
|
|
>
|
|
</span>
|
|
<!-- </template> -->
|
|
<div class="panel-tabs mb-2">
|
|
<a
|
|
v-for="(v, i) in getMenu().filter((x) =>
|
|
currentField.format === 'number'
|
|
? currentField.formula
|
|
? true
|
|
: x.code !== 'formula'
|
|
: !['filter', 'formula'].find((y) => y === x.code)
|
|
)"
|
|
:key="i"
|
|
:class="selectTab.code === v.code ? 'is-active' : 'has-text-primary'"
|
|
@click="changeTab(v)"
|
|
>
|
|
{{ v.name }}
|
|
</a>
|
|
</div>
|
|
<div v-if="currentTab === 'detail'">
|
|
<p class="fs-14 mt-3">
|
|
<strong> Tên trường: </strong> {{ currentField.name }}
|
|
<a @click="copyContent(currentField.name)">
|
|
<span class="tooltip">
|
|
<SvgIcon
|
|
class="ml-1"
|
|
v-bind="{ name: 'copy.svg', type: 'primary', size: 16 }"
|
|
></SvgIcon>
|
|
<span
|
|
class="tooltiptext"
|
|
style="top: 100%; bottom: unset; min-width: max-content; left: 25px"
|
|
>Copy</span
|
|
>
|
|
</span>
|
|
</a>
|
|
</p>
|
|
<label class="label fs-14 mt-3">Mô tả<span class="has-text-danger"> *</span></label>
|
|
<div class="field has-addons">
|
|
<div class="control is-expanded">
|
|
<input
|
|
class="input fs-14"
|
|
type="text"
|
|
@change="changeLabel($event.target.value)"
|
|
v-model="label"
|
|
/>
|
|
</div>
|
|
<div class="control">
|
|
<button class="button" @click="editLabel()">
|
|
<SvgIcon v-bind="{ name: 'pen.svg', type: 'dark', size: 19 }"></SvgIcon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<p class="help is-danger" v-if="errors.find((v) => v.name === 'label')">
|
|
{{ errors.find((v) => v.name === "label").msg }}
|
|
</p>
|
|
<div class="field mt-3">
|
|
<label class="label fs-14"
|
|
>Kiểu dữ liệu<span class="has-text-danger"> * </span></label
|
|
>
|
|
<div class="control fs-14">
|
|
<span class="mr-4" v-for="(v, i) in datatype">
|
|
<span class="icon-text" v-if="radioType === v">
|
|
<SvgIcon
|
|
v-bind="{ name: 'radio-checked.svg', type: 'gray', size: 22 }"
|
|
></SvgIcon>
|
|
</span>
|
|
{{ v.name }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="field is-horizontal" v-if="currentField.format === 'number'">
|
|
<div class="field-body">
|
|
<div class="field">
|
|
<label class="label fs-14"
|
|
>Đơn vị <span class="has-text-danger"> * </span>
|
|
</label>
|
|
<div class="control">
|
|
<SearchBox
|
|
v-bind="{
|
|
vdata: moneyunit,
|
|
field: 'name',
|
|
column: ['name'],
|
|
first: true,
|
|
position: 'is-top-left',
|
|
}"
|
|
@option="selected('_account', $event)"
|
|
></SearchBox>
|
|
</div>
|
|
<p class="help has-text-danger" v-if="errors.find((v) => v.name === 'unit')">
|
|
{{ errors.find((v) => v.name === "unit").msg }}
|
|
</p>
|
|
</div>
|
|
<div class="field is-narrow">
|
|
<label class="label fs-14">Phần thập phân</label>
|
|
<div class="control">
|
|
<input
|
|
class="input"
|
|
type="text"
|
|
placeholder=""
|
|
v-model="decimal"
|
|
@input="changeDecimal($event.target.value)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="field is-horizontal mt-3">
|
|
<div class="field-body">
|
|
<div class="field">
|
|
<label class="label fs-14">Định dạng nâng cao</label>
|
|
<p class="control fs-14">
|
|
<span
|
|
class="mr-4"
|
|
v-for="(v, i) in colorchoice.filter((v) => v.code !== 'condition')"
|
|
>
|
|
<a class="icon-text" @click="changeTemplate(v)">
|
|
<SvgIcon
|
|
v-bind="{
|
|
name: `radio-${radioTemplate === v.code ? '' : 'un'}checked.svg`,
|
|
type: 'gray',
|
|
size: 22,
|
|
}"
|
|
>
|
|
</SvgIcon>
|
|
</a>
|
|
{{ v.name }}
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="mt-3" v-if="radioTemplate === 'option'">
|
|
<button class="button is-primary is-small has-text-white" @click="showSidebar()">
|
|
<span class="fs-14">{{
|
|
`${currentField.template ? "Sửa" : "Tạo"} định dạng`
|
|
}}</span>
|
|
</button>
|
|
</p>
|
|
</div>
|
|
<div v-else-if="currentTab === 'value'">
|
|
<ScrollBox
|
|
v-bind="{
|
|
data: props.filterData,
|
|
name: props.field.name,
|
|
maxheight: '380px',
|
|
perpage: 20,
|
|
}"
|
|
@selected="doSelect"
|
|
/>
|
|
</div>
|
|
<Modal
|
|
v-bind="showmodal"
|
|
v-if="showmodal"
|
|
@label="changeLabel"
|
|
@updatefields="updateFields"
|
|
@close="close"
|
|
></Modal>
|
|
</template>
|
|
<script setup>
|
|
import { useStore } from "@/stores/index";
|
|
import ScrollBox from "~/components/datatable/ScrollBox";
|
|
const store = useStore();
|
|
const {
|
|
$copy,
|
|
$stripHtml,
|
|
$clone,
|
|
$arrayMove,
|
|
$snackbar,
|
|
$copyToClipboard,
|
|
} = useNuxtApp();
|
|
var props = defineProps({
|
|
pagename: String,
|
|
field: Object,
|
|
filters: Object,
|
|
filterData: Object,
|
|
width: String,
|
|
});
|
|
const emit = defineEmits(["modalevent", "changepos", "close"]);
|
|
var colorchoice = store.colorchoice;
|
|
var errors = [];
|
|
var currentTab = ref("value");
|
|
var currentField = $copy(props.field);
|
|
var pagedata = store[props.pagename];
|
|
var fields = [];
|
|
var label = currentField.label;
|
|
var showmodal = ref();
|
|
const checkFilter = function () {};
|
|
const getMenu = function () {
|
|
let field = currentField;
|
|
field.disable = "display,tooltip";
|
|
let arr = field.disable ? field.disable.split(",") : undefined;
|
|
let array = arr
|
|
? store.menuchoice.filter((v) => arr.findIndex((x) => x === v.code) < 0)
|
|
: store.menuchoice;
|
|
//if (store.login ? !(store.login.is_admin === false) : true) array = [array[0]];
|
|
return array;
|
|
};
|
|
var selectTab = getMenu()[0];
|
|
var datatype = store.datatype;
|
|
var current = 1;
|
|
var value1 = undefined;
|
|
var value2 = undefined;
|
|
var moneyunit = store.moneyunit;
|
|
var radioType = store.datatype.find((v) => v.code === currentField.format);
|
|
var selectUnit =
|
|
currentField.format === "number"
|
|
? moneyunit.find((v) => v.detail === currentField.unit)
|
|
: undefined;
|
|
var bgcolor = undefined;
|
|
var radioBGcolor = colorchoice.find((v) => v.code === "none");
|
|
var color = undefined;
|
|
var radioColor = colorchoice.find((v) => v.code === "none");
|
|
var textsize = undefined;
|
|
var radioSize = colorchoice.find((v) => v.code === "none");
|
|
var minwidth = undefined;
|
|
var radioWidth = colorchoice.find((v) => v.code === "none");
|
|
var radioMaxWidth = colorchoice.find((v) => v.code === "none");
|
|
var maxwidth = undefined;
|
|
var selectAlign = undefined;
|
|
var radioAlign = colorchoice.find((v) => v.code === "none");
|
|
var radioTemplate = ref(
|
|
colorchoice.find((v) => v.code === (currentField.template ? "option" : "none"))["code"]
|
|
);
|
|
var selectPlacement = store.placement.find((v) => v.code === "is-right");
|
|
var selectScheme = store.colorscheme.find((v) => v.code === "is-primary");
|
|
var radioTooltip = store.colorchoice.find((v) => v.code === "none");
|
|
var selectField = undefined;
|
|
var tags = currentField.tags
|
|
? currentField.tags.map((v) => fields.find((x) => x.name === v))
|
|
: [];
|
|
var formula = currentField.formula ? currentField.formula : undefined;
|
|
var decimal = currentField.decimal;
|
|
let shortmenu = store.menuchoice.filter((x) =>
|
|
currentField.format === "number"
|
|
? currentField.formula
|
|
? true
|
|
: x.code !== "formula"
|
|
: !["filter", "formula"].find((y) => y === x.code)
|
|
);
|
|
var selectTab = shortmenu.find((v) => selectTab.code === v.code)
|
|
? selectTab
|
|
: menuchoice.find((v) => v.code === "value");
|
|
var search = undefined;
|
|
// if(selectTab.code==='value') {
|
|
// let self = this
|
|
// setTimeout(function() {self.$refs[currentField.name]? self.$refs[currentField.name].focus() : false}, 50)
|
|
// }
|
|
//==============================================================
|
|
function moveLeft() {
|
|
let copy = $clone(pagedata);
|
|
let i = copy.fields.findIndex((v) => v.name === props.field.name);
|
|
let idx = i - 1 >= 0 ? i - 1 : copy.fields.length - 1;
|
|
$arrayMove(copy.fields, i, idx);
|
|
copy.update = { fields: copy.fields };
|
|
store.commit(props.pagename, copy);
|
|
emit("changepos");
|
|
}
|
|
function moveRight() {
|
|
let copy = $clone(pagedata);
|
|
let i = copy.fields.findIndex((v) => v.name === props.field.name);
|
|
let idx = copy.fields.length - 1 > i ? i + 1 : 0;
|
|
$arrayMove(copy.fields, i, idx);
|
|
copy.update = { fields: copy.fields };
|
|
store.commit(props.pagename, copy);
|
|
emit("changepos");
|
|
}
|
|
function hideField() {
|
|
let copy = $clone(store[props.pagename]);
|
|
let found = copy.fields.find((v) => v.name === props.field.name);
|
|
found.show = false;
|
|
copy.update = { fields: copy.fields };
|
|
store.commit(props.pagename, copy);
|
|
emit("close");
|
|
}
|
|
function doRemove() {
|
|
let copy = $clone(store[props.pagename]);
|
|
let idx = copy.fields.findIndex((v) => v.name === props.field.name);
|
|
copy.fields.splice(idx, 1);
|
|
copy.update = { fields: copy.fields };
|
|
store.commit(props.pagename, copy);
|
|
emit("close");
|
|
}
|
|
function fieldList() {
|
|
showmodal.value = {
|
|
component: "datatable/TableOption",
|
|
vbind: { pagename: props.pagename },
|
|
title: "Danh sách cột",
|
|
width: "50%",
|
|
height: "630px",
|
|
};
|
|
}
|
|
function tableOption() {
|
|
showmodal.value = {
|
|
component: "datatable/TableSetting",
|
|
vbind: { pagename: props.pagename },
|
|
title: "Tùy chọn bảng",
|
|
width: "40%",
|
|
height: "400px",
|
|
};
|
|
}
|
|
const getFields = function () {
|
|
fields = pagedata ? $copy(pagedata.fields) : [];
|
|
fields.map(
|
|
(v) => (v.caption = (v.label ? v.label.indexOf("<") >= 0 : false) ? v.name : v.label)
|
|
);
|
|
};
|
|
const doSelect = function (evt) {
|
|
emit("modalevent", { name: "selected", data: evt[props.field.name] });
|
|
};
|
|
const changeLabel = function (text) {
|
|
currentField.label = text;
|
|
updateFields(currentField);
|
|
};
|
|
function editLabel() {
|
|
showmodal.value = {
|
|
component: "datatable/EditLabel",
|
|
width: "500px",
|
|
height: "300px",
|
|
vbind: { label: label },
|
|
};
|
|
}
|
|
const changeTemplate = function (v) {
|
|
radioTemplate.value = v.code;
|
|
let copy = $copy(currentField);
|
|
copy.template = v.code;
|
|
updateFields(copy);
|
|
};
|
|
function createField() {
|
|
showmodal.value = {
|
|
component: "datatable/NewField",
|
|
vbind: { pagename: props.pagename },
|
|
title: "Tạo cột mới",
|
|
width: "50%",
|
|
height: "630px",
|
|
};
|
|
}
|
|
function copyContent(value) {
|
|
$copyToClipboard(value);
|
|
}
|
|
function close() {
|
|
showmodal.value = undefined;
|
|
}
|
|
const updateFields = function (field, type) {
|
|
let copy = $clone(store[props.pagename]);
|
|
let idx = copy.fields.findIndex((v) => v.name === field.name);
|
|
copy.fields[idx] = field;
|
|
store.commit(props.pagename, copy);
|
|
};
|
|
const changeTab = function (v) {
|
|
currentTab.value = v.code;
|
|
selectTab = v;
|
|
};
|
|
const saveSetting = function () {
|
|
showmodal.value = {
|
|
component: "datatable/MenuSave",
|
|
vbind: { pagename: props.pagename, classify: 4 },
|
|
title: "Lưu thiết lập",
|
|
width: "500px",
|
|
height: "400px",
|
|
};
|
|
};
|
|
const showSidebar = function () {
|
|
let event = { name: "template", field: currentField };
|
|
let title = "Danh sách cột";
|
|
if (event.name === "bgcolor")
|
|
title = `Đổi màu nền: ${event.field.name} / ${$stripHtml(event.field.label, 30)}`;
|
|
else if (event.name === "color")
|
|
title = `Đổi màu chữ: ${event.field.name} / ${$stripHtml(event.field.label, 30)}`;
|
|
else if (event.name === "template")
|
|
title = `Định dạng nâng cao: ${$stripHtml(event.field.label, 30)}`;
|
|
showmodal.value = {
|
|
component: "datatable/FormatOption",
|
|
vbind: { event: event, currentField: currentField, pagename: props.pagename },
|
|
width: "850px",
|
|
height: "700px",
|
|
title: title,
|
|
};
|
|
};
|
|
function resizeWidth(minus) {
|
|
let val = maxwidth || minwidth || 80;
|
|
val = minus ? parseInt(val - 0.1 * val) : parseInt(val + 0.1 * val);
|
|
if (val > 1000) return $snackbar("Độ rộng cột lớn hơn giới hạn cho phép");
|
|
else if (val < 20) return $snackbar("Độ rộng cột nhỏ hơn giới hạn cho phép");
|
|
radioMaxWidth = store.colorchoice.find((v) => v.code === "option");
|
|
radioWidth = store.colorchoice.find((v) => v.code === "option");
|
|
maxwidth = val;
|
|
currentField.maxwidth = val;
|
|
minwidth = val;
|
|
currentField.minwidth = val;
|
|
updateFields(currentField);
|
|
}
|
|
</script>
|