bri-components 1.0.0

package/src/components/list/DshFlatTable.vue

@@ -0,0 +1,622 @@
+<template>
+    <div :class="`DshFlatTable control-${mode}`">
+        <!-- 表格内容 -->
+        <div class="DshFlatTable-block">
+            <table
+                class="table"
+                border="1"
+                cellspacing="0"
+                bordercolor="#CFD9EB"
+            >
+                <!-- 表头 -->
+                <thead>
+                    <tr class="table-head">
+                        <th
+                            v-for="(col, colIndex) in showColumns"
+                            :key="colIndex"
+                            :style="getThStyle('head', col)"
+                            @click="clickTh(col, colIndex)"
+                        >
+                            <span>
+                                <i
+                                    v-if="col._required"
+                                    style="color:#ed4014"
+                                >*</i>
+
+                                <template v-if="col._type === 'selection'">
+                                    <Checkbox
+                                        :indeterminate="indeterminate"
+                                        :value="checkAll"
+                                        @click.prevent.native="clickCheckAll"
+                                    ></Checkbox>
+                                </template>
+                                <template v-else>
+                                    {{ col._name }}
+                                </template>
+
+                                <Tooltip
+                                    v-if="col._description"
+                                    transfer
+                                    max-width="200"
+                                >
+                                    <Icon
+                                        class="table-head-description"
+                                        custom="bico-font bico-explain"
+                                    ></Icon>
+                                    <div slot="content">
+                                        <span style="font-weight:normal;">{{ col._description }}</span>
+                                    </div>
+                                </Tooltip>
+                            </span>
+                        </th>
+                    </tr>
+                </thead>
+
+                <!-- 行数据 -->
+                <tbody
+                    v-if="listData.length"
+                    :style="{ 'max-height': contentHeight + 'px' }"
+                >
+                    <tr
+                        v-for="(row, rowIndex) in listData"
+                        :key="rowIndex"
+                        class="table-row"
+                    >
+                        <!-- 单元格 -->
+                        <td
+                            v-for="(col, colIndex) in showColumns"
+                            :key="colIndex"
+                            :style="getThStyle('row', col)"
+                            class="table-row-td"
+                            @click="clickTd(row, col)"
+                        >
+                            <div
+                                class="td-inner"
+                                :style="{
+                                    padding: '5px 8px 16px'
+                                    // margin: isShowCompare(col, row, oldListData[rowIndex]) ? '-1px' : undefined,
+                                    // border: isShowCompare(col, row, oldListData[rowIndex]) ? '1px solid #ed4014' : undefined
+                                }"
+                            >
+                                <!--对比值 -->
+                                <Tooltip
+                                    v-if="isShowCompare(col, row, oldListData[rowIndex])"
+                                    class="td-inner-compare"
+                                    :content="$isEmptyData(oldListData[rowIndex][col._key]) ? '空' : `${oldListData[rowIndex][col._key]}`"
+                                    placement="top"
+                                    :transfer="true"
+                                    maxWidth="200"
+                                >
+                                    <dsh-unit
+                                        class="td-inner-compare-unit"
+                                        :mode="mode"
+                                        :canEdit="getUnitCanEdit(col, row)"
+                                        :parentData="listData"
+                                        :formData="row"
+                                        :formItem="col"
+                                        :isShare="isShare"
+                                        :rowIndex="rowIndex"
+                                        @blur="controlBlur(null, col, row, arguments)"
+                                        @change="$dispatchEvent(operationMap.changeVal, col, row, rowIndex, arguments)"
+                                    ></dsh-unit>
+                                </Tooltip>
+
+                                <dsh-unit
+                                    v-else
+                                    :mode="mode"
+                                    :canEdit="getUnitCanEdit(col, row)"
+                                    :parentData="listData"
+                                    :formData="row"
+                                    :formItem="col"
+                                    :isShare="isShare"
+                                    :rowIndex="rowIndex"
+                                    @blur="controlBlur(null, col, row, arguments)"
+                                    @change="$dispatchEvent(operationMap.changeVal, col, row, rowIndex, arguments)"
+                                ></dsh-unit>
+                            </div>
+
+                            <!-- 必填提示 -->
+                            <span
+                                v-if="!getRuleResult(col, row).bool"
+                                class="table-row-td-tip"
+                            >
+                                {{ getRuleResult(col, row).message }}
+                            </span>
+
+                            <!-- 添加图标 -->
+                            <a
+                                v-if="col._type === 'index' && operationMap.create && !operationMap.create.disabled"
+                                class="table-row-td-add"
+                                href="javascript:void(0)"
+                                @click="$dispatchEvent(operationMap.create, row, rowIndex, listData)"
+                            >
+                                <Icon
+                                    type="md-add-circle"
+                                    size="20"
+                                />
+                            </a>
+                        </td>
+                    </tr>
+
+                    <!-- 汇总行 -->
+                    <tr
+                        v-if="useSummary && listData.length"
+                        :key="listData.length + 1"
+                        class="table-row"
+                    >
+                        <td
+                            v-for="(col, colIndex) in showColumns"
+                            :key="colIndex"
+                            :style="getThStyle('foot', col)"
+                        >
+                            <span>{{ getSummaryRowVal(col) }}</span>
+                        </td>
+                    </tr>
+                </tbody>
+
+                <!-- 脚 -->
+                <tfoot v-else>
+                    <tr>
+                        <td
+                            class="table-row-nodata"
+                            :colspan="showColumns.length"
+                        >暂无数据……</td>
+                    </tr>
+                </tfoot>
+            </table>
+        </div>
+
+        <!-- 添加行 -->
+        <dsh-buttons
+            class="DshFlatTable-create"
+            :list="$getOperationList(['create'])"
+            @click="$dispatchEvent($event, null, null, listData)"
+        ></dsh-buttons>
+    </div>
+</template>
+
+<script>
+    import DshUnit from "../unit/DshUnit.vue";
+
+    export default {
+        name: "DshFlatTable",
+        components: {
+            DshUnit
+        },
+        props: {
+            mode: {
+                type: String,
+                default: "default"
+            },
+
+            canEdit: {
+                type: Boolean,
+                default: true
+            },
+            columns: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            data: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            oldData: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            rowDefault: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            },
+
+            propsObj: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            },
+            isShare: Boolean
+        },
+        data () {
+            return {
+                selections: [],
+
+                showRuleMessage: false, // 显示校验文字
+                ruleRecordMap: {}
+                // createRowMap: {} // 用作标记哪些是新增行
+            };
+        },
+        computed: {
+            listData () {
+                this.data.forEach(item => {
+                    !item._id && this.$set(item, "_id", this.$ObjectID().str);
+                });
+                return this.data;
+            },
+            oldListData () {
+                this.oldData.forEach(item => {
+                    !item._id && this.$set(item, "_id", this.$ObjectID().str);
+                });
+                return this.oldData;
+            },
+
+            selfPropsObj () {
+                return {
+                    _contentHeight: 500,
+                    _useSelection: false, // 使用选择列
+                    _useIndex: true, // 使用序号列
+                    _useSummary: false, // 使用汇总行
+                    _disabledBtns: false, // 禁用增删按钮
+                    _disabledCreateBtn: false, // 置灰新增按钮，目前只内部使用，comp_web数据表配置页那块
+                    _disabledOldDataRow: false, // 置灰老数据行包含删除
+
+                    ...this.propsObj
+                };
+            },
+            contentHeight () {
+                return this.selfPropsObj._contentHeight;
+            },
+            useSelection () {
+                return this.selfPropsObj._useSelection;
+            },
+            useIndex () {
+                return this.selfPropsObj._useIndex;
+            },
+            useSummary () {
+                return this.selfPropsObj._useSummary;
+            },
+            disabledBtns () {
+                return this.selfPropsObj._disabledBtns;
+            },
+            disabledCreateBtn () {
+                return this.selfPropsObj._disabledCreateBtn;
+            },
+            disabledOldDataRow () {
+                return this.selfPropsObj._disabledOldDataRow;
+            },
+            useCampare () {
+                return !!this.oldListData.length;
+            },
+
+            showColumns () {
+                const operationList = this.$getOperationList(["delete"]);
+                const showColumns = [
+                    ...(
+                        this.useSelection === true
+                            ? [
+                                {
+                                    _id: this.$ObjectID().str,
+                                    _name: "全选",
+                                    _type: "selection",
+                                    _key: "selection",
+                                    _align: "center",
+                                    render: (h, { row, index, column }) => {
+                                        return h("Checkbox", {
+                                            props: {
+                                                value: this.selections.some(item => item._id === row._id)
+                                            },
+                                            on: {
+                                                input: ($event) => this.clickRowCheck($event, row)
+                                            }
+                                        });
+                                    }
+                                }
+                            ]
+                            : []
+                    ),
+
+                    ...(
+                        this.useIndex === true
+                            ? [
+                                {
+                                    _id: this.$ObjectID().str,
+                                    _name: "序号",
+                                    _type: "index",
+                                    _key: "index",
+                                    _align: "center"
+                                }
+                            ]
+                            : []
+                    ),
+
+                    ...this.columns.filter(colItem => colItem._displayType !== "hide"),
+
+                    ...(
+                        this.canEdit && operationList.length
+                            ? [
+                                {
+                                    _id: this.$ObjectID().str,
+                                    _name: "操作",
+                                    _type: "operation",
+                                    _key: "operation",
+                                    _align: "center",
+                                    _width: 80,
+                                    render: (h, params) => {
+                                        return h("dsh-buttons", {
+                                            props: {
+                                                list: this.disabledOldDataRow && !params.row.__isCreate__ ? [] : operationList
+                                                // list: this.disabledOldDataRow && !this.createRowMap[params.row._id] ? [] : operationList
+                                            },
+                                            on: {
+                                                click: (operationItem) => {
+                                                    this.$dispatchEvent(operationItem, params.row, params.index, this.listData);
+                                                }
+                                            }
+                                        });
+                                    }
+                                }
+                            ]
+                            : []
+                    )
+                ];
+
+                return showColumns;
+            },
+            selfRowDefault () {
+                return this.$filterObj(this.columns, this.rowDefault);
+            },
+            checkAll () {
+                return !!this.selections.length && !!this.listData.length && this.selections.length === this.listData.length;
+            },
+            indeterminate () {
+                return !!this.selections.length && !!this.listData.length && this.selections.length !== this.listData.length;
+            },
+
+            operationMap () {
+                const allOperationMap = {
+                    create: {
+                        name: "添加一行",
+                        type: "create",
+                        icon: "md-add",
+                        size: "default",
+                        long: true,
+                        disabled: !!this.disabledCreateBtn,
+                        event: "clickCreate"
+                    },
+                    delete: {
+                        name: "删除",
+                        type: "delete",
+                        color: "#ed4014",
+                        btnType: "text",
+                        // icon: "md-trash",
+                        disabled: false,
+                        event: "clickDelete"
+                    },
+                    // expand: {
+                    //     name: "展开",
+                    //     type: "expand",
+                    //     event: "clickExpand"
+                    // },
+                    changeVal: {
+                        name: "改变输入框值",
+                        type: "changeVal",
+                        event: "changeVal"
+                    }
+                };
+
+                return this.canEdit
+                    ? this.$categoryMapToMap(
+                        allOperationMap,
+                        null,
+                        this.disabledBtns ? ["create", "delete"] : []
+                    )
+                    : {};
+            }
+        },
+        created () {},
+        methods: {
+            // 共外部使用
+            validate () {
+                this.showRuleMessage = true;
+
+                return this.listData.every(dataItem =>
+                    this.showColumns.every(col => this.getRuleResult(col, dataItem, true).bool)
+                );
+            },
+
+            // 点击表头
+            clickTh (col, colIndex) {
+                this.$emit("clickTh", col, colIndex);
+            },
+            // 点击单元格
+            clickTd (row, col) {},
+            // // 点击 -打开行
+            // clickExpand (operationItem, row, index, list) {},
+            // 点击全选
+            clickCheckAll () {
+                if (this.selections.length) {
+                    this.selections = [];
+                } else {
+                    this.selections = this.listData;
+                }
+
+                this.$emit("selectAll", this.selections);
+            },
+            // 点击行选择
+            clickRowCheck (bool, row) {
+                if (bool) {
+                    this.selections.push(row);
+                } else {
+                    this.selections = this.selections.filter(checkItem => checkItem._id !== row._id);
+                }
+
+                this.$emit("selectChange", this.selections, row, bool);
+            },
+            // 点击 -添加行
+            clickCreate (operationItem, row, index, list) {
+                const newRow = {
+                    ...this.$deepCopy(this.selfRowDefault),
+                    __isCreate__: true,
+                    _id: this.$ObjectID().str
+                };
+                const newRowIndex = index == null ? list.length : index + 1;
+                list.splice(newRowIndex, 0, newRow);
+
+                // this.$set(this.createRowMap, newRow._id, true);
+                this.$forceUpdate(); // 自定义页中点击添加一行没有更新页面
+
+                this.change("createRow", null, newRow, newRowIndex);
+            },
+            // 点击 -删除行
+            clickDelete (operationItem, row, rowIndex, list) {
+                this.$Modal.confirm({
+                    title: "警告",
+                    content: "确定删除吗？",
+                    onOk: () => {
+                        list.splice(rowIndex, 1);
+                        this.selections = [];
+
+                        this.change("deleteRow", null, row, rowIndex);
+                    }
+                });
+            },
+            // 表单控件值改变
+            changeVal (operationItem, col, row, rowIndex, params) {
+                this.$set(this.ruleRecordMap, `${row._id}dsh${col._key}`, { showRuleMessage: true });
+
+                this.change("changeVal", col, row, rowIndex, ...params);
+            },
+            // 表单控件失去焦点
+            controlBlur (operationItem, col, row, params) {
+                this.$set(this.ruleRecordMap, `${row._id}dsh${col._key}`, { showRuleMessage: true });
+            },
+            change (...params) {
+                this.$emit("change", { list: this.listData, rowDefault: this.rowDefault }, ...params);
+            },
+
+            /* --------------- 工具方法 ------------- */
+            getUnitCanEdit (col, row) {
+                return this.canEdit && // 是否是编辑状态
+                    // (!this.disabledOldDataRow || !!this.createRowMap[row._id]) && // 是否让老数据行置灰
+                    (!this.disabledOldDataRow || !!row.__isCreate__) && // 是否让老数据行置灰
+                (!col.dependRowCanEdit || row.canEdit !== false); // 在老数据行里某些列不可编辑
+            },
+            isShowCompare (col, row, oldRow = {}) {
+                return this.useCampare && ["number"].includes(col._type) &&
+                    !(this.$isEmptyData(row[col._key]) && this.$isEmptyData(oldRow[col._key])) &&
+                    row[col._key] !== oldRow[col._key];
+            },
+            // 获取单元格样式
+            getThStyle (type, col) {
+                let textAlign = col._align || "left";
+                if (["index", "selection"].includes(col._type)) {
+                    col.width = col._width || 46;
+                } else if (["text", "textarea", "email"].includes(col._type)) {
+                    col.width = col._width || 200;
+                } else if (["idcard"].includes(col._type)) {
+                    col.width = col._width || 190;
+                } else if (["phone"].includes(col._type)) {
+                    col.width = col._width || 130;
+                } else if (["number"].includes(col._type)) {
+                    col.width = col._width || 120;
+                    // textAlign = col._align || "right";
+                } else if (["date"].includes(col._type)) {
+                    switch (col._dateType) {
+                    case "date": col.width = col._width || 120; break;
+                    case "year": col.width = col._width || 96; break;
+                    case "month": col.width = col._width || 120; break;
+                    case "time": col.width = col._width || 120; break;
+                    case "datetime": col.width = col._width || 180; break;
+                    default: col.width = 120; break;
+                    }
+                } else if (["switch"].includes(col._type)) {
+                    col.width = col._width || 80;
+                    textAlign = col._align || "center";
+                } else if (["select"].includes(col._type)) {
+                    col.width = col._width || 120;
+                    textAlign = col._align || "center";
+                } else if (["checkbox"].includes(col._type)) {
+                    col.width = col._width || 180;
+                } else if (["cascader"].includes(col._type)) {
+                    col.width = col._width || 150;
+                } else if (["region"].includes(col._type)) {
+                    col.width = col._width || 212;
+                } else if (["file", "image"].includes(col._type)) {
+                    col.width = col._width || 170;
+                    textAlign = col._align || "center";
+                } else if (["flatTable", "cascaderTable", "editor"].includes(col._type)) {
+                    col.width = col._width || 100;
+                    textAlign = col._align || "center";
+                } else if (["departments"].includes(col._type)) {
+                    col.width = col._width || 100;
+                } else if (["users"].includes(col._type)) {
+                    col.width = col._width || 120;
+                } else if (["reference"].includes(col._type)) {
+                    col.width = (col._name ? col._name.length * 14 : 36) + 60;
+                } else if (["referenceBy"].includes(col._type)) {
+                    col.width = col._width || 100;
+                } else {
+                    col.width = col._width || 120;
+                }
+                let styleObj = {
+                    width: col.width && `${col.width}px`,
+                    minWidth: col.width && `${col.width}px`,
+                    maxWidth: col.width && `${col.width}px`,
+                    // width: colIndex === this.showColumns.length - 1 ? col.width && `${col.width}px` : undefined,
+                    padding: "5px 8px 16px",
+                    textAlign: textAlign,
+
+                    ...(
+                        type === "head"
+                            ? {
+                                cursor: "pointer"
+                            }
+                            : type === "row"
+                                ? {
+                                    height: "30px",
+                                    padding: undefined
+                                }
+                                : {
+                                    height: "30px"
+                                }
+                    )
+                };
+
+                return styleObj;
+            },
+            // 获取汇总单元格的值
+            getSummaryRowVal (col) {
+                return col._type === "index"
+                    ? "汇总"
+                    : col._type === "number"
+                        ? this.$calNumList(this.listData.map(item => item[col._key]), col._summaryType, { ...col, _defaultDigit: 2 })
+                        : null;
+
+            },
+            // 是否显示 单元格校验提示文字
+            getRuleResult (col, row, showRuleMessage = this.showRuleMessage) {
+                if ((this.ruleRecordMap[`${row._id}dsh${col._key}`] || {}).showRuleMessage || showRuleMessage) {
+                    const val = row[col._key];
+                    const ruleConfig = this.$getFormTypeRuleConfig(col);
+                    // 为空 校验必填；不为空 格式校验 （不是必填也要校验格式）
+                    return this.$isEmptyData(val)
+                        ? {
+                            bool: !col._required,
+                            message: `${col._name}为必填项`
+                        }
+                        : ruleConfig.regs && ruleConfig.regs.length
+                            ? {
+                                bool: ruleConfig.regs.every(regItem => regItem.test(val)),
+                                message: col.regMessage || `${col._name}格式不正确`
+                            }
+                            : {
+                                bool: true
+                    };
+                } else {
+                    return {
+                        bool: true
+                    };
+                }
+            }
+        }
+    };
+</script>