go-xorm-create/output/vue/page/GenTableColumnView.vue

<template>
  <div class="back-form-container">
    <div>
    <el-form :model="query" label-width="80px" :inline="true">
      
      
      
      
      
      
      
        <el-form-item label="表格id" prop="tableId">
          <el-input v-model="query.tableId" placeholder="请输入表格id"/>
        </el-form-item>
      
      
      
      
      
      
        <el-form-item label="排序" prop="sort">
          <el-input-number v-model="query.sort" placeholder="请输入排序"/>
        </el-form-item>
      
      
      
      
      
      
        <el-form-item label="字段注释" prop="columnComment">
          <el-input v-model="query.columnComment" placeholder="请输入字段注释"/>
        </el-form-item>
      
      
      
      
      
      
        <el-form-item label="字段类型" prop="columnType">
          <el-input v-model="query.columnType" placeholder="请输入字段类型"/>
        </el-form-item>
      
      
      
      
      
      
        <el-form-item label="go类型" prop="goType">
          <el-select v-model="query.goType" placeholder="请选择go类型">
            <el-option
              v-for="item in store.state.dicts.get('go_type')"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"/>
          </el-select>
        </el-form-item>
      
      
      
      
      
      
        <el-form-item label="go字段名" prop="goField">
          <el-input v-model="query.goField" placeholder="请输入go字段名"/>
        </el-form-item>
      
      
      
      
      
      
        <el-form-item label="是否主键" prop="isKey">            <el-radio-group v-model="query.isKey">
              <el-radio
                  v-for="item in [['0','否'], ['1','是']]"
                  :key="item[0]"
                  :label="item[0]">
                {{ item[1] }}
              </el-radio>
            </el-radio-group>
        </el-form-item>
      
      
      
      
      
      
        <el-form-item label="是否自增" prop="isIncrement">            <el-radio-group v-model="query.isIncrement">
              <el-radio
                  v-for="item in [['0','否'], ['1','是']]"
                  :key="item[0]"
                  :label="item[0]">
                {{ item[1] }}
              </el-radio>
            </el-radio-group>
        </el-form-item>
      
      
      
      
      
      
        <el-form-item label="是否未必填" prop="isRequired">            <el-radio-group v-model="query.isRequired">
              <el-radio
                  v-for="item in [['0','否'], ['1','是']]"
                  :key="item[0]"
                  :label="item[0]">
                {{ item[1] }}
              </el-radio>
            </el-radio-group>
        </el-form-item>
      
      
      
      
      
      
        <el-form-item label="查询方式" prop="queryType">
          <el-select v-model="query.queryType" placeholder="请选择查询方式">
            <el-option
              v-for="item in store.state.dicts.get('query_type')"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"/>
          </el-select>
        </el-form-item>
      
      
      
      
      
      
        <el-form-item label="前端显示类型" prop="vueShowType">
          <el-select v-model="query.vueShowType" placeholder="请选择前端显示类型">
            <el-option
              v-for="item in store.state.dicts.get('vue_show_type')"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"/>
          </el-select>
        </el-form-item>
      
      
      
      
      
      
        <el-form-item label="字典类型" prop="dictType">
          <el-select v-model="query.dictType" placeholder="请选择字典类型">
            <el-option
              v-for="item in store.state.dicts.get('')"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"/>
          </el-select>
        </el-form-item>
      
      
      
      
      
      
        <el-form-item label="字段名" prop="columnName">
          <el-input v-model="query.columnName" placeholder="请输入字段名"/>
        </el-form-item>
      
      
    </el-form>
    </div>
    <div class="back-table-handler">
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" plain size="small" @click="getList(pageNum)">
            <el-icon>
              <RefreshLeft/>
            </el-icon>
            <span>刷新</span>
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="primary" plain size="small" @click="openDialog('save', GenTableColumn.Create())">
            <el-icon>
              <Plus/>
            </el-icon>
            <span>新增</span>
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="danger" plain size="small" @click="deleteByIds()">
            <el-icon>
              <Delete/>
            </el-icon>
            <span>删除</span>
          </el-button>
        </el-col>
      </el-row>
    </div>

    <div class="back-table">
      <el-table v-loading="listLoading" :data="list" @selection-change="selected" border :key="ListKey">
        <el-table-column type="selection" width="40" align="center"/>
        
        <el-table-column label="id" align="center" prop="id"/>
        <el-table-column label="表格id" align="center" prop="tableId"/>
        <el-table-column label="排序" align="center" prop="sort"/>
        <el-table-column label="字段注释" align="center" prop="columnComment"/>
        <el-table-column label="字段类型" align="center" prop="columnType"/>
      <el-table-column label="go类型" align="center" prop="goType">
        <template #default="scope">
          <DictTag :dict-type="'go_type'" :dict-value="scope.row.goType"/>
        </template>
      </el-table-column>
        <el-table-column label="go字段名" align="center" prop="goField"/>
        <el-table-column label="是否主键" align="center" prop="isKey"/>
        <el-table-column label="是否自增" align="center" prop="isIncrement"/>
        <el-table-column label="是否未必填" align="center" prop="isRequired"/>
      <el-table-column label="查询方式" align="center" prop="queryType">
        <template #default="scope">
          <DictTag :dict-type="'query_type'" :dict-value="scope.row.queryType"/>
        </template>
      </el-table-column>
      <el-table-column label="前端显示类型" align="center" prop="vueShowType">
        <template #default="scope">
          <DictTag :dict-type="'vue_show_type'" :dict-value="scope.row.vueShowType"/>
        </template>
      </el-table-column>
        <el-table-column label="字典类型" align="center" prop="dictType"/>
        <el-table-column label="字段名" align="center" prop="columnName"/>
        <el-table-column label="操作" align="center" fixed="right">
          <template #default="scope">
            <el-button link type="primary" @click="openDialog('update',scope.row)">修改</el-button>
            <el-button link type="danger" @click="deleteById(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
            background
            :current-page="pageNum"
            @current-change="getList"
            :page-size="pageSize"
            :page-sizes="[10, 20, 30, 50,100]"
            :total="total"
            @size-change="SetPageSized"
            layout="total, sizes, prev, pager, next"
        />
      </div>

        <!-- 添加或修改参数配置对话框 -->
        <el-dialog :title="dialogType=='update'?'更改字典类型':'新增字典类型'" v-model="open" width="500px" append-to-body>
          <el-form ref="dictRef" :model="dialogForm" label-width="80px">
            
        <el-form-item label="表格id" prop="tableId">
          <el-input v-model="dialogForm.tableId" placeholder="请输入表格id"/>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number v-model="dialogForm.sort" placeholder="请输入排序"/>
        </el-form-item>
        <el-form-item label="字段注释" prop="columnComment">
          <el-input v-model="dialogForm.columnComment" placeholder="请输入字段注释"/>
        </el-form-item>
        <el-form-item label="字段类型" prop="columnType">
          <el-input v-model="dialogForm.columnType" placeholder="请输入字段类型"/>
        </el-form-item>
        <el-form-item label="go类型" prop="goType">
          <el-select v-model="dialogForm.goType" placeholder="请选择go类型">
            <el-option
              v-for="item in store.state.dicts.get('go_type')"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"/>
          </el-select>
        </el-form-item>
        <el-form-item label="go字段名" prop="goField">
          <el-input v-model="dialogForm.goField" placeholder="请输入go字段名"/>
        </el-form-item>
        <el-form-item label="是否主键" prop="isKey">            <el-radio-group v-model="dialogForm.isKey">
              <el-radio
                  v-for="item in [['0','否'], ['1','是']]"
                  :key="item[0]"
                  :label="item[0]">
                {{ item[1] }}
              </el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="是否自增" prop="isIncrement">            <el-radio-group v-model="dialogForm.isIncrement">
              <el-radio
                  v-for="item in [['0','否'], ['1','是']]"
                  :key="item[0]"
                  :label="item[0]">
                {{ item[1] }}
              </el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="是否未必填" prop="isRequired">            <el-radio-group v-model="dialogForm.isRequired">
              <el-radio
                  v-for="item in [['0','否'], ['1','是']]"
                  :key="item[0]"
                  :label="item[0]">
                {{ item[1] }}
              </el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="查询方式" prop="queryType">
          <el-select v-model="dialogForm.queryType" placeholder="请选择查询方式">
            <el-option
              v-for="item in store.state.dicts.get('query_type')"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"/>
          </el-select>
        </el-form-item>
        <el-form-item label="前端显示类型" prop="vueShowType">
          <el-select v-model="dialogForm.vueShowType" placeholder="请选择前端显示类型">
            <el-option
              v-for="item in store.state.dicts.get('vue_show_type')"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"/>
          </el-select>
        </el-form-item>
        <el-form-item label="字典类型" prop="dictType">
          <el-select v-model="dialogForm.dictType" placeholder="请选择字典类型">
            <el-option
              v-for="item in store.state.dicts.get('')"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"/>
          </el-select>
        </el-form-item>
        <el-form-item label="字段名" prop="columnName">
          <el-input v-model="dialogForm.columnName" placeholder="请输入字段名"/>
        </el-form-item>
          </el-form>
          <template #footer>
            <div class="dialog-footer">
              <el-button type="primary" @click="submitForm()">确 定</el-button>
              <el-button @click="open=false">取 消</el-button>
            </div>
          </template>
        </el-dialog>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";
