上下载点

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'

src/components/SimpleForm/componentMap.ts

@@ -28,6 +28,7 @@ import ApiTree from './components/ApiTree.vue';
 import ApiTreeSelect from './components/ApiTreeSelect.vue';
 import ApiCascader from './components/ApiCascader.vue';
 import SelectDepartment from './components/SelectDepartment.vue';
+import SelectPipeline from './components/SelectPipeline.vue';
 import SelectUser from './components/SelectUser.vue';
 import CommonInfo from './components/CommonInfo.vue';
 import SelectArea from './components/SelectArea.vue';
@@ -67,6 +68,7 @@ componentMap.set('Cascader', Cascader);
 componentMap.set('Slider', Slider);
 componentMap.set('Rate', Rate);
 componentMap.set('Dept', SelectDepartment);
+componentMap.set('SelectPipeline', SelectPipeline);
 componentMap.set('User', SelectUser);
 componentMap.set('Info', CommonInfo);
 componentMap.set('Area', SelectArea);

src/components/SimpleForm/types/index.ts

@@ -249,4 +249,5 @@ export type ComponentType =
   | 'Info'
   | 'Area'
   | 'AreaCascader'
+  | 'SelectPipeline'
   | 'Text'

src/utils/helper/designHelper.ts

@@ -614,7 +614,7 @@ export function buildAppComponentType(type: string): AppComponentType {
 
     case 'select':
       return AppComponentType.select;
-
+    case 'selectpipeline':
     case 'area':
     case 'areacascader':
     case 'cascader':

src/views/mdm/PipeGasDownloadPoint/components/Form.vue

@@ -7,10 +7,11 @@
   />
 </template>
 <script lang="ts" setup>
-  import { reactive, ref,onBeforeMount,onMounted } from 'vue';
+  import { reactive, ref,onBeforeMount,onMounted,watch } from 'vue';
   import { formProps, formEventConfigs ,formConfig} from './config';
   import SimpleForm from '/@/components/SimpleForm/src/SimpleForm.vue';
   import { addLngBStationPng, getLngBStationPng, updateLngBStationPng, deleteLngBStationPng } from '/@/api/mdm/PipeGasDownloadPoint';
+  import { getIngStation } from '/@/api/mdm/PipelineGgasLine';
   import { cloneDeep } from 'lodash-es';
   import { FormDataProps } from '/@/components/Designer/src/types';
   import { usePermission } from '/@/hooks/web/usePermission';
@@ -24,16 +25,16 @@
   const { filterFormSchemaAuth } = usePermission();
   const { mergeFormSchemas,mergeFormEventConfigs } = useFormConfig();
   const { currentRoute } = useRouter();
-
+  const isView = currentRoute.value.query.isView
   const RowKey = 'id';
   const emits = defineEmits(['changeUploadComponentIds','loadingCompleted', 'form-mounted']);
   const props = defineProps({
     fromPage: {
       type: Number,
       default: FromPageType.MENU,
-    },
+    }
   });
-  const systemFormRef = ref();
+  const systemFormRef = ref({});
   const data: { formDataProps: FormDataProps } = reactive({
     formDataProps: {schemas:[]} as FormDataProps,
   });
@@ -42,8 +43,42 @@
   });
   
   let customFormEventConfigs=[];
