|
@@ -0,0 +1,190 @@
|
|
|
+<template>
|
|
|
+ <LjSelector
|
|
|
+ ref="LjSelectorRef"
|
|
|
+ :title="`${$t('business.selector.mattress.title')} ${subtitle ? '(' + subtitle + ')' : ''}`"
|
|
|
+ v-model:value="selectList"
|
|
|
+ v-bind="$attrs"
|
|
|
+ :item-key="TABLE_KEY"
|
|
|
+ :layout="layout"
|
|
|
+ @change-value="autoUpdateTableCheckbox"
|
|
|
+ >
|
|
|
+ <template #default>
|
|
|
+ <LjVxeTable
|
|
|
+ ref="LjTableRef"
|
|
|
+ table-cls=""
|
|
|
+ :columns="selColumns"
|
|
|
+ :request-api="getData"
|
|
|
+ :data-callback="dataCallback"
|
|
|
+ :init-param="initParams"
|
|
|
+ :dwname="DwnameEnum.mattressChoose"
|
|
|
+ pagination
|
|
|
+ :search-col="tableSearchCol"
|
|
|
+ :table-events="tableEvents"
|
|
|
+ :table-props="tableProps"
|
|
|
+ :tool-button="['refresh', 'setting', 'search']"
|
|
|
+ :auto-load-layout="false"
|
|
|
+ collapse-buttons
|
|
|
+ :page-change-call-back="autoUpdateTableCheckbox"
|
|
|
+ >
|
|
|
+ </LjVxeTable>
|
|
|
+ </template>
|
|
|
+ </LjSelector>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="tsx" setup name="SelectorMattressDialog">
|
|
|
+import { reactive, toRefs, ref, onMounted, nextTick, inject, watch, computed } from "vue";
|
|
|
+// import LjDialog from "@/components/LjDialog/index.vue";
|
|
|
+// import LjFoldLayoutDouble from "@/components/LjFoldLayoutDouble/index.vue";
|
|
|
+import LjVxeTable from "@/components/LjVxeTable/index.vue";
|
|
|
+// 注意: 需要按需引入使用到的第三方UI组件
|
|
|
+// import { ElDialog, ElButton } from "element-plus";
|
|
|
+
|
|
|
+import { useOutrep } from "./hooks/index";
|
|
|
+import { useI18n } from "vue-i18n";
|
|
|
+import { DwnameEnum } from "@/enums/dwnameEnum";
|
|
|
+import { cloneDeep, pick, defaultsDeep } from "lodash-es";
|
|
|
+import { CommonDynamicSelect } from "@/api/modules/common";
|
|
|
+// import LjHeaderMenu from "@/components/LjHeaderMenu/index.vue";
|
|
|
+import { useAuthButtons } from "@/hooks/useAuthButtons";
|
|
|
+
|
|
|
+import LjSelector from "@/components/LjSelector/index.vue";
|
|
|
+import { throttle } from "lodash-es";
|
|
|
+import { Search } from "@element-plus/icons-vue";
|
|
|
+// import variables from "@/styles/js.module.scss";
|
|
|
+
|
|
|
+// const props = withDefaults(defineProps<{}>(), {});
|
|
|
+
|
|
|
+const { t } = useI18n();
|
|
|
+const { columns } = useOutrep(t);
|
|
|
+const selColumns: any = computed(() => {
|
|
|
+ // let selCol: any = { type: "checkbox", width: 50, fixed: "left" };
|
|
|
+ let selCol: any = { type: "radio", width: 50, fixed: "left" };
|
|
|
+ let _columns = cloneDeep(columns);
|
|
|
+ // console.log(" _columns.unshift(selCol); :>> ", _columns.unshift(selCol));
|
|
|
+ _columns.unshift(selCol);
|
|
|
+ console.log("_columns :>> ", _columns);
|
|
|
+ return _columns;
|
|
|
+});
|
|
|
+
|
|
|
+/**
|
|
|
+ * @description 已选列表
|
|
|
+ */
|
|
|
+const selectList = ref<any>([]);
|
|
|
+const TABLE_KEY = "mattressid";
|
|
|
+const layout = { first: { left: { hidden: true } } };
|
|
|
+
|
|
|
+const LjSelectorRef = ref();
|
|
|
+const LjTableRef = ref();
|
|
|
+// const _variables: any = variables;
|
|
|
+const { CheckPower, CheckOption, buttonNew, buttonDefault } = useAuthButtons(t);
|
|
|
+
|
|
|
+const initParams = ref<any>({});
|
|
|
+const searchInput = ref("");
|
|
|
+const tableSearchCol = { xs: 4, sm: 5, md: 6, lg: 6, xl: 8 };
|
|
|
+const tableProps = {
|
|
|
+ height: "auto",
|
|
|
+ editConfig: { trigger: "click", mode: "cell" },
|
|
|
+ rowConfig: { isCurrent: true, isHover: true, useKey: true, keyField: TABLE_KEY }
|
|
|
+};
|
|
|
+
|
|
|
+const subtitle = ref("");
|
|
|
+
|
|
|
+/**
|
|
|
+ * @description 鼠标单击表格
|
|
|
+ */
|
|
|
+const handleClickTable = async ({ row, column, rowIndex }: any) => {
|
|
|
+ const $table = LjTableRef.value.element;
|
|
|
+ if ($table) {
|
|
|
+ selectList.value = [row];
|
|
|
+ $table.setRadioRow(row);
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+/**
|
|
|
+ * @description 鼠标双击表格
|
|
|
+ */
|
|
|
+const handleDBlClickTable = async ({ row, column, rowIndex }: any) => {
|
|
|
+ const $table = LjTableRef.value.element;
|
|
|
+ if ($table) {
|
|
|
+ selectList.value = [row];
|
|
|
+ $table.setRadioRow(row);
|
|
|
+
|
|
|
+ LjSelectorRef.value.funcSubmit();
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+// 返回绑定的事件
|
|
|
+const tableEvents = {
|
|
|
+ "cell-dblclick": handleDBlClickTable,
|
|
|
+ "cell-click": handleClickTable
|
|
|
+};
|
|
|
+
|
|
|
+const dataCallback = (data: any) => {
|
|
|
+ console.log("data :>> ", data);
|
|
|
+ return {
|
|
|
+ list: data.datatable,
|
|
|
+ tableinfo: data.tableinfo,
|
|
|
+ total: data.totalcnt,
|
|
|
+ pageNum: data.pageindex,
|
|
|
+ pageSize: data.pagesize
|
|
|
+ };
|
|
|
+};
|
|
|
+
|
|
|
+const getData = (params: any) => {
|
|
|
+ // console.log("getData params :>> ", params);
|
|
|
+ let newParams: any = {};
|
|
|
+ params.pageNum && (newParams.pageindex = params.pageNum);
|
|
|
+ params.pageSize && (newParams.pagesize = params.pageSize);
|
|
|
+
|
|
|
+ delete params.pageNum;
|
|
|
+ delete params.pageSize;
|
|
|
+ newParams.queryParams = initParams.value;
|
|
|
+ console.log("params :>> ", newParams);
|
|
|
+ newParams.dsname = "web_mattress_choose";
|
|
|
+ return CommonDynamicSelect(newParams, DwnameEnum.mtrlPrice);
|
|
|
+};
|
|
|
+
|
|
|
+const autoUpdateTableCheckbox = () => {
|
|
|
+ const $table = LjTableRef.value.element;
|
|
|
+ if ($table && selectList.value.length) {
|
|
|
+ console.log("autoUpdateTableCheckbox selectLst.value :>> ", selectList.value);
|
|
|
+ $table.clearCheckboxRow();
|
|
|
+ let _rows: any = [];
|
|
|
+ selectList.value.map((item: any) => {
|
|
|
+ if ($table.getRowById(item[TABLE_KEY])) {
|
|
|
+ _rows.push($table.getRowById(item[TABLE_KEY]));
|
|
|
+ }
|
|
|
+ });
|
|
|
+ _rows.length && $table.setCheckboxRow(_rows, true);
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+/**
|
|
|
+ * @description 打开组件
|
|
|
+ * @param params 入参
|
|
|
+ */
|
|
|
+const show = (params: any, label?: string) => {
|
|
|
+ selectList.value = [];
|
|
|
+ searchInput.value = "";
|
|
|
+
|
|
|
+ subtitle.value = label;
|
|
|
+
|
|
|
+ console.log("show bfff initParams.value :>> ", initParams.value, params);
|
|
|
+ initParams.value = defaultsDeep(params, initParams.value);
|
|
|
+ console.log("show afff initParams.value :>> ", initParams.value);
|
|
|
+ LjSelectorRef.value.show(initParams.value);
|
|
|
+};
|
|
|
+
|
|
|
+// 节流
|
|
|
+const disshow = throttle((val: any) => {
|
|
|
+ console.log("val :>> ", val);
|
|
|
+ // initParams.value = defaultsDeep({ keyword: val }, initParams.value);
|
|
|
+ initParams.value.keyword = val;
|
|
|
+
|
|
|
+ console.log("disshow initParams.value :>> ", initParams.value);
|
|
|
+}, 500);
|
|
|
+
|
|
|
+defineExpose({
|
|
|
+ show
|
|
|
+});
|
|
|
+</script>
|