import {
  DeleteBaseGenTableColumnById,
  GetBaseGenTableColumnListByGenTableColumn,
  SaveBaseGenTableColumn,
  UpdateBaseGenTableColumn,
  GenTableColumn,
  GenTableColumnQuery
} from "../../../api/back/BaseBackApi.ts";
import {ElMessage} from "element-plus";
import {Delete, Plus, RefreshLeft} from "@element-plus/icons-vue";
import router from "../../../router";
import {store} from "../../../state/TokenState.ts";
import DictTag from "../../../components/dict/DictTag.vue";
import MultipleTag from "../../../components/MultipleTag/MultipleTag.vue";
import ImageUpload from "../../../components/ImageUpload/ImageUpload.vue";

let listLoading = ref(true)
let total = ref(0)
let pageNum = ref(1)
let pageSize = ref(10)
let list = ref<GenTableColumn[]>([])
let ListKey = ref(0)
//搜索用
//let search = ref<GenTableColumn>(GenTableColumn.Create())
//修改，添加用
let open = ref(false)
let dialogType = ref("")//save添加，update修改
let dialogForm = ref<GenTableColumn>(null)
let query = ref<GenTableColumnQuery>(GenTableColumnQuery.Create())
let selectItems = ref<GenTableColumn[]>([])
const selected = (arr: GenTableColumn[]) => {
  selectItems.value = arr
}

