@scenetechnology/cj_element_table 0.0.1

package/packages/components/viewEdit.vue

@@ -0,0 +1,239 @@
+<template>
+    <el-dialog :model-value="modelValue" @update:model-value="$emit('update:modelValue', $event)" width="800" @close="modleStatuschange">
+            <template #header>
+               <div style="display: flex;justify-content: flex-start;align-items: center;">
+                <img style="width: 11px;height: 12px;vertical-align: middle;margin-right: 5px;" :src="model_title_icon"/>
+                <span class="headerTitle" style="vertical-align:middle;"> 列表视图</span>
+               </div>
+            </template>
+            <el-table
+                border
+                ref="tableRef"
+                row-class-name="drag-row"
+                @row-contextmenu.prevent
+                :row-config="rowConfig"
+                :column-config="columnConfig"
+                :data="viewList"
+                >
+                <el-table-column type="index" width="55" label="序号" :fixed="true" align="center" />
+                <el-table-column prop="name" label="视图名称"></el-table-column>
+                <el-table-column  width="100" prop="type" label="视图类型">
+                    <template #default="{ row }">
+                    <span>{{ row.type==1?'公共':'个人' }}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column width="150" title="操作">
+                    <template #default="{ row }">
+                    <div style="display: flex;"><el-button @click="onEdit(row)" size="small" type="primary">编辑</el-button>
+                        <el-popconfirm
+                            title="确定要删除吗?"
+                            @confirm="onDelete(row)"
+                        >
+                            <template #reference>
+                                <el-button size="small" type="danger" style="margin-left:10px;">删除</el-button>
+                            </template>
+                        </el-popconfirm></div>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <template #footer>
+                <el-button @click="$emit('update:modelValue',false)">取消</el-button>
+                <el-button type="primary" :loading="submitLoading" @click="handleSaveView" 
+                    style="margin-left: 8px">确定</el-button>
+            </template>
+        </el-dialog>
+        <SaveViewDialog v-model="saveViewDialogVisible" :title="saveViewTitle" :Form="rowData" @save="handleSaveRow" />
+</template>
+
+<script setup>
+import { ref, computed, watch, reactive, onMounted, nextTick, inject } from 'vue'
+import model_title_icon from '@/assets/images/model_title_icon.png'
+import tuoDrag from './tuo-drag.vue'
+import { ElDialog, ElButton, ElPopconfirm, ElMessage } from 'element-plus'
+import SaveViewDialog from './SaveViewDialog.vue'
+import { UserQuery_sort, UserQuery_delete,UserQuery_update } from '@/api/All.ts'
+
+const props = defineProps({
+  viewList: {
+    type: Array,
+    required: true,
+    default:[]
+  },
+  modelValue: {
+    type: Boolean,
+    required: true,
+    default:false
+  }
+})
+
+const emit = defineEmits(['update:modelValue',"update"])
+
+const project = ref(JSON.parse(localStorage.getItem('selectedProject')))
+const exportModal = ref(false)
+const submitLoading = ref(false)
+const rowConfig = ref({ drag: true })
+const columnConfig = ref({})
+const tableRef = ref(null)
+const draggingIndex = ref(null)
+const saveViewDialogVisible = ref(false)
+const saveViewTitle = ref('')
+const rowData=ref()
+
+onMounted(() => {
+    // addDragEvents()
+})
+watch(() => props.modelValue, () => {
+    nextTick(() => {
+        addDragEvents()
+    })
+},{deep:true,immediate: true})
+const addDragEvents = () => {
+    const rows = document.querySelectorAll('.drag-row')
+    console.log(rows,"rows")
+    rows.forEach((row, index) => {
+        row.draggable = true
+        row.ondragstart = (event) => handleDragStart(event, index)
+        row.ondragover = (event) => handleDragOver(event)
+        row.ondrop = (event) => handleDrop(event, index)
+    })
+}
+
+const handleDragStart = (event, index) => {
+    draggingIndex.value = index
+    event.dataTransfer.effectAllowed = 'move'
+    event.dataTransfer.setData('text/plain', index)
+}
+
+const handleDragOver = (event) => {
+    event.preventDefault()
+    event.dataTransfer.dropEffect = 'move'
+}
+
+const handleDrop = (event, targetIndex) => {
+    const sourceIndex = draggingIndex.value
+    if (sourceIndex === targetIndex) return
+    const item = props.viewList.splice(sourceIndex, 1)[0]
+    props.viewList.splice(targetIndex, 0, item)
+    draggingIndex.value = null
+}
+const onEdit = (row) => {
+  const parent = inject('parentComponent')
+  rowData.value={
+    id:row.id,
+    name: row.name,
+    type: row.type
+  }
+  saveViewDialogVisible.value = true
+  saveViewTitle.value = '保存视图'
+}
+
+const onDelete = (row) => {
+  console.log(row)
+  UserQuery_delete({ id: row.id }).then(res => {
+    console.log(res)
+    if (res.code == 200) {
+      emit('update')
+    } else {
+      ElMessage.error(res.msg)
+    }
+  })
+}
+
+const modleStatuschange = (e) => {
+  if (!e) {
+    console.log('执行-----', e)
+  }
+}
+
+const handleReset = () => {
+  exportModal.value = false
+}
+const handleSaveRow = async (row) => {
+  if (tableRef.value) {
+    submitLoading.value = true
+    try {
+      const res = await UserQuery_update(row)
+      if (res.code == 200) {
+        saveViewDialogVisible.value = false
+        emit('update')
+      } else {
+        ElMessage.error(res.msg)
+      }
+    } finally {
+      submitLoading.value = false
+    }
+  }
+}
+const handleSaveView = async (formData) => {
+  if (tableRef.value) {
+    const ids = props.viewList.map(item => item.id)
+    submitLoading.value = true
+    try {
+      const res = await UserQuery_sort({ids:ids})
+      if (res.code == 200) {
+        emit('update')
+        emit('update:modelValue',false)
+      } else {
+        ElMessage.error(res.msg)
+      }
+    } finally {
+      submitLoading.value = false
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.classTitle::before{
+    content: "*";
+    display: inline-block;
+    margin-right: 4px;
+    line-height: 1;
+    font-family: SimSun;
+    font-size: 12px;
+    color: #ed4014;
+}
+.classTitle{
+    font-family: PingFang SC;
+    font-weight: 400;
+    font-size: 15px;
+    color: #333;
+    }
+.content {
+    display: flex;
+    justify-content: space-between;
+}
+.headerTitle{
+    font-weight: 500;
+    font-size: 16px;
+    color: #1D2027;
+}
+/deep/ thead tr{
+ background-color: #eff2fa !important;
+ font-size: 14px;
+    font-family: "Source Han Sans";
+    font-weight: 500;
+    color: #222222;
+}
+.sort-container {
+    padding: 15px;
+
+    .title {
+        font-size: 24px;
+        font-weight: bold;
+    }
+
+    .el-table {
+        margin-top: 20px;
+    }
+}
+
+.drag-row {
+    cursor: move;
+    user-select: none;
+
+    &:hover {
+        background-color: #f0f9ff;
+    }
+}
+</style>

package/packages/index.js

@@ -0,0 +1,13 @@
+// 引入组件 
+import cj_element_table from './components/index.vue'
+
+const components = [ cj_element_table ]
+const install = function (Vue) {   
+  // 全局注册所有的组件  
+  components.forEach(item => {   Vue.component(item.name, item)   }) 
+}
+if (typeof window !== 'undefined' && window.Vue) {   
+  install(window.Vue) 
+} 
+// 导出 install （如果作为一个包，一定要有install ！！！） 
+export default { install }

package/public/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

package/src/App.vue

@@ -0,0 +1,59 @@
+<template>
+  <div id="app">
+    <pro-table
+    ref="tableRef"
+      :tableData="tableData"
+      :columns="columns"
+      :showInputButtons="false"
+      :showOutputButtons="false"
+      @selection-change="
+        (rows) => {
+          selectionRows = rows.ids
+        }
+      "
+      @search="handleSearch"></pro-table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import proTable from '../packages/components/index.vue'
+const tableData = ref({})
+const tableRef = ref()
+const selectionRows = ref([])
+const columns = ref([
+  {
+    prop: 'department_item_name',
+    label: '岗位名称',
+    search: true,
+    searchType: 'select',
+    searchKey:'department_item_id',
+    options: []
+  },
+  {
+    prop: 'department_name',
+    label: '所属部门',
+    search: true,
+    searchKey:'department_id',
+    searchType: 'select',
+    options: [] // 初始为空数组
+  },
+  {
+    prop: 'duty',
+    label: '岗位职责',
+    search: true
+    // searchType: 'datePicker',
+    // dataType:true,
+    //dataName:'sasss'
+  }
+])
+
+const handleSearch = (query) => {
+  // getSaftDutyList(query).then((res) => {
+  //   tableData.value = res.data
+  // })
+}
+</script>
+
+<style>
+</style>

package/src/api/All.ts

@@ -0,0 +1,104 @@
+import request from '@/config/axios'
+import { config } from '@/config/axios/config'
+export const FieldGroup_index = (data: any) => {
+  return request.post({ url: '/FieldGroup/index', data })
+}
+export const FieldGroup_read = (data: any) => {
+  return request.post({ url: '/FieldGroup/read', data })
+}
+export const Field_read = (data: any) => {
+  return request.post({ url: '/Field/read', data })
+}
+export const FieldGroup_save = (data: any) => {
+  return request.post({ url: '/FieldGroup/save', data })
+}
+export const FieldGroup_update = (data: any) => {
+  return request.post({ url: '/FieldGroup/update', data })
+}
+export const Field_save = (data: any) => {
+  return request.post({ url: '/Field/save', data })
+}
+export const Field_update = (data: any) => {
+  return request.post({ url: '/Field/update', data })
+}
+export const Three_index = (data: any) => {
+  return request.post({ url: '/Three/index', data })
+}
+export const Three_save = (data: any) => {
+  return request.post({ url: '/Three/save', data })
+}
+export const Three_update = (data: any) => {
+  return request.post({ url: '/Three/update', data })
+}
+export const Three_delete = (data: any) => {
+  return request.post({ url: '/Three/delete', data })
+}
+export const Three_download = (data: any) => {
+  return request.post({ url: '/Three/download', data })
+}
+export const Three_import = (data: any) => {
+  return request.post({ url: '/Three/import', data })
+}
+export const Three_read = (data: any) => {
+  return request.post({ url: '/Three/read', data })
+}
+export const Three_save_field = (data: any) => {
+  return request.post({ url: '/Three/save_field', data })
+}
+export const Three_read_field = (data: any) => {
+  return request.post({ url: '/Three/read_field', data })
+}
+export const Field_sort = (data: any) => {
+  return request.post({ url: '/Field/sort', data })
+}
+export const FieldGroup_sort = (data: any) => {
+  return request.post({ url: '/FieldGroup/sort', data })
+}
+export const Field_delete = (data: any) => {
+  return request.post({ url: '/Field/delete', data })
+}
+export const FieldGroup_delete = (data: any) => {
+  return request.post({ url: '/FieldGroup/delete', data })
+}
+export const upload = (data: any) => {
+  return request.post({ url: '/File/upload', data })
+}
+export const config_config = (data: any) => {
+  return request.post({ url: `${config.simpUseUrl}/Config/config`, data })
+}
+export const config_read = (data: any) => {
+  return request.post({ url: `${config.simpUseUrl}/Config/config_read`, data })
+}
+export const FieldGroup_export = (data: any) => {
+  return request.post({ url: '/FieldGroup/export', data })
+}
+export const FieldGroup_import = (data: any) => {
+  return request.post({ url: '/FieldGroup/import', data })
+}
+export const Person_index = (data: any) => {
+  return request.post({ url: `${config.simpUrl}/simp/api/Person/index`, data })
+}
+export const File_update_all = (data: any) => {
+  return request.post({ url: `${config.simpUrl}/simp/api/File/update_all`, data })
+}
+export const UserQuery_index = (params: any) => {
+  return request.get({ url: `${config.simpUrl}/simp/api/UserQuery/index`, params })
+}
+export const UserQuery_update = (data: any) => {
+  return request.post({ url: `${config.simpUrl}/simp/api/UserQuery/update`, data })
+}
+export const UserQuery_save = (data: any) => {
+  return request.post({ url: `${config.simpUrl}/simp/api/UserQuery/save`, data })
+}
+export const UserQuery_sort = (data: any) => {
+  return request.post({ url: `${config.simpUrl}/simp/api/UserQuery/sort`, data })
+}
+export const UserQuery_delete = (data: any) => {
+  return request.post({ url: `${config.simpUrl}/simp/api/UserQuery/delete`, data })
+}
+export const ImportRecord_index = (data: any) => {
+  return request.post({ url: `${config.simpUrl}/simp/api/ImportRecord/index`, data })
+}
+// export const getFlowRead = (id) => {
+//   return request.get({ url: '/flow/'+id })
+// }

package/src/components/Dialog/index.ts

@@ -0,0 +1,3 @@
+import Dialog from './src/Dialog.vue'
+
+export { Dialog }

package/src/components/Dialog/src/Dialog.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  
+</template>
+
+<style lang="less">
+.el-dialog__header {
+  margin-right: 0 !important;
+  border-bottom: 1px solid var(--tags-view-border-color);
+}
+
+.el-dialog__footer {
+  border-top: 1px solid var(--tags-view-border-color);
+}
+
+.is-hover {
+  &:hover {
+    color: var(--el-color-primary) !important;
+  }
+}
+
+.dark {
+  .el-dialog__header {
+    border-bottom: 1px solid var(--el-border-color);
+  }
+
+  .el-dialog__footer {
+    border-top: 1px solid var(--el-border-color);
+  }
+}
+.round {
+  width: 8px;
+  height: 8px;
+  border: 1px solid #3145de;
+  box-shadow: 0px 2px 1px 0px rgba(59, 67, 133, 0.18);
+  border-radius: 50%;
+}
+.alCen {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+/* 添加新的样式来修复对齐问题 */
+.dialog-title {
+  line-height: 24px;
+  display: inline-block;
+}
+
+.fullscreen-icon {
+  display: flex;
+  align-items: center;
+  margin-top: 0 !important;
+  margin-right: 5px !important;
+}
+
+/* 修复右上角关闭图标的对齐问题 */
+.el-dialog__headerbtn {
+  top: 5px !important;
+  display: flex;
+  align-items: center;
+}
+
+.el-dialog__close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>

package/src/components/HelloWorld.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br>
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
+    </ul>
+    <h3>Essential Links</h3>
+    <ul>
+      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
+      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
+      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
+      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
+      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
+    </ul>
+    <h3>Ecosystem</h3>
+    <ul>
+      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
+      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
+      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
+      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'HelloWorld',
+  props: {
+    msg: String,
+  },
+});
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>