Merge branch 'master' of http://222.71.245.114:9086/r/HIA24016N_PipeLineDemo

schangxiang@126.com

2025-04-29 27ba504441037666e787ded85b4af2f65be65c17

 HIAWms/web/src/components/ProjectConfig/ProjectConfig.tsx

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,162 @@
import { defineComponent, Fragment, ref } from 'vue'
import BaseDialog from '../BaseDialog/BaseDialog'
import { useVModel } from '@vueuse/core'
import styles from './ProjectConfig.module.scss'
import { getProjectConfig, createWidget } from '@/api/project-api'
import { menu, menuMap } from '@/config/menu'
import Icon from '../Icon/Icon'
import IconButton from '../IconButton/IconButton'
import DyForm from '../DyForm/DyForm'
import { ElLoading, ElMessage } from 'element-plus'

export default defineComponent({
  name: 'project',
  props: {
    modelValue: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, { emit }) {
    const visible = useVModel(props, 'modelValue', emit)
    const baseVisible = ref(false)
    const build = ref([])
    const local = ref([])
    const formData = ref({})
    const formRef = ref()
    const openType = ref(1)
    const onOpenDialog = async () => {
      const buildProd = await getProjectConfig('.build.prod')
      const localProd = await getProjectConfig('.build.local')
      if (buildProd) {
        try {
          build.value = (
            (buildProd.data && buildProd.data.split('\n')) ||
            []
          ).filter((v) => v)
          local.value = (
            (localProd.data && localProd.data.split('\n')) ||
            []
          ).filter((v) => v)
        } catch (error) {
          console.error(error)
        }
      }
    }
    const onConfirm = () => {
      visible.value = false
    }
    const onClose = () => {
      visible.value = false
    }
    const onAddWidget = (type: number) => {
      baseVisible.value = true
      openType.value = type
    }
    const onBaseConfirm = async () => {
      await formRef.value.validate()
      const loading = ElLoading.service({
        lock: true,
        text: '创建中，请稍后...',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      loading.close()
      await createWidget({
        ...formData.value,
        type: openType.value,
        menu,
        menuMap,
      })

      onBaseClose()
    }
    const onBaseClose = () => {
      baseVisible.value = false
    }
    return () => {
      return (
        <Fragment>
          <BaseDialog
            onOpen={onOpenDialog}
            width="700px"
            title="项目配置"
            v-model={visible.value}
            onConfirm={onConfirm}
            onClose={onClose}
          >
            <div class={styles.projectConfig}>
              <div class={styles.leftPane}>
                <div class={styles.header}>
                  <h3 style="margin:0;">业务组件</h3>
                  <IconButton
                    onClick={() => onAddWidget(1)}
                    icon="add-p"
                    status="add"
                  >
                    æ·»åŠ 
                  </IconButton>
                </div>
                <div class={styles.list}>
                  {local.value.length ? (
                    local.value.map((item) => (
                      <div class={styles.item}>
                        <div class={styles.itemContent}>
                          <span class={styles.span}>{menuMap[item]?.name}</span>
                        </div>
                        <el-tag>{item}</el-tag>
                      </div>
                    ))
                  ) : (
                    <el-empty style="margin-left: 39%;" />
                  )}
                </div>
              </div>
            </div>
          </BaseDialog>
          <BaseDialog
            title="添加组件"
            v-model={baseVisible.value}
            onConfirm={onBaseConfirm}
            onClose={onBaseClose}
          >
            <DyForm
              v-model:formData={formData.value}
              ref={formRef}
              formItemProps={[
                {
                  prop: 'widgetName',
                  label: '组件名称',
                  el: 'input',
                  placeholder: '请输入组件名称',
                  rules: [
                    {
                      required: true,
                      message: '请输入组件名称',
                    },
                  ],
                },
                {
                  prop: 'widgetId',
                  label: '组件ID',
                  placeholder: 'ProcessManagement',
                  el: 'input',
                  rules: [
                    {
                      required: true,
                      message: '请输入组件ID',
                    },
                    {
                      message: '首字母必须为大写，不能有数字和特殊符号',
                      pattern: /^[A-Z][A-Za-z]*$/,
                      trigger: 'blur',
                    },
                  ],
                },
              ]}
            ></DyForm>
          </BaseDialog>
        </Fragment>
      )
    }
  },
})