@qqt-product/system 0.0.1

package/src/lib/components/QUsageList/src/QUsageList.vue

@@ -0,0 +1,82 @@
+<template>
+  <div style="height: 100%">
+    <q-list-layout ref="listLayoutRef" v-if="!showEditPage" :pageData="pageData" :apiUrls="apiUrls" />
+  </div>
+</template>
+
+<script lang="ts">
+//JS
+import { defineComponent, reactive, toRefs } from 'vue'
+//hook
+import { useConfigData } from './useConfigData'
+
+export default defineComponent({
+  name: 'QUsageList',
+  props: {
+    userInfo: {
+      type: Object,
+      defalut: () => {
+        return {}
+      },
+    },
+  },
+  setup(props) {
+    //data
+    const pageData = reactive({
+      statusConfig: {
+        show: false,
+      },
+      optColumn: {
+        attrs: {},
+        extend: {},
+        optColumnList: [
+          // { authorityCode: 'role#Role:edit', type: 'edit', title: srmI18n(`${getLangAccount()}#i18n_title_edit`, '编辑'), clickFn: this.edit },
+          // { authorityCode: 'role#Role:copy', type: 'copy', title: srmI18n(`${getLangAccount()}#i18n_title_copy`, '复制'), clickFn: this.handleCopy },
+          // { authorityCode: 'role#Permissio:saveRolePermission', type: 'view', title: srmI18n(`${getLangAccount()}#i18n_title_impower`, '授权'), clickFn: this.handlePerssion, allow: this.allowDelete },
+          // { authorityCode: 'role#Role:delete', type: 'delete', title: srmI18n(`${getLangAccount()}#i18n_title_delete`, '删除'), clickFn: this.handleDelete, allow: this.allowDelete },
+          // { authorityCode: 'role#Role:userSet', type: 'usersList', title: srmI18n(`${getLangAccount()}#i18n_btn_jDER_36c46210`, '用户配置'), clickFn: this.handleUsersList },
+        ],
+      },
+      buttonConfig: {
+        attrs: {},
+        extend: {},
+        buttons: [
+          // {authorityCode: 'role#Role:add', label: srmI18n(`${getLangAccount()}#i18n_title_add`, '新增'),  clickFn: this.add, type: 'primary'},
+          //             {label: srmI18n(`${getLangAccount()}#i18n_title_listCustom`, '列自定义'), icon: 'setting', clickFn: this.settingColumns},
+          //             {label: srmI18n(`${getLangAccount()}#i18n_title_helpText`, '帮助说明'), icon: 'file-text', folded: true, isDocument: true, clickFn: this.showHelpText},
+          //             {label: srmI18n(`${getLangAccount()}#i18n_title_attachment`, '说明附件'), icon: 'file-pdf', folded: true, isDocument: true, clickFn: this.showHelpPDF}
+        ],
+      },
+      queryConfig: {
+        attrs: {},
+        extend: {},
+        form: [
+          {
+            type: 'input',
+            label: '角色名称',
+            fieldName: 'roleName',
+            placeholder: '请输入角色名称',
+          },
+        ],
+        formState: {},
+      },
+      pagerConfig: {},
+    })
+    //data-hook
+    const { showEditPage, apiUrls } = useConfigData()
+    const { userInfo } = toRefs(props)
+    console.log('userInfos', userInfo)
+    //methods
+    // function allowDelete() {
+    //   console.log('userInfo.value?.userInfo?.elsAccount', userInfo.value?.userInfo?.elsAccount)
+    //   if (userInfo.value?.userInfo?.elsAccount != '100000') {
+    //     return true
+    //   } else {
+    //     return false
+    //   }
+    // }
+    return { showEditPage, apiUrls, pageData }
+  },
+})
+</script>
+<style scoped></style>

package/src/lib/components/QUsageList/src/useConfigData.ts

@@ -0,0 +1,20 @@
+import { shallowRef, ref } from 'vue'
+// import type { MapObjectNoneType } from './types'
+// import { VxeTableInstance } from 'vxe-table'
+// import type  {}
+export function useConfigData() {
+  //响应
+
+  const apiUrls = shallowRef({
+    list: '/account/role/list',
+    columnsCode: 'elsRole',
+    delete: '/account/role/delete',
+    copy: '/account/role/copy',
+    userRoleList: '/account/elsSubAccount/userRoleList',
+  })
+  const uploadShow = shallowRef<boolean>(false)
+  const showEditPage = shallowRef<boolean>(false)
+  const currentEditRow = ref({})
+  const listLayoutRef = ref()
+  return { apiUrls, showEditPage, currentEditRow, listLayoutRef, uploadShow }
+}