+  watch(
+    () => getFormModel(),
+    (newVal) => {
+      if (newVal.ownSign === 'Y') {
+        data.formDataProps.schemas?.forEach(v => {
+          if (v.field === 'staCodeLng') {
+            v.componentProps.disabled = (isView ? true : false)
+            v.componentProps.required = true
+          }
+        })
+      } else {
+        data.formDataProps.schemas?.forEach(v => {
+          if (v.field === 'staCodeLng') {
+            v.componentProps.disabled = true
+            v.componentProps.required = false
+          }
+        })
+      }
 
+    },
+    { deep: true }
+  );
   onMounted(async () => {
+    const a = await getIngStation({ownSign :'Y', valid : 'Y'})
+    const b = a.map(v => {
+      return {
+        label: v.fullName,
+        value: v.code
+      }
+    })
+    formProps.schemas?.forEach(v => {
+      if (v.field === 'staCodeLng') {
+        v.componentProps.staticOptions = b
+        v.componentProps.disabled = (isView ? true : false)
+      }
+    })
     try {
       // 合并渲染覆盖配置中的字段配置、表单事件配置
       await mergeCustomFormRenderConfig();

src/views/mdm/PipeGasDownloadPoint/components/config.ts

@@ -448,11 +448,12 @@ export const formProps: FormProps = {
       key: 'ce59b928624a4277992077bd11f54e70',
       field: 'pipelineCode',
       label: '管道',
-      type: 'input',
+      type: 'selectpipeline',
-      component: 'Input',
+      component: 'SelectPipeline',
       colProps: { span: 8 },
       defaultValue: '',
       componentProps: {
+        getPopupContainer: () => document.body,
         width: '100%',
         span: '',
         defaultValue: '',
@@ -462,7 +463,7 @@ export const formProps: FormProps = {
         respNewRow: false,
         placeholder: '请输入管道',
         prefix: '',
-        suffix: '',
+        suffix: 'ant-design:ellipsis-outlined',
         addonBefore: '',
         addonAfter: '',
         disabled: false,
@@ -601,7 +602,7 @@ export const formProps: FormProps = {
         allowClear: false,
         showLabel: true,
         required: false,
-        rules: [],
+        rules:  [{ pattern: '/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/', message: '邮箱格式错误\n' }],
         events: {},
         isSave: false,
         isShow: true,
@@ -613,8 +614,8 @@ export const formProps: FormProps = {
       key: 'fa55f80f74364d5b95ed2d7a77f20e55',
       field: 'regionCode',
       label: '行政区域',
-      type: 'select',
+      type: 'areacascader',
-      component: 'XjrSelect',
+      component: 'AreaCascader',
       colProps: { span: 8 },
       componentProps: {
         width: '100%',
@@ -623,34 +624,19 @@ export const formProps: FormProps = {
         labelFixWidth: 120,
         responsive: false,
         respNewRow: false,
-        placeholder: '请选择下拉选择',
+        placeholder: '请选择区域',
-        sepTextField: '',
         showLabel: true,
-        showSearch: false,
-        clearable: false,
         disabled: false,
-        mode: '',
+        allowClear: true,
-        staticOptions: [
+        clearable: false,
-          { key: 1, label: 'Option 1', value: 'Option 1' },
-          { key: 2, label: 'Option 2', value: 'Option 2' },
-          { key: 3, label: 'Option 3', value: 'Option 3' },
-        ],
-        defaultSelect: '',
-        datasourceType: 'staticData',
-        labelField: 'label',
-        valueField: 'value',
-        apiConfig: {
-          path: 'CodeGeneration/selection',
-          method: 'GET',
-          apiId: '93d735dcb7364a0f8102188ec4d77ac7',
-        },
-        dicOptions: [],
         required: false,
         rules: [],
         events: {},
         isShow: true,
         style: { width: '100%' },
-      },
+        fieldNames: {label: 'fullName', value: 'code', children: 'children'},
+        excludeType: 'CONTINENT'
+      }
     },
     {
       key: '56e88c926247465caf62c6c52747205d',
@@ -778,9 +764,9 @@ export const formProps: FormProps = {
         disabled: false,
         mode: '',
         staticOptions: [
-          { key: 1, label: 'Option 1', value: 'Option 1' },
+          // { key: 1, label: 'Option 1', value: 'Option 1' },
-          { key: 2, label: 'Option 2', value: 'Option 2' },
+          // { key: 2, label: 'Option 2', value: 'Option 2' },
-          { key: 3, label: 'Option 3', value: 'Option 3' },
+          // { key: 3, label: 'Option 3', value: 'Option 3' },
         ],
         defaultSelect: '',
         datasourceType: 'staticData',
@@ -819,15 +805,14 @@ export const formProps: FormProps = {
         showSearch: false,
         clearable: false,
         disabled: false,
-        mode: 'multiple',
         staticOptions: [
           { key: 1, label: 'Option 1', value: 'Option 1' },
           { key: 2, label: 'Option 2', value: 'Option 2' },
           { key: 3, label: 'Option 3', value: 'Option 3' },
         ],
-        defaultSelect: '',
+        datasourceType: 'dic',
-        datasourceType: 'api',
+        params: { itemId: '1978056598125330433' },
-        labelField: 'label',
+        labelField: 'name',
         valueField: 'value',
         apiConfig: {
           path: 'CodeGeneration/selection',
@@ -835,10 +820,11 @@ export const formProps: FormProps = {
           apiId: '93d735dcb7364a0f8102188ec4d77ac7',
         },
         dicOptions: [],
-        required: false,
+        required: true,
         rules: [],
         events: {},
         isShow: true,
+        itemId: '1978056598125330433',
         style: { width: '100%' },
       },
     },
@@ -849,14 +835,15 @@ export const formProps: FormProps = {
       type: 'number',
       component: 'InputNumber',
       colProps: { span: 8 },
-      defaultValue: 0,
+      defaultValue: '',
       componentProps: {
         labelWidthMode: 'fix',
         labelFixWidth: 120,
         responsive: false,
         width: '100%',
         span: '',
-        defaultValue: 0,
+        min:0,
+        defaultValue: '',
         step: 1,
         disabled: false,
         showLabel: true,

src/views/mdm/PipeGasDownloadPoint/index.vue

@@ -102,7 +102,7 @@
       },
       schemas: customSearchFormSchema,
       fieldMapToTime: [],
-      showResetButton: false,
+      showResetButton: true,
     },
     beforeFetch: (params) => {
       return { ...params, FormId: formIdComputedRef.value, PK: 'id' };
@@ -121,13 +121,19 @@
       dataIndex: 'action',
       slots: { customRender: 'action' },
     },
+    rowSelection: {
+      type: 'checkbox',
+      onChange: onSelectChange
+    },
     tableSetting: {
       size: false,
       setting: false,
     },
     
   });
-  
+  function onSelectChange(rowKeys: string[]) {
+    selectedKeys.value = rowKeys;
+  }
   function dbClickRow(record) {
     if (!actionButtonConfig?.value.some(element => element.code == 'view')) {
       return;
@@ -158,7 +164,8 @@
         query: {
           formPath: 'mdm/PipeGasDownloadPoint',
           formName: formName,
-          formId:currentRoute.value.meta.formId
+          formId:currentRoute.value.meta.formId,
+          isView: true
         }
       });
     }

src/views/mdm/PipelineGgasLine/components/Form.vue

@@ -24,7 +24,7 @@
   const { filterFormSchemaAuth } = usePermission();
   const { mergeFormSchemas,mergeFormEventConfigs } = useFormConfig();
   const { currentRoute } = useRouter();
-
+  const isView = currentRoute.value.query.isView
   const RowKey = 'id';
   const emits = defineEmits(['changeUploadComponentIds','loadingCompleted', 'form-mounted']);
   const props = defineProps({
@@ -52,7 +52,7 @@ watch(
     if (newVal.ownSign === 'Y') {
       data.formDataProps.schemas?.forEach(v => {
         if (v.field === 'staCodeLng') {
-          v.componentProps.disabled = false
+          v.componentProps.disabled = (isView ? true : false)
           v.componentProps.required = true
         }
       })
@@ -80,6 +80,7 @@ watch(
     formProps.schemas?.forEach(v => {
         if (v.field === 'staCodeLng') {
           v.componentProps.staticOptions = b
+          v.componentProps.disabled = (isView ? true : false)
         }
       })
     try {

src/views/mdm/PipelineGgasLine/index.vue

@@ -164,7 +164,8 @@
         query: {
           formPath: 'mdm/PipelineGgasLine',
           formName: formName,
-          formId:currentRoute.value.meta.formId
+          formId:currentRoute.value.meta.formId,
+          isView:true
         }
       });
     }