Ti-Element-Vue

nvm use 16.0.0
npm install -g @vue/cli@4.5.19
vue create ti-element-vue-test

yarn add axios
yarn add element-plus
yarn add ti-element-vue

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import TiElement from 'ti-element-vue'
import 'ti-element-vue/lib/ti-element-vue.css'
import locale from 'element-plus/lib/locale/lang/zh-cn'
import 'element-plus/dist/index.css'
import 'element-plus/theme-chalk/index.css'

// 中文说明 'ti-element-vue/readme/README_CN.md
// English Readme 'ti-element-vue/readme/README_EN.md

createApp(App).use(ElementPlus, { locale }).use(TiElement).mount('#app')

export const status = {
  'el-switch': {
    activeValue: '1',
    inactiveValue: '2'
  }
}
export const likeStatus = [
  { value: '1', label: 'Like' },
  { value: '2', label: 'Unlike' }
]
export const formConfig = [
  {
    label: 'Code',
    prop: 'code',
    type: 'el-input',
    placeholder: 'Write code',
    rules: [{ required: true, message: 'Write code', trigger: 'blur' }]
  },
  {
    label: 'Status',
    prop: 'status',
    type: 'el-select',
    placeholder: 'Select..',
    clearable: true
  },
  {
    label: '',
    prop: 'isSetting',
    type: 'el-checkbox',
    placeholder: 'Active Settings',
    componentLabel: 'isSetting',
  },
  {
    label: 'ICON',
    prop: 'icon',
    type: 'el-upload',
    placeholder: 'selected file',
  },
  {
    type: 'slot',
    label: 'Your Place',
    slotName: 'yourself',
    style: {
      width: 'calc(100% - 130px)'
    }
  },
  {
    style: {
      width: '100%',
      height: '5px',
      backgroundColor: '#cccccc'
    }
  },
  {
    label: 'Author',
    prop: 'createPerson',
    type: 'el-input',
    rules: [],
    disabled: true
  }
]

export const tableConfig = [
  {
    prop: 'option',
    label: 'Option',
    isClickColumn: true,
    clickColumn: [
      {
        key: 'edit',
        label: 'Edit'
      },
      {
        key: 'delete',
        label: 'Delete'
      }
    ]
  },
  {
    prop: 'code',
    label: 'Code'
  },
  {
    prop: 'status',
    label: 'Status',
    type: 'el-switch',
    ...status['el-switch'],
    isSelectable: true
  },
  {
    prop: 'likeStatus',
    label: 'Like',
    options: likeStatus
  }
]

<template>
  <div>
    <img alt="Vue logo" src="./assets/logo.png"/>
        <TiSearch :form-model="modeData.formInline" :form-config="formConfig" :is-submit="true" :submitLabel="'Save'">
      <template #yourself>yourself slot</template>
    </TiSearch>
    <TiTable :table-data="tableData" :table-config="tableConfig">
    </TiTable>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { formConfig, tableConfig } from './config'

const modeData = reactive<any>({
  formInline: {}
})
const tableData = ref<any>([
  { option: '》', code: 'Tui-TANCE-TXH', likeStatus: '2', status: '1' }
])
</script>

module.exports = {
  env: {
    browser: true,
    commonjs: true,
    es6: true,
    node: true
  },
  extends: ['eslint:recommended', 'plugin:vue/vue3-recommended'],
  parserOptions: {
    ecmaVersion: 12,
    parser: '@typescript-eslint/parser',
    sourceType: 'module'
  },
  plugins: ['vue', '@typescript-eslint'],
  rules: {
    'vue/no-unused-vars': 'off',
    'no-unused-vars': 'off',
    'import/no-unresolved': 'off',
    'import/extensions': 'off',
    'import/no-absolute-path': 'off',
    'import/no-extraneous-dependencies': 'off',
    'vue/no-multiple-template-root': 'off',
    'vue/html-self-closing': 'off',
    'no-console': 'off',
    'no-bitwise': 'off',
    'no-param-reassign': 'off'
  }
}