package/src/lib/components/QcustomConfigEdit/component/AddDictCodeModal.vue

@@ -0,0 +1,140 @@
+<template>
+  <div>
+    <vxe-modal title="数据字典" width="760" v-model="visible" :confirmLoading="confirmLoading" type="confirm" show-footer @confirm="selectedOk" @cancel="close">
+      <a-radio-group v-model="inputType" button-style="solid" style="margin-bottom: 12px" @change="hanldeRadioChange">
+        <a-radio-button value="sysDictCode"> 系统字典 </a-radio-button>
+        <a-radio-button value="dictCode"> 企业字典 </a-radio-button>
+        <a-radio-button value="manual"> 手动输入 </a-radio-button>
+      </a-radio-group>
+      <div v-if="inputType === 'manual'">
+        <a-input v-model="dataSource" placeholder="请输入数据源地址或字典编码" />
+      </div>
+      <div v-else>
+        <a-spin :spinning="loading">
+          <a-input-search placeholder="请输入关键字" style="margin-bottom: 8px" v-model="keyWord" @search="onSearch" enterButton />
+          <vxe-grid
+            border
+            resizable
+            show-overflow
+            highlight-hover-row
+            max-height="320"
+            row-id="id"
+            size="mini"
+            :loading="loading"
+            ref="selectGrid"
+            :seq-config="{ startIndex: ((tablePage.currentPage as number) - 1) * (tablePage.pageSize as number) }"
+            :data="tableData"
+            :pager-config="tablePage"
+            :radio-config="{ highlight: true, reserve: true, trigger: 'row' }"
+            :columns="columns"
+            @page-change="handlePageChange"
+          >
+          </vxe-grid>
+        </a-spin>
+      </div>
+    </vxe-modal>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { HttpClient, INJECT_HTTP, MapObjectNoneType } from '../../../utils/global.types'
+import { message } from '@qqt-product/ui'
+import type { VxeGridPropTypes, VxeTableDefines } from 'vxe-table'
+export default defineComponent({
+  name: 'AddDictCodeModal',
+  inject: [INJECT_HTTP],
+  data() {
+    return {
+      visible: false,
+      loading: false,
+      confirmLoading: false,
+      inputType: 'sysDictCode',
+      dataSource: '',
+      keyWord: '',
+      columns: [
+        { type: 'radio', width: 40 },
+        { type: 'seq', title: '序号', width: 60 },
+        { field: 'dictCode', title: '字典编码' },
+        { field: 'dictName', title: '字典名称' },
+        { field: 'description', title: '字典描述' },
+      ] as VxeTableDefines.ColumnOptions[],
+      url: '',
+      queryParams: {},
+      tableData: [],
+      tablePage: {
+        total: 0,
+        currentPage: 1,
+        pageSize: 20,
+        align: 'left',
+        pageSizes: [20, 50, 100, 200, 500],
+        layouts: ['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'PageCount', 'Total'],
+        perfect: true,
+      } as VxeGridPropTypes.PagerConfig,
+    }
+  },
+  methods: {
+    hanldeRadioChange(e: MapObjectNoneType) {
+      let value = e.target.value || ''
+      let arr = ['dictCode', 'sysDictCode']
+      if (arr.includes(value)) {
+        this.loadData()
+      }
+    },
+    loadData() {
+      this.loading = true
+      let params = { pageSize: this.tablePage.pageSize, pageNo: this.tablePage.currentPage, keyWord: this.keyWord }
+      const url = this.inputType === 'sysDictCode' ? '/base/dict/listSys' : '/base/dict/list'
+      let http = this.http as HttpClient
+      http
+        .get({ url, params })
+        .then((res) => {
+          if (res.success) {
+            let list = res.result.records || []
+            this.tableData = list
+            this.tablePage.total = res.result.total
+            let selectGrid = this.$refs.selectGrid as MapObjectNoneType
+            if (this.$refs.selectGrid && selectGrid.clearRadioReserve) {
+              selectGrid.clearRadioReserve()
+            }
+          }
+        })
+        .finally(() => {
+          this.loading = false
+        })
+    },
+    open() {
+      // 清空默认值
+      this.dataSource = ''
+      this.keyWord = ''
+      this.loadData()
+      this.visible = true
+    },
+    close() {
+      this.visible = false
+    },
+    selectedOk() {
+      let selectedData = {}
+      if (this.inputType == 'manual' && this.dataSource) {
+        selectedData = { dictCode: this.dataSource }
+      } else {
+        if (this.$refs.selectGrid) selectedData = (this.$refs.selectGrid as MapObjectNoneType).getRadioRecord()
+      }
+      if (selectedData) {
+        this.visible = false
+        this.$emit('ok', selectedData)
+      } else {
+        message.warning('请选择数据')
+      }
+    },
+    handlePageChange({ currentPage, pageSize }: MapObjectNoneType) {
+      this.tablePage.currentPage = currentPage
+      this.tablePage.pageSize = pageSize
+      this.loadData()
+    },
+    onSearch(keyWord: string) {
+      this.keyWord = keyWord
+      this.loadData()
+    },
+  },
+})
+</script>

package/src/lib/components/QcustomConfigEdit/component/TempalePreviewModal.vue

@@ -0,0 +1,100 @@
+<template>
+  <div>
+    <vxe-modal centered title="预览" :width="1000" v-model="visible" class="tempale-preview-modal" show-footer>
+      <div>
+        <!-- {{ currentEditRow }} -->
+        <!-- <a-form layout="inline"> -->
+        <!-- <a-form-item>
+            <span slot="label">
+              {{ $srmI18n(`${$getLangAccount()}#i18n_field_xFCK_2c23c46b`, '布局模式') }}
+              <a-tooltip title="暂business模板支持">
+                <a-icon type="exclamation-circle" />
+              </a-tooltip>
+            </span>
+            <m-select v-model="modelLayout" dict-code="srmLayout" :placeholder="$srmI18n(`${$getLangAccount()}#i18n_alert_ViFxFVK_737ad3cc`, '请选择布局样式')" />
+          </a-form-item> -->
+        <!-- </a-form> -->
+        <q-edit-page-layout isUseLocalData="true" :localData="currentEditRow" :currentRow="currentEditRow" :businessType="currentEditRow.businessType"> </q-edit-page-layout>
+      </div>
+    </vxe-modal>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+// import BusinessLayout from '@comp/template/business/BusinessLayout'
+// import { businessUtilMixin } from '@comp/template/business/businessUtilMixin.js'
+// import fieldSelectModal from '@comp/template/fieldSelectModal'
+export default defineComponent({
+  name: 'TempalePreviewModal',
+  emits: ['update:openTure'],
+  props: {
+    currentEditRow: {
+      type: Object,
+      default() {
+        return {}
+      },
+    },
+    openTure: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      visible: false,
+      loading: false,
+      remoteJsFilePath: '',
+      modelLayout: 'tab',
+      // modelLayoutArr: [
+      //   {
+      //     key: 'tab',
+      //     value: this.$srmI18n(`${this.$getLangAccount()}#i18n_dict_WWWxF_69becf2`, 'tab布局'),
+      //   },
+      //   {
+      //     key: 'collapse',
+      //     value: this.$srmI18n(`${this.$getLangAccount()}#i18n_dict_qNs_1475877`, '可折叠'),
+      //   },
+      //   {
+      //     key: 'unCollapse',
+      //     value: this.$srmI18n(`${this.$getLangAccount()}#i18n_dict_xqNs_24c2334a`, '不可折叠'),
+      //   },
+      //   {
+      //     key: 'masterSlave',
+      //     value: this.$srmI18n(`${this.$getLangAccount()}#i18n_menu_dNmK_24c49586`, '主从格式'),
+      //   },
+      // ],
+    }
+  },
+  mixins: [],
+  components: {
+    // BusinessLayout,
+    // fieldSelectModal,
+  },
+  methods: {
+    // close() {
+    //   this.visible = false
+    // },
+    // open(data) {
+    //   this.remoteJsFilePath = data.url
+    //   this.visible = true
+    // },
+  },
+  watch: {
+    openTure(nw) {
+      this.visible = nw
+    },
+  },
+})
+</script>
+
+<style lang="less" scoped>
+.tempale-preview-modal {
+  :deep(.page-container .edit-page .ant-spin-nested-loading) {
+    height: 600px;
+  }
+  :deep(.ant-form-item-control-wrapper) {
+    width: 150px;
+  }
+}
+</style>

