mt-ui-components-vue3
Version:
玛果添实UI组件库(Vue3)
177 lines • 8.65 kB
JavaScript
/* Analyzed bindings: {
"reactive": "setup-const",
"ValueItem": "setup-const",
"JTable": "setup-maybe-ref",
"JButton": "setup-maybe-ref",
"AIcon": "setup-maybe-ref",
"JInput": "setup-maybe-ref",
"PopconfirmModal": "setup-maybe-ref",
"Icon": "setup-const",
"cloneDeep": "setup-maybe-ref",
"source": "setup-reactive-const",
"emit": "setup-const",
"columns": "setup-const",
"updateValue": "setup-const",
"addItem": "setup-const",
"deleteItem": "setup-const",
"itemSelect": "setup-const"
} */
import { defineComponent as _defineComponent } from 'vue';
import { toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, unref as _unref, createBlock as _createBlock, resolveComponent as _resolveComponent, createElementVNode as _createElementVNode, createVNode as _createVNode, withCtx as _withCtx } from "vue";
const _hoisted_1 = { class: "data-table-metrics" };
const _hoisted_2 = { key: 4 };
import { reactive } from 'vue';
import ValueItem from './ValueItem.js';
import { Table as JTable, Button as JButton, AIcon, Input as JInput, PopconfirmModal, } from '../../../components';
import Icon from '../Icon.js';
import { cloneDeep } from 'lodash-es';
const __sfc_main__ = _defineComponent({
emits: ['update:value', 'change'],
setup(__props, { emit }) {
const source = reactive([]);
const columns = [
{
title: '序号',
dataIndex: 'index',
width: 60,
},
{
title: '指标标识',
dataIndex: 'id',
},
{
title: '指标名称',
dataIndex: 'name',
},
{
title: '指标值',
dataIndex: 'range',
width: 120,
},
{
title: '指标配置',
dataIndex: 'value',
width: 120,
},
{
title: '操作',
dataIndex: 'action',
width: 80,
},
];
const updateValue = () => {
emit('update:value', cloneDeep(source));
emit('change', cloneDeep(source));
};
const addItem = () => {
source.push({
id: undefined,
name: undefined,
range: false,
value: undefined,
});
updateValue();
};
const deleteItem = (index) => {
source.splice(index, 1);
updateValue();
};
const itemSelect = (data) => {
data.value = undefined;
};
return (_ctx, _cache) => {
const _component_j_select_boolean = _resolveComponent("j-select-boolean");
return (_openBlock(), _createBlock(_unref(PopconfirmModal), {
"body-style": "padding-top:4px;",
onConfirm: _ctx.confirm
}, {
content: _withCtx(() => [
_createElementVNode("div", _hoisted_1, [
_createVNode(_unref(JTable), {
"data-source": source,
columns: columns,
pagination: false
}, {
bodyCell: _withCtx(({ column, record, index }) => [
(column.dataIndex === 'index')
? (_openBlock(), _createElementBlock(_Fragment, { key: 0 }, [
_createTextVNode(_toDisplayString(index + 1), 1 /* TEXT */)
], 64 /* STABLE_FRAGMENT */))
: _createCommentVNode("v-if", true),
(column.dataIndex === 'id')
? (_openBlock(), _createBlock(_unref(JInput), {
key: 1,
modelValue: record.value,
"onUpdate:modelValue": ($event) => ((record.value) = $event),
placeholder: "请输入",
"max-length": "64"
}, null, 8 /* PROPS */, ["modelValue", "onUpdate:modelValue"]))
: _createCommentVNode("v-if", true),
(column.dataIndex === 'name')
? (_openBlock(), _createBlock(_unref(JInput), {
key: 2,
modelValue: record.text,
"onUpdate:modelValue": ($event) => ((record.text) = $event),
placeholder: "请输入",
"max-length": "64"
}, null, 8 /* PROPS */, ["modelValue", "onUpdate:modelValue"]))
: _createCommentVNode("v-if", true),
(column.dataIndex === 'range')
? (_openBlock(), _createBlock(_component_j_select_boolean, {
key: 3,
value: record.range,
"onUpdate:value": ($event) => ((record.range) = $event),
"true-text": "范围值",
"false-text": "固定值",
style: { "width": "100%" },
onSelect: () => itemSelect(record)
}, null, 8 /* PROPS */, ["value", "onUpdate:value", "onSelect"]))
: _createCommentVNode("v-if", true),
(column.dataIndex === 'value')
? (_openBlock(), _createElementBlock("div", _hoisted_2, [
_createElementVNode("span", null, _toDisplayString(record.value || ''), 1 /* TEXT */),
_createVNode(ValueItem, {
value: record.value,
"onUpdate:value": ($event) => ((record.value) = $event),
range: record.range
}, null, 8 /* PROPS */, ["value", "onUpdate:value", "range"])
]))
: _createCommentVNode("v-if", true),
(column.dataIndex === 'action')
? (_openBlock(), _createBlock(_unref(JButton), {
key: 5,
type: "link",
onClick: () => deleteItem(index)
}, {
default: _withCtx(() => [
_createVNode(_unref(AIcon), { type: "DeleteOutlined" })
]),
_: 2 /* DYNAMIC */
}, 1032 /* PROPS, DYNAMIC_SLOTS */, ["onClick"]))
: _createCommentVNode("v-if", true)
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["data-source"]),
_createVNode(_unref(JButton), {
class: "data-table-metrics--add",
onClick: addItem
}, {
icon: _withCtx(() => [
_createVNode(_unref(AIcon), { type: "PlusOutlined" })
]),
default: _withCtx(() => [
_createTextVNode(" 添加指标值 ")
]),
_: 1 /* STABLE */
})
])
]),
default: _withCtx(() => [
_createVNode(Icon)
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["onConfirm"]));
};
}
});
export default __sfc_main__;