vite --template vue & typescript 搭建项目 TSX

yarn add element-plus

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)

yarn add unplugin-vue-components

// vite.config.ts
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default {
  plugins: [
    // ...
    Components({
      resolvers: [ElementPlusResolver()],

yarn add axios@next

+ import axios from 'axios';
+ app.config.globalProperties.$http = axios;

export function GET(app,url,params){
    return app.$http.get(url,{ params });
export function POST(app,url,data){
    return app.$http.post(url, data);

// vite.config.js
import appConfig from './public/static/app-config.json'
const { BASE_API: {  host, port } } = appConfig;
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: `${host}:${port}`,
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')

// vite 的方法导入组件
const modules = import.meta.globEager('./*.tsx');
export default install = function(app) {
    for (const path in modules) {
        const mod = modules[path];
        const compName = mod.default.name || path.replace(/^\.\/(.*)\.tsx$/, "$1");
        const comp = mod.default;
        app.component(compName, comp);

import { defineComponent } from "@vue/runtime-core";
import { computed, ref } from "vue";
export default defineComponent({
    setup(){
        const str = ref<String>('');
        return { str }
    render(){
        return (
                <input type="text" v-model:value={this.str} />

yarn add vue-router@next

import { createRouter, createWebHistory } from 'vue-router'
const routerHistory = createWebHistory();
const router = createRouter({
    history: routerHistory,
    routes: [{
            path: '/',
            redirect: '/home'
            path: '/home',
            component: () => import('@/views/Home')
            path: '/example',
            component: () => import('@/views/Example')
export default router

// App.tsx
    setup(){
        const store = useStore();
        onMounted(()=>{
            window.addEventListener('beforeunload',()=>{
                sessionStorage.setItem("store", JSON.stringify(store.state));
            if(sessionStorage.getItem('store')){
                store.replaceState(Object.assign(store.state,JSON.parse(sessionStorage.getItem('store'))));

// App.tsx
import { defineComponent, KeepAlive } from "vue";
import { RouterView } from "vue-router";
export default defineComponent({
    name: "App",
    render() {
        return (
            <div class="App">
                <RouterView>
                        ({Component})=>{
                            return <KeepAlive include={['ServiceList']}>
                                <Component />
                            </KeepAlive>
                </RouterView>

import { defineComponent, reactive } from "vue";
interface IState {
  scroll?:number;
export default defineComponent({
  name: "ServiceList",
  setup() {
    const state = reactive<IState>({
      scroll: 0
    return {
      state
  beforeRouteLeave(to,from,next){
    this.state.scroll = (this.$refs.serviceList as Element).scrollTop;
    next();
  beforeRouteEnter(to, from, next) {
    // 从其他地方过来的还是重新查询
    next(vm=>{
      if (!/^\/service\-detail\/[a-zA-Z0-9]+$/.test(from.path)) {
        // @ts-ignore
        vm.state.scroll = 0;
        // @ts-ignore
        vm.state.serviceDate = dayjs();
  activated(){
    // @ts-ignore
    this.$refs.serviceList.scrollTop = this.state.scroll;
  render() {
    return (
        <shell title="" v-slots={{
          default: () => (
            <div ref="serviceList" class="overflow-y-scroll h-full"></div>
        </shell>

// global component Shell
// Shell.tsx
import { defineComponent } from 'vue';
export default defineComponent({
    name: "Shell",
    setup( props, context ){
        return {
            props
    render(){
        return <>
            <h1>{ props.title }</h1>
            <div>{ $slots.default?.() }</div>

import




    
 { ref, reactive } from 'vue';
interface IState{
    name: string;
    age: number;
export default function App( props, context ){
    let count = ref<number>(0);
    let state = reactive<IState>({
        name: '张三',
        age: 22
    return <></>;

import { useRouter } from "vue-router";
export default function App( props, context ){
    const router = useRouter();
    return <></>;

import { useStore } from "vuex";
export default function App( props, context ){
    const store = useStore();
    return <></>;

import { ref, computed } from 'vue';
export default function App( props, context ){
    let firstVal = ref<number>(1);
    let secondVal = computed(()=> firstVal + 1);
    return <>{ secondVal.value }</>;

import { ref, watch, watchEffect } from 'vue';
export default function App( props, context ){
    let val = ref<number>(1);
    let valHistory = ref([]);
    watch(()=>val, (val, preVal)=>{
        valHistory.push(val);
    return <>
        <button onClick={ ()=>{ val++ } }>点我</botton>
             valHistory.map(item => <div>{item}</div>)

import { onMounted } from 'vue';
export default function App( props, context ){
    onMounted(()=>{ });
    return <></>;

get-ExecutionPolicy
set-ExecutionPolicy RemoteSigned

yarn add font-awesome

// main.js
import "font-awesome/css/font-awesome.min.css"

<!-- 举例 fa-address-book -->
<i class="fa fa-address-book"></i>

--legacy-peer-deps

import { createApp } from 'vue'
const app = createApp({})
// 注册
app.directive('my-directive', {
  // 指令是具有一组生命周期的钩子：
  // 在绑定元素的 attribute 或事件监听器被应用之前调用
  created() {},
  // 在绑定元素的父组件挂载之前调用
  beforeMount() {},
  // 绑定元素的父组件被挂载时调用
  mounted() {},
  // 在包含组件的 VNode 更新之前调用
  beforeUpdate() {},
  // 在包含组件的 VNode 及其子组件的 VNode 更新之后调用
  updated() {},
  // 在绑定元素的父组件卸载之前调用
  beforeUnmount() {},
  // 卸载绑定元素的父组件时调用
  unmounted() {}
// 注册 (功能指令)
app.directive('my-directive', () => {
  // 这将被作为 `mounted` 和 `updated` 调用
// getter, 如果已注册，则返回指令定义
const myDirective = app.directive('my-directive')

import { createApp } from 'vue'
const app = Vue.createApp({})
app.directive('drag', {
  mounted(el) {
    el.onmousedown = function (e1) {
      // mouse position in this
      const mouseBoxX = e1.offsetX;
      const mouseBoxY = e1.offsetY;
      document.onmousemove = (e2) => {
        const mouseBodyX2 = e2.clientX;
        const mouseBodyY2 = e2.clientY;
        var x = mouseBodyX2 - mouseBoxX;
        var y = mouseBodyY2 - mouseBoxY;
        const { width, height } = window.getComputedStyle(el);
        const containerWidth = document.body.clientWidth;




    

        const containerHeight = document.body.clientHeight;
        console.log(width, height,containerWidth,
          containerHeight);
        const { x: left, y: top } = getPositionWithBoundary({
          minX: 0,
          minY: 0,
          maxX: containerWidth,
          maxY: containerHeight,
          X: x,
          Y: y,
          width: parseInt(width),
          height: parseInt(height),
        el.style.left = left+'px';
        el.style.top = top+'px';
      document.onmouseup = function () {
        this.onmousemove = this.onmouseup = null;
function getPositionWithBoundary(
  { minX, minY, maxX, maxY, X, Y, width, height } = {
    minX: 0,
    minY: 0,
    maxX: 0,
    maxY: 0,
    X: 0,
    Y: 0,
    width: 0,
    height: 0,
  if (X < minX) X = minX;
  if (X + width > maxX) X = maxX - width;
  if (Y < minY) Y = minY;
  if (Y + height > maxY) Y = maxY - height;
  return {
    x: X,
    y: Y,

<!-- isShow state -->
<DragBox title="查询结果" className="search-result" :height="550"  @close="isShow = false" v-show="isShow" >
  <template v-slot:actions>
    <!-- 你自定义的actions -->
  </template>
  <template class="content" @click.stop @mousedown.stop v-slot:body>
    <!-- 你要展示在窗体中的内容 body -->
  </template>
</DragBox>

<template>
    @author songgh @带只拖鞋去流浪 
    @description 拖拽
    :class="[
      'drag-box',
      className,
        'mini-drag-box': showType === 'mini',
        'full-drag-box': showType === 'full',
    ref="box"
    :style="{
      ...styles,
      top: py,
      left: px,
      height: `${height}px`,
      width: `${width}px`,
    <section
      :class="['box-header', headerClassName]"
      :style="{
        'background-color': `rgba(64, 0, 255, ${backgroundOpacity})`,
        ...headerStyles,
      ref="header"
      @dblclick="
        showType = ['full', 'mini'].includes(showType) ? 'normal' : 'full'
        :class="['box-title', titleClassName]"
        :style="{
          ...titleStyles,
        {{ title }}
      <section class="box-actions" @mousedown.stop>
        <slot name="actions"></slot>
        <div class="must-actions">
            class="el-icon-minus action"
            v-if="['normal', 'full'].includes(showType)"
            @click.stop="showType = 'mini'"
            class="el-icon-copy-document action"
            v-if="['mini', 'full'].includes(showType)"
            @click.stop="showType = 'normal'"
            class="el-icon-full-screen action"
            v-if="['mini', 'normal'].includes(showType)"
            @click.stop="showType = 'full'"
          <i class="el-icon-close action" @click="$emit('close')"></i>
        </div>
      </section>
    </section>
    <section




    

      :class="['box-body', bodyClassName]"
      :style="{
        'background-color': `rgba(255, 255, 255, ${backgroundOpacity})`,
        ...bodyStyles,
      @mousedown.stop
      <slot name="body"></slot>
    </section>
  </div>
</template>
<script>
 * @author songgh
 * @description 计算边界
const getPositionWithBoundary = (
  { minX, minY, maxX, maxY, X, Y, width, height } = {
    minX: 0,
    minY: 0,
    maxX: 0,
    maxY: 0,
    X: 0,
    Y: 0,
    width: 0,
    height: 0,
) => {
  if (X < minX) X = minX;
  if (X + width > maxX) X = maxX - width;
  if (Y < minY) Y = minY;
  if (Y + height > maxY) Y = maxY - height;
  return {
    x: X,
    y: Y,
export default {
  name: "WarningBox",
  props: {
    height: {
      type: Number,
      default: 500,
    width: {
      type: Number,
      default: 800,
    className: {
      type: String,
      default: "",
    styles: {
      type: Object,
      default: () => ({}),
    headerClassName: {
      type: String,
      default: "",
    headerStyles: {
      type: Object,
      default: () => ({}),
    bodyClassName: {
      type: String,
      default: "",
    bodyStyles: {
      type: Object,
      default: () => ({}),
    title: {
      type: String,
      default: "标题",
    titleClassName: {
      type: String,
      default: "",
    titleStyles: {
      type: Object,
      default: () => ({}),
    // show: {
    //   type: Boolean,
    //   default: false,
    // },
    backgroundOpacity: {
      type: Number,
      default: 0.8,
  data() {
    return {
      px: "calc(50% - 400px)",
      py: "calc(50% - 250px)",
      showType: "normal",
  mounted() {
    this.$refs.header.onmousedown = this.handleMouseDown;
  methods: {
     * @author songgh
     * @description 移动弹窗
    handleMouseDown(e1) {
      // mouse position in this
      const mouseBoxX = e1.offsetX;
      const mouseBoxY = e1.offsetY;
      document.onmousemove = (e2) => {
        const mouseBodyX2 = e2.clientX;
        const mouseBodyY2 = e2.clientY;
        const x = mouseBodyX2 - mouseBoxX;
        const y = mouseBodyY2 - mouseBoxY;
        const { width, height } = window.getComputedStyle(this.$refs?.box);
        const containerWidth = document.body.clientWidth;
        const containerHeight = document.body.clientHeight;
        const { x: left, y: top } = getPositionWithBoundary({
          minX: 0,
          minY: 0,
          maxX: containerWidth,
          maxY: containerHeight,
          X: x,
          Y: y,
          width: parseInt(width),
          height: parseInt(height),
        this.$refs.box.style.left = left + "px";
        this.$refs.box.style.top = top + "px";
      document.onmouseup = function () {
        this.onmousemove = this.onmouseup = null;
  computed: {},
</script>
<style lang="scss" scoped>
.drag-box {
  position: fixed;
  border-radius: 10px;
  z-index: 101;
  user-select: none;
  z-index: 9999;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.05);
  .box-header {
    height: 48px;
    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.05);
    border-radius: 10px 10px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    cursor: move;
    .box-title {
      color: #fff;
      line-height: 48px;
    .box-actions {
      display: flex;
      justify-content: center




    
;
      align-items: center;
      .must-actions {
        margin-left: 8px;
        .action {
          color: #000;
          margin-left: 8px;
          cursor: pointer;
          height: 24px;
          width: 24px;
          line-height: 24px;
          text-align: center;
          border-radius: 100%;
          &:nth-child(1) {
            background-color: rgb(68, 255, 0);
          &:nth-child(2) {
            background-color: rgb(255, 234, 0);
          &:nth-child(3) {
            background-color: rgb(255, 64, 0);
  .box-body {
    padding: 16px;
    border-top: none;
    border-radius: 0 0 10px 10px;
    height: calc(100% - 81px);
.mini-drag-box {
  width: 320px !important;
  height: auto !important;
  .box-header {
    border-radius: 10px;
  .box-body {
    display: none;
.full-drag-box {
  width: 100vw !important;
  height: 100vh !important;
  top: 0 !important;
  left: 0 !important;
  background-color: #fff;
  .box-header {
    border-radius: 0;
  .box-body {
    border-radius: 0;
</style> 

cnpm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props --save-dev

module.exports = {
    presets: [ '@vue/cli-plugin-babel/preset', ['@vue/babel-preset-jsx',  {  'injectH': false  }] ]

<script>
// Test.vue
export default {
  name: 'Test',
  components: {},
  directives: {},
  filters: {},
  // 数据
  props: {},
  inject: [],
  provider: () => ({});
  data: () => ({}),
  computed: {},
  watch: {},
  // 生命周期
  beforeCreate(){},
  created(){},
  beforeMount(){},
  mounted(){},
  beforeUpdate(){},
  updated(){},
  beforeDestory(){},
  destory(){},
  // keep-alive
  activated(){},
  deactivated(){},
  // 渲染
  render(){
    const description = 'test component';
    return <div class="test">{description}</div>;
</script>
<style lang="scss" scoped>
@import './test.scss';
// 建议分开文件写
</style>

// test.scss
.test{ }

// test.module.scss
.test{
  // 一些样式
  .testLeft{}
  .testRight{}
}

// Test.jsx
import styles from './test.module.scss'
export default {
  name: 'Test',
  data(){
    return {};
  render(){
    return (<div class={styles.test}>
      <section class={styles.testLeft}></section>
      <section class={styles.testRight}></section>
    </div>);

// props 传一些传不了props。比如 element-ui form 的 :model 传不了，用这个可以传
// on 绑定一些绑定不上的事件。
<Test props={{}} on={{}} />

import _ from "lodash";
import styles from './index.module.scss';
 * @description 配置 Form（已支持 SFC / slot 配置）
 * @author songgh
export default {
  name: "section-form",
  components: {
    MaqueCascader,
    UploadCommentPictureCard,
  props: {
    formOptions: {
      type: Object,
      default: () => ({
        formData: {},
        formPropList: [],
  data() {
    return {
      userId: undefined,
      formData: this.getFormData(),
  mounted() {
    this.userId = window.localStorage.getItem("userId");
  methods: {
    getFormData() {
      let formData = {};
      _.forEach(_.flatten(this.formOptions?.formPropList), item => {
        if (!item?.name) return true;
        formData[item.name] = this.formOptions?.formData[item.name];
        if (item?.inputType === "number" && item?.precision) {
          formData[item?.name] = (+formData[item?.name] || 0).toFixed(
            item.precision
        const { elAppend, elPrepend } = item;
        if (elAppend && elAppend?.name) {
          formData[elAppend.name] = this.formOptions?.formData[elAppend.name];
        if (elPrepend && elPrepend?.name) {
          formData[elPrepend.name] = this.formOptions?.formData[elPrepend.name];
      return {
        ...formData
    // 执行提交表单
    submitForm() {
      let flag = false;
      this.$refs.form?.validate((valid) => {
        if (valid) {
          flag = true;
        } else {
          console.error("formData validate error!");
          return false;
      if (flag) {
        return { ...this.formData }
      } else {
        throw new Error("必填缺失")
     * @description 所有表单验证
    $validate(){
      let flag = false;
      this.$refs.form?.validate((valid) => {
        if (valid) {
          flag = true;
        } else {
          console.error("formData validate error!");
          return false;
      if (flag) {
        return { ...this.formData }
      } else {
        throw new Error("必填缺失")
     * @description 对部分表单验证
    $validateField(){
     * @description 获取 formData
    $formData() {
      return { ...this.formData };
     * @description 重置表单
    $resetFields(){
      this.$refs.form?.resetFields();
     * @description 移除验证
    $clearValidate(arr){
      if(_.isArray(arr)){
        this.$refs.form?.clearValidate(arr);
      }else{
        this.$refs.form?.clearValidate();
    handleInputBlur(item) {
      // 精度处理
      if (item?.inputType === "number" && item?.precision) {
        this.formData[item?.name] = Math.abs(this.formData[item?.name]).toFixed(
          item.precision
      item?.blur && item.blur(_.get(item, "value"));
    renderInput(item) {
      return (
        <el-input
          placeholder={_.get(item, "placeholder", "请输入")}
          clearable={item?.clearable}
          size={item?.size || "small"}
          readonly={item?.readonly}
          type={item?.inputType || "text"}
          v-model={this




    
.formData[item?.name]}
          disabled={item?.disabled}
          style={{ ...item?.style }}
          step={_.get(item, "step", 1)}
          max={_.get(item, "max")}
          min={_.get(item, "min")}
          scopedSlots={{
            suffix() {
              return item?.suffix;
            prefix() {
              return item?.prefix;
          on={{
            blur: this.handleInputBlur.bind(this, { ...item })
          {/* suffix */}
          {(() => {
            if (item?.suffix) {
              return <div slot="suffix">{item.suffix}</div>;
            } else {
              try {
                const element = this.$scopedSlots[item?.suffixSlotName]();
                return <div slot="suffix">{element}</div>;
              } catch (error) {
                null;
          })()}
          {/* prefix */}
          {(() => {
            if (item?.prefix) {
              return <div slot="prefix">{item.prefix}</div>;
            } else {
              try {
                const element = this.$scopedSlots[item?.prefixSlotName]();
                return <div slot="prefix">{element}</div>;
              } catch (error) {
                null;
          })()}
          {/* prepend */}
          {(() => {
            if (item?.elPrepend) {
              return (
                <div slot="prepend">
                  {item.elPrepend?.rerender
                    ? this.renderFormItemContent(item.elPrepend)
                    : item.elPrepend}
            } else {
              try {
                const element = this.$scopedSlots[item?.prependSlotName]();
                return <div slot="prepend">{element}</div>;
              } catch (error) {
                null;
          })()}
          {/* append */}
          {(() => {
            if (item?.elAppend) {
              return (
                <div slot="append">
                  {item.elAppend?.rerender
                    ? this.renderFormItemContent(item.elAppend)
                    : item.elAppend}
            } else {
              try {
                const element = this.$scopedSlots[item?.appendSlotName]();
                return <div slot="append">{element}</div>;
              } catch (error) {
                null;
          })()}
        </el-input>
    renderInputNumber(item) {
      return (
        <el-input-number
          controls={_.get(item, 'controls', false)}
          v-model={this.formData[item?.name]}
          disabled={item?.disabled}
          precision={_.get(item, "precision", 6)}
          step={_.get(item, "step", 1)}
          min={_.get(item, "min", 0)}
          placeholder={_.get(item, "placeholder", "请输入")}
          style={{ ...item?.style }}
          size={item?.size || "small"}
        ></el-input-number>
    renderSelect(item) {
      return (
        <el-select
          size={item.size || "small"}
          placeholder={_.get(item, 'placeholder', "请选择")}
          value-key={item?.valueKey}
          clearable={item?.clearable}
          multiple={item?.multiple}
          collapse-tags={item?.collapseTags}
          multiple-limit={item?.multipleLimit}
          v-model={this.formData[item?.name]}
          style={{ ...item?.style }}
          on={{
            change: (val) => {
              item.change && item.change(val);
          disabled={item?.disabled}
          {_.map(item?.options, (option,




    
 optionKey) => {
            return (
              <el-option
                key={optionKey}
                label={option?.label}
                value={option?.value}
              ></el-option>
        </el-select>
    renderCascader(item) {
      return (
        <el-cascader
          style={{ ...item?.style }}
          v-model={this.formData[item?.name]}
          size={item?.size || "small"}
          options={item?.options || []}
          placeholder={_.get(item, 'placeholder', "请选择")}
          props={item?.props}
          disabled={item?.disabled}
          clearable={item?.clearable}
        ></el-cascader>
    renderDatePicker(item) {
      return (
        <el-date-picker
          style={{ ...item?.style }}
          size={item?.size || "small"}
          disabled={item?.disabled}
          v-model={this.formData[item?.name]}
          format={item?.format || "yyyy-MM-dd"}
          value-format={item?.valueFormat || "yyyy-MM-dd"}
          type={item?.pickerType || "date"}
          placeholder={_.get(item, 'placeholder', "选择日期")}
          ></el-date-picker>
    renderCheckboxGroup(item) {
      return (
        <el-checkbox-group
          style={{ ...item?.style }}
          v-model={this.formData[item?.name]}
          {_.map(item?.options, (optionItem, key) => {
            return (
              <el-checkbox label={optionItem.label} key={key}>
                {optionItem.label}
              </el-checkbox>
        </el-checkbox-group>
    renderRadioGroup(item) {
      return (
        <el-radio-group
          style={{ ...item?.style }}
          v-model={this.formData[item?.name]}
          on={{
            change: (val) => {
              item.change && item.change(val);
          {_.map(item?.options, (optionItem, key) => {
            return (
              <el-radio label={optionItem.value} key={key}>
                {optionItem.label}
              </el-radio>
        </el-radio-group>
    renderSwitch(item) {
      return (<el-switch
        style={{ ...item?.style }}
        v-model={this.formData[item?.name]}
        active-color={item?.activeColor || "#13ce66"}
        inactive-color={item?.inactiveColor || "#ff4949"}
        inactive-value="0"
        active-value="1"
        on={{
          change: (val) => {
            item.change && item.change(val);
      </el-switch>)
    renderFormItemContent(item) {
      return (
        <div class={["form-item", item?.className]}>
          {(() => {
            if (item?.prefixHtml) {
              return item.prefixHtml;
            } else {
              try {
                const element = this.$scopedSlots[item?.prefixHtmlSlotName]();
                return element;
              } catch (error) {
                null;
          })()}
          {item.type === "input" && this.renderInput(item)}
          {item.type === "input-number" && this.renderInputNumber(item)}
          {item.type === "select" && this.renderSelect(item)}
          {item.type === "radio-group" && this.renderRadioGroup(item)}
          {item.type === "checkbox-group" && this.renderCheckboxGroup(item)}
          {item.type === "cascader" && this.renderCascader(item)}
          {item.type === "date-picker" && this.renderDatePicker(item)}
          {item.type




    
 === "maque-cascader" && this.renderMaqueCascader(item)}
          {item.type === "maque-xzq" && this.renderMaqueXzq(item)}
          {item.type === "upload" && this.renderUploadComment(item)}
          {item.type === "upload-text" && this.renderUploadGroup(item)}
          {item.type === "switch" && this.renderSwitch(item)}
          {(() => {
            if (item?.html) {
              return item.html;
            } else {
              try {
                const element = this.$scopedSlots[item?.htmlSlotName]();
                return element;
              } catch (error) {
                null;
          })()}
          {(() => {
            if (item?.suffixHtml) {
              return item.suffixHtml;
            } else {
              try {
                const element = this.$scopedSlots[item?.suffixHtmlSlotName]();
                return element;
              } catch (error) {
                null;
          })()}
  render() {
    const formProps = {};
    if (this.formOptions?.disabled) formProps.disabled = this.formOptions.disabled;
    return (
      <div class={styles.sectionForm}>
        <el-form
          ref="form"
          label-position={this.formOptions?.labelPosition || "right"}
          inline={this.formOptions?.inline}
          props={{
            model: { ...this.formData },
            ...formProps
          rules={this.formOptions?.rules || {}}
          {_.map(this.formOptions?.formPropList, (rowData, key) => {
            return (rowData &&
              <el-row gutter={16} key={key}>
                {_.map(rowData, (item, itemKey) => {
                  return (item &&
                    <el-col
                      key={itemKey}
                      span={item.span || 24 / rowData.length}
                      <el-form-item
                        label={item?.label}
                        prop={item?.name}
                        label-width={
                          item.labelWidth || this.formOptions?.labelWidth
                        {this.renderFormItemContent(item)}
                      </el-form-item>
                    </el-col>
              </el-row>
        </el-form>
        <div>{this._formData}</div>
  watch: {
    "formOptions": {
      handler() {
        this.formData = this.getFormData();
      deep: true,
      immediate: true,

.sectionForm {
    :global {
        .el-form {
            padding: 0px 5px;
            .el-input {
                .el-select {
                    .el-input {
                        min-width: 130px;
                .el-cascader {
                    .el-input {
                        min-width: 90px;
                /* 谷歌 */
                input::-webkit-outer-spin-button,
                input::-webkit-inner-spin-button {
                    -webkit-appearance: none;
                    appearance: none;
                    margin: 0;
                /* 火狐 */
                input {
                    -moz-appearance: textfield;
            .el-input-number{
                width: 100% !important;
                .el-input__inner{
                    text-align: left !important;
}

import SectionForm from "@/components/SectionForm/index.jsx"
import { mapState } from 'vuex';
import _ from 'lodash';
 * @author songgh
export default {
  name: 'ZdInfo',
  components: {
    SectionForm,
  props: {
    formData: {
      type: Object,
      required: true,
      default: () => ({}),
  methods: {
    $submit() {
      const formData = this.$refs.form?.submitForm();
      if (formData?.xzqDm && (formData.xzqDm instanceof Array)) {
        formData.xzqDm = _.last(formData.xzqDm);
      return




    
 formData;
  render() {
    return <SectionForm ref="form" formOptions={this.formOptions} />
  computed: {
    // disabled
    ...mapState({
      disabled: state => state?.spaceUnit?.disabled
    formOptions() {
      return {
        labelWidth: "98px",
        labelPosition: "left",
        disabled: this.disabled,
        rules: {
          xzqDm: [
            { required: true, message: "必填项", trigger: "blur" }
          zdBh: [
            { required: true, message: "必填项", trigger: "blur" }
          zdMj: [
            { required: true, message: "必填项", trigger: "blur" }
          zdZl: [
            { required: true, message: "必填项", trigger: "blur" }
        formData: { ...this.formData },
        formPropList: [
              type: "cascader",
              label: "行政区",
              name: "xzqDm",
              options: JSON.parse(localStorage.getItem("sqXzq")),
              props: { expandTrigger: "hover" },
              type: "input",
              label: "电子监管号",
              name: "dzBaBh",
              disabled: true,
              type: "input",
              label: "宗地编号",
              name: "zdBh",
          ], [
              type: "input",
              inputType: "number",
              label: "宗地面积",
              name: "zdZmj",
              suffix: '公顷',
              span: 8,
              type: "input",
              label: "宗地坐落",
              name: "zdZl",
              placeholder: "请输入宗地的四至",
              span: 8,
}

import table2xlsx from "@/utils/table2xlsx.js";
import _ from "lodash";
import styles from "./sectionTable.module.scss";
import uuid from "@/utils/uuid";
 * @description 配置 Table（已支持 SFC / slot 配置）
 * @author songgh
export default {
  name: "SectionTable",
  props: {
    title: {
      type: String,
      default: "表格"
    tableData: {
      type: Array,
      required: true,
      default: () => []
    tableColumns: {
      type: Array,
      required: true,
      default: () => []
    height: {
      type: Number
    pagination: {
      type: Boolean,
      default: false
    pageSize: {
      type: Number,
      default: 5
    total: {
      type: Number,
      default: 0
    highlightCurrentRow: {
      type: Boolean,
      default: false
    size: {
      type: String,
      default: "5"
    border: {
      type: Boolean
    multiple: {
      type: Boolean,
      default: false
    cellStyle: {
      type: Object,
      default: () => ({})
    cellClassName: {
      type: Function,
      default: () => {}
    headerCellStyle: {
      type: Object,
      default: () => ({})
    treeProps: {
      type: Object,
      default: () => ({})
    rowKey: {
      type: String,
      default: ""
    showHeader: {
      type: Boolean,
      default: true
    lazy: {
      type: Boolean,
      default: false
    spanMethod: { type: Function, default: () => {} },
    loads: { type: Function, default: () => {} },
    expandChange: { type: Function, default: () => {} }
  data() {
    return {
      currentPage: 1,
      tableIndex: uuid()
  watch: {
    tableColumns: {
      handler() {
        this.tableIndex = uuid();
      deep: true,
      immediate: true
  render() {
    return (
      <div class={styles.sectionTable}>
        <el-table
          ref="table"
          key={this.tableIndex}
          data={this.tableData}
          height={this.height}
          header-cell




    
-class-name={this.headerCellClassName}
          highlight-current-row={this.highlightCurrentRow}
          border={this.border}
          size={this.size}
          on={{
            "current-change": this.handleCurrentChange,
            "selection-change": this.handleSelectionChange,
            "expand-change": this.expandChange
          cell-style={this.cellStyle}
          header-cell-style={this.headerCellStyle}
          // 获取子表格数据
          load={this.loads}
          // 合并行或列
          span-method={this.spanMethod}
          tree-props={this.treeProps}
          lazy={this.lazy}
          row-key={this.rowKey}
          show-header={this.showHeader}
          cell-class-name={this.cellClassName}
          {this.multiple && (
            <el-table-column type="selection" width="55"></el-table-column>
          {this.renderTableColumns(this.tableColumns)}
        </el-table>
        {this.pagination && this.renderPagination()}
  methods: {
    hanldeExport() {
      table2xlsx({ filename: this.title, target: this.$refs.table });
    handleCurrentChange(val) {
      this.$emit("changeCurrent", val);
    handleSelectionChange(val) {
      this.$emit("changeSelection", val);
    handlePageChange(val) {
      this.currentPage = val;
      this.$emit("pageChange", {
        currentPage: val
    renderTableColumns(tableColumns) {
      return _.map(tableColumns, (item, key) => {
        return (
          <el-table-column
            key={key}
            type={item?.type}
            prop={item?.name}
            label={item?.label}
            align={item?.align || "left"}
            width={item?.width || "auto"}
            scopedSlots={{
              default: props => {
                if (item?.itemRender) {
                  return item?.itemRender(props?.row, props?.$index);
                } else {
                  try {
                    const element = this.$scopedSlots[item?.defaultSlotName]({
                      rowData: props?.row,
                      $index: props?.$index
                    return element;
                  } catch (error) {
                    return props?.row[item?.name];
              header: props => {
                if (item?.itemHeaderRender) {
                  return item?.itemHeaderRender(props?.row, props?.$index);
                } else {
                  try {
                    const element = this.$scopedSlots[item?.headerSlotName]({
                      rowData: props?.row,
                      $index: props?.$index
                    return element;
                  } catch (error) {
                    return props?.column?.label;
            {this.renderTableColumns(_.get(item, "children", []))}
          </el-table-column>
    renderPagination() {
      return (
        <el-pagination
          background={true}
          class={styles.pagination}
          layout="prev, pager, next"
          total={this.total}
          page-size={this.pageSize}
          current-page={this.currentPage}
          on={{
            "current-change": this.handlePageChange
        ></el-pagination>

.sectionTable {
    :global {
        .header-cell {
            background-color: rgba(156, 170, 211, 0.2);
            color: #363839;
        .current-row{
            font-weight: bold;
    .pagination {
        display: flex;
        justify-content: flex-end;
        margin-top: 20px;
}

/**
 * @author songgh
 * @description export table as excel
import { Message } from 'element-ui';
import * as XLSX from 'xlsx';




    

export default function table2xlsx({ filename, target } = { filename: "表格" }) {
    if (!target) {
        Message.error('没有指定 table');
        return;
    // clone 表格
    const targetTable = target?.$el;
    const cloneTable = targetTable.cloneNode();
    cloneTable.innerHTML = `${targetTable.innerHTML}`;
    // 移除 fix
    const fix = cloneTable.querySelector(".el-table__fixed");
    if(fix) cloneTable.removeChild(fix);
    // 导出
    var wb = XLSX.utils.table_to_book(cloneTable);
    /* generate file and force a download*/
    XLSX.writeFile(wb, `${filename}.xlsx`);
}

/**
 * @author songgh
 * @returns uuid
function uuid() {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
        return v.toString(16);
export default uuid;