package/src/lib/components/QcustomConfigEdit/component/dataFormatComponent.tsx

@@ -0,0 +1,100 @@
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'DataFormatComponent',
+  emits: ['change'],
+  model: {
+    prop: 'value',
+    event: 'change',
+  },
+  props: {
+    value: {
+      type: String || Number,
+      default: '',
+    },
+    configData: {
+      type: Object,
+      default: () => {
+        return {}
+      },
+    },
+    dictCode: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      dataFormatOptions: ['YYYY-MM-DD', 'YYYY-MM-DD HH:mm', 'YYYY-MM-DD HH:mm:ss'],
+      dataFloatOptions: [
+        { key: 1, value: '#.0' },
+        { key: 2, value: '#.00' },
+        { key: 3, value: '#.000' },
+        { key: 4, value: '#.0000' },
+        { key: 5, value: '#.00000' },
+        { key: 6, value: '#.000000' },
+      ],
+      realVue: '',
+    }
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler(val) {
+        this.realVue = val
+      },
+    },
+  },
+  methods: {
+    inputChange(e: Event) {
+      const val = (e.target as HTMLInputElement).value
+      console.log('1231232', val)
+      //   this.$emit('input', val)
+      this.$emit('change', val)
+      //   this.$emit('update:value', val)
+    },
+    selectChange(val: string | number) {
+      //   this.$emit('input', val)
+      //   this.$emit('change', val)
+      this.$emit('change', val)
+    },
+    floatChange(val: string | number) {
+      //   this.$emit('input', val)
+      //   this.$emit('change', val)
+      this.$emit('change', val)
+    },
+  },
+  render() {
+    const opts = this.dataFormatOptions.map((n) => <a-select-option value={n}>{n}</a-select-option>)
+    const floatOpts = this.dataFloatOptions.map((n) => (
+      <a-select-option key={n.key} value={n.value}>
+        {n.value}
+      </a-select-option>
+    ))
+    const props = {
+      allowClear: true,
+    }
+    let $EL: any
+    switch (this.configData.fieldType) {
+      case 'date':
+        $EL = (
+          <a-select style={{ width: '100%' }} vModel={this.realVue} onChange={this.selectChange} {...{ props }}>
+            {opts}
+          </a-select>
+        )
+        break
+
+      case 'float':
+        $EL = (
+          <a-select style={{ width: '100%' }} vModel={this.realVue} onChange={this.floatChange} {...{ props }}>
+            {floatOpts}
+          </a-select>
+        )
+        break
+
+      default:
+        $EL = <a-input vModel={this.realVue} onChange={this.inputChange} />
+        break
+    }
+    return [<div class="data-form-comp">{$EL}</div>]
+  },
+})

