上下载点

src/components/Form/src/componentMap.ts

@@ -22,6 +22,7 @@ import ApiTreeSelect from './components/ApiTreeSelect.vue';
 import ApiCascader from './components/ApiCascader.vue';
 import SelectDepartment from './components/SelectDepartment.vue';
 import SelectDepartmentV2 from './components/SelectDepartmentV2.vue';
+import SelectPipeline from './components/SelectPipeline.vue';
 import SelectUser from './components/SelectUser.vue';
 import SelectUserV2 from './components/SelectUserV2.vue';
 import SelectUserShowTree from './components/SelectUserShowTree.vue';
@@ -105,6 +106,7 @@ componentMap.set('Slider', Slider);
 componentMap.set('Rate', Rate);
 componentMap.set('DeptTree', SelectDepartment);
 componentMap.set('Dept', SelectDepartmentV2);
+componentMap.set('SelectPipeline', SelectPipeline);
 componentMap.set('User', SelectUserV2);
 componentMap.set('UserTree', SelectUserShowTree);
 componentMap.set('Info', CommonInfo);

src/components/Form/src/components/SelectPipeline.vue

@@ -0,0 +1,214 @@
+<template>
+    <div class="depart-select" style="width: 100%" @click="show">
+        <div v-if="disabled && !disabledShowBorder" :class="wordWrap ? '' : 'field-readonly'" :title="departNames">
+            {{ departNames }}
+        </div>
+        <a-input v-model:value="departNames" v-if="disabledShowBorder || !disabled" :bordered="bordered" :disabled="disabled" :placeholder="placeholder" :size="size" readonly>
+            <template v-if="prefix" #prefix>
+                <Icon :icon="prefix" />
+            </template>
+            <template v-if="suffix" #suffix>
+                <Icon :icon="suffix" />
+            </template>
+        </a-input>
+        <ModalPanel title="选择管道" :visible="visible" :width="1000" class="depart-select-dialog" @close="close" @submit="submit">
+            <BasicTable @register="registerTable" ref="tableRef" ></BasicTable>
+        </ModalPanel>
+    </div>
+</template>
+<script lang="ts" setup>
+    import { onMounted, ref, watch,reactive } from 'vue';
+    import Icon from '/@/components/Icon/index';
+    import { getLngBPngLinePage} from '/@/api/mdm/PipelineGgasLine';
+    import { useI18n } from '/@/hooks/web/useI18n';
+    import { camelCaseString } from '/@/utils/stringUtil';
+    import { ModalPanel } from '/@/components/ModalPanel/index';
+    import { BasicTable, useTable, TableAction, ActionItem } from '/@/components/Table';
+    import {columns} from '/@/views/mdm/Bank/components/config'
+    const emits = defineEmits(['change', 'changeNames', 'close', 'options-change', 'update:value']);
+
+const selectedKeys = ref<string[]>([]);
+const selectedValues = ref([]);
+const [registerTable, { reload,   }] = useTable({
+    api: getLngBPngLinePage,
+    rowKey: 'code',
+    columns: columns,
+    formConfig: {
+      schemas: [],
+      fieldMapToTime: [],
+      showResetButton: false,
+      showSubmitButton: false
+    },
+    beforeFetch: (params) => {
+      return { ...params, PK: 'id' };
+    },
+
+    useSearchForm: false,
+    showTableSetting: true,
+    
+    striped: false,
+    rowSelection: {
+      type: 'radio',
+      onChange: onSelectChange
+    },
+    tableSetting: {
+      size: false,
+      setting: false,
+    },
+    
+  });
+  function onSelectChange(rowKeys: string[], e) {
+    selectedKeys.value = rowKeys;
+    selectedValues.value = e
+  }
+
+
+
+    const visible = ref(false);
+    const departNames = ref();
+    const valChanged = ref(false);
+
+    const props = defineProps({
+        prefix: String,
+        suffix: String,
+        placeholder: String,
+        readonly: Boolean,
+        disabled: Boolean,
+        parentNode: String,
+        size: String,
+        value: {
+            type: String || Array
+        },
+        isArray: {
+            type: Boolean,
+            default: false
+        },
+        bordered: {
+            type: Boolean,
+            default: true
+        },
+        multiple: {
+            type: Boolean,
+            default: false
+        },
+        componentProps: {
+            type: Object,
+            default: {}
+        },
+        sepTextField: '', // 将文字描述存在独立字段，增加首次渲染速度
+        row: Object,
+        defaultDeptField: {
+            // 默认选择公司范围key值
+            type: String,
+            default: ''
+        },
+        wordWrap: {
+            type: Boolean,
+            default: false
+        },
+        disabledShowBorder: {
+            type: Boolean,
+            default: false
+        },
+        formData: Object
+    });
+    const selectedNodes = ref([]);
+    const loading = ref(true);
+
+
+    onMounted(() => {});
+
+    watch(
+        () => props.value,
+        (val) => {
+            let ids = props.isArray ? val?.join(',') : val;
+            if (ids) {
+                getDefaultList(props.value)
+                selectedKeys.value = [props.value]
+            } else {
+                departNames.value = '';
+                selectedNodes.value = [];
+                selectedKeys.value = []
+                selectedValues.value = []
+            }
+        },
+        {
+            immediate: true
+        }
+    );
+
+
+
+    function updateSepTextField(v) {
+        if (!props.sepTextField || !props.row) {
+            return;
+        }
+        props.row[camelCaseString(props.sepTextField)] = v;
+    }
+
+  
+
+   
+
+    async function getDefaultList(ids) {
+      let param = {
+          code: ids,
+      };
+      let {list} = await getLngBPngLinePage(param);
+      selectedNodes.value = list;
+      let nameList = selectedNodes.value.map((item) => item.fullName);
+      const names = nameList.join(',');
+      departNames.value = names;
+      updateSepTextField(names);
+  }
+        
+    
+    function show() {
+        if (props.disabled) {
+            return;
+        }
+        visible.value = true;
+        loading.value = true;
+    
+        if (props.value) {
+            if (props.isArray && !props.value.length) {
+                return;
+            }
+            let ids = props.isArray ? props.value.join(',') : props.value;
+    
+            getDefaultList(ids);
+        }
+    }
+
+  
+
+   
+
+    function submit() {
+        emits('update:value', props.isArray ? selectedValues.value : selectedKeys.value[0]);
+        departNames.value = selectedValues.value[0].fullName;
+        updateSepTextField( selectedValues.value[0].fullName);
+        emits('change', props.isArray ? selectedValues.value[0] : selectedKeys.value[0]);
+        close();
+    }
+
+    function close() {
+        visible.value = false;
+        selectedNodes.value = [];
+        emits('close');
+    }
+</script>
+<style lang="less">
+    .depart-select-dialog {
+        .content {
+            margin-bottom: 0;
+        }
+    }
+</style>
+<style lang="less" scoped>
+    .field-readonly {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+</style>

src/components/Form/src/types/index.ts

@@ -126,6 +126,7 @@ export type ComponentType =
   | 'Divider'
   | 'DeptTree'
   | 'Dept'
+  | 'SelectPipeline'
   | 'User'
   | 'UserTree'
   | 'Info'
@@ -160,7 +161,7 @@ export type ComponentType =
   | 'ErpCheck'
   | 'FormView'
   | 'XjrIframe'
-    | 'CustomComponent'
+  | 'CustomComponent'
   | 'TableLayout';
 
 /**