getList()
const SetPageSized = (val: number) => {
  pageSize.value = val
  getList(pageNum.value)
}

function openDialog(type: string, row: GenTableColumn) {
  open.value = true
  dialogType.value = type
  if (type==="save"){
    dialogForm.value = GenTableColumn.Create()
    return
  }
  //深拷贝，不会影响数据
  dialogForm.value = JSON.parse(JSON.stringify(row))
}

function deleteByIds() {
  for (let i = 0; i < selectItems.value.length; i++) {
      deleteById(selectItems[i].id)
  }
}

function deleteById(id) {
  DeleteBaseGenTableColumnById(id).then(response => {
    if (response.code == 200) {
      ElMessage.success("删除成功,id:" + id)
      getList()
    } else {
      ElMessage.error("删除失败,id:" + id)
    }
  })
}

function getList(pn = 1) {
  pageNum.value = pn
  GetBaseGenTableColumnListByGenTableColumn(query.value, pageNum.value, pageSize.value).then(response => {
    let data = response.data
    total.value = data.total
    list.value = response.data.list
    ListKey.value++
    listLoading.value = false
  })
}

function submitForm() {
  switch (dialogType.value) {
    case "update":
      UpdateBaseGenTableColumn(dialogForm.value, dialogForm.value.id).then(response => {
        if (response.code == 200) {
          open.value = false
          getList()
          ElMessage.success("修改成功")
        } else {
          ElMessage.error("修改失败")
        }
      })
      break
    case "save":
      SaveBaseGenTableColumn(dialogForm.value).then(response => {
        if (response.code == 200) {
          open.value = false
          getList()
          ElMessage.success("添加成功")
        } else {
          ElMessage.error("添加失败")
        }
      })
      break
    default:
      break
  }
}
</script>