package/src/lib/components/QcustomConfigEdit/component/regexComponent.tsx

@@ -0,0 +1,71 @@
+import { defineComponent } from 'vue'
+import { regExpOptions } from '../../../../lib/utils/regexp'
+
+interface rexgArryTs {
+  label?: string
+  value?: string
+  msg?: string
+}
+
+export default defineComponent({
+  name: 'regexComponent',
+  emits: ['updateInfo', 'change'],
+  model: {
+    prop: 'value',
+    event: 'change',
+  },
+  props: {
+    value: {
+      type: String || Number,
+      default: '',
+    },
+    configData: {
+      type: Object,
+      default: () => {
+        return {}
+      },
+    },
+    dictCode: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      dataFormatOptions: ['YYYY-MM-DD', 'YYYY-MM-DD HH:mm:ss'],
+      realVue: '',
+    }
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler(val) {
+        this.realVue = val
+      },
+    },
+  },
+  methods: {
+    selectChange(val: string | number) {
+      if (val) {
+        const { msg = '' } = regExpOptions.find((n) => n.value === val) as rexgArryTs
+        this.$emit('updateInfo', { msg }) // 正则验证提示语
+        this.$emit('change', val)
+      } else {
+        this.$emit('updateInfo', { msg: '' }) // 正则验证提示语
+        this.$emit('change', '')
+      }
+    },
+  },
+  render() {
+    const opts = regExpOptions.map((n) => <a-select-option value={n.value}>{n.label}</a-select-option>)
+    const props = {
+      allowClear: true,
+    }
+    const $EL = (
+      <a-select style={{ width: '100%' }} vModel={this.realVue} onChange={this.selectChange} {...{ props }}>
+        {opts}
+      </a-select>
+    )
+    return <div class="data-form-comp">{$EL}</div>
+  },
+})

package/src/lib/components/QcustomConfigEdit/index.ts

@@ -0,0 +1,6 @@
+import QcustomConfigEdit from './src/QcustomConfigEdit.vue'
+import qqtUtils from '@qqt-product/utils'
+
+export default qqtUtils.withInstall(QcustomConfigEdit)
+
+export { QcustomConfigEdit }