fix: 修改班型页面

src/pages/index/enrol/classes/components/AddClassesDialog.vue

@@ -2,28 +2,28 @@
   <el-dialog v-model="dialogVisible" title="添加班型" width="900px" @closed="closeDialog" @open="openDialog">
     <el-form ref="formRef" :model="formData" :rules="rules">
       <el-row>
-        
-        
-                           <el-col :span="12">
-                               <el-form-item :label-width="labelWidth" label="名称" prop="classes_name">
-                                  <el-input v-model='formData.classes_name' type="text" placeholder='请输入名称'></el-input>
-                               </el-form-item>
-                           </el-col>
-                           <el-col :span="12">
-                               <el-form-item :label-width="labelWidth" label="简介" prop="classes_desc">
-                                  <el-input v-model='formData.classes_desc' type="textarea" :rows="5" placeholder='请输入简介'></el-input>
-                               </el-form-item>
-                           </el-col>
-                           <el-col :span="12">
-                               <el-form-item :label-width="labelWidth" label="内容" prop="classes_content">
-                                  <RichText v-model='formData.classes_content' :min-height='196'></RichText>
-                               </el-form-item>
-                           </el-col>
-                           <el-col :span="12">
-                               <el-form-item :label-width="labelWidth" label="排序" prop="classes_sort">
-                                  <el-input-number v-model='formData.classes_sort' controls-position='right'></el-input-number>
-                               </el-form-item>
-                           </el-col>
+
+
+        <el-col :span="12">
+          <el-form-item :label-width="labelWidth" label="名称" prop="classes_name">
+            <el-input v-model='formData.classes_name' type="text" placeholder='请输入名称'></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label-width="labelWidth" label="简介" prop="classes_desc">
+            <el-input v-model='formData.classes_desc' type="textarea" :rows="5" placeholder='请输入简介'></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label-width="labelWidth" label="内容" prop="classes_content">
+            <RichText v-model='formData.classes_content' :min-height='196'></RichText>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label-width="labelWidth" label="排序" prop="classes_sort">
+            <el-input-number v-model='formData.classes_sort' controls-position='right'></el-input-number>
+          </el-form-item>
+        </el-col>
 
       </el-row>
     </el-form>
@@ -39,7 +39,7 @@
 
 <script setup>
 import { reactive, ref, watch } from "vue";
-import { addClasses  } from "~/service/classes";
+import { addClasses } from "~/service/classes";
 import { useLoginStore } from "~/store";
 
 // --业务参数
@@ -79,24 +79,24 @@ watch(props, (v) => {
 
 const rules = reactive({
   classes_name: [
-                               {
-                               required: true,
-                               message: '名称不能为空'
-                               }
-                           ],
-                           classes_content: [
-                               {
-                               required: true,
-                               message: '内容不能为空'
-                               }
-                           ],
-                           classes_sort: [
-                               {
-                               required: true,
-                               message: '排序不能为空'
-                               }
-                           ],
-                           
+    {
+      required: true,
+      message: '名称不能为空'
+    }
+  ],
+  classes_content: [
+    {
+      required: true,
+      message: '内容不能为空'
+    }
+  ],
+  classes_sort: [
+    {
+      required: true,
+      message: '排序不能为空'
+    }
+  ],
+
 });
 
 
@@ -104,7 +104,7 @@ const rules = reactive({
 
 // 打开弹窗时执行
 const openDialog = () => {
-  
+
 };
 
 const closeDialog = () => {
@@ -120,7 +120,7 @@ const handleAddClick = async (formEl) => {
     if (!valid) {
       return;
     }
-    
+
     const { code } = await addClasses(formData);
     if (code == 0) {
       closeDialog();
@@ -135,6 +135,4 @@ const handleResetClick = async (formEl) => {
 };
 </script>
 
-<style lang="less" scoped>
-
-</style>
+<style lang="less" scoped></style>

src/pages/index/enrol/classes/components/DetailClassesDialog.vue

@@ -4,26 +4,26 @@
       <el-row>
         
         
-                           <el-col :span="12">
-                               <el-form-item :label-width="labelWidth" label="名称" prop="classes_name">
-                                  <el-input v-model='formData.classes_name' type="text" placeholder='请输入名称'></el-input>
-                               </el-form-item>
-                           </el-col>
-                           <el-col :span="12">
-                               <el-form-item :label-width="labelWidth" label="简介" prop="classes_desc">
-                                  <el-input v-model='formData.classes_desc' type="textarea" :rows="5" placeholder='请输入简介'></el-input>
-                               </el-form-item>
-                           </el-col>
-                           <el-col :span="12">
-                               <el-form-item :label-width="labelWidth" label="内容" prop="classes_content">
-                                  <RichText v-model='formData.classes_content' :min-height='196'></RichText>
-                               </el-form-item>
-                           </el-col>
-                           <el-col :span="12">
-                               <el-form-item :label-width="labelWidth" label="排序" prop="classes_sort">
-                                  <el-input-number v-model='formData.classes_sort' controls-position='right'></el-input-number>
-                               </el-form-item>
-                           </el-col>
+        <el-col :span="12">
+          <el-form-item :label-width="labelWidth" label="名称" prop="classes_name">
+            <el-input v-model='formData.classes_name' type="text" placeholder='请输入名称'></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label-width="labelWidth" label="简介" prop="classes_desc">
+            <el-input v-model='formData.classes_desc' type="textarea" :rows="5" placeholder='请输入简介'></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label-width="labelWidth" label="内容" prop="classes_content">
+            <RichText v-model='formData.classes_content' :min-height='196'></RichText>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label-width="labelWidth" label="排序" prop="classes_sort">
+            <el-input-number v-model='formData.classes_sort' controls-position='right'></el-input-number>
+          </el-form-item>
+        </el-col>
 
       </el-row>
     </el-form>

src/pages/index/enrol/classes/components/EditClassesDialog.vue

@@ -3,27 +3,26 @@
     <el-form ref="formRef" :model="formData" :rules="rules">
       <el-row>
         
-        
-                           <el-col :span="12">
-                               <el-form-item :label-width="labelWidth" label="名称" prop="classes_name">
-                                  <el-input v-model='formData.classes_name' type="text" placeholder='请输入名称'></el-input>
-                               </el-form-item>
-                           </el-col>
-                           <el-col :span="12">
-                               <el-form-item :label-width="labelWidth" label="简介" prop="classes_desc">
-                                  <el-input v-model='formData.classes_desc' type="textarea" :rows="5" placeholder='请输入简介'></el-input>
-                               </el-form-item>
-                           </el-col>
-                           <el-col :span="12">
-                               <el-form-item :label-width="labelWidth" label="内容" prop="classes_content">
-                                  <RichText v-model='formData.classes_content' :min-height='196'></RichText>
-                               </el-form-item>
-                           </el-col>
-                           <el-col :span="12">
-                               <el-form-item :label-width="labelWidth" label="排序" prop="classes_sort">
-                                  <el-input-number v-model='formData.classes_sort' controls-position='right'></el-input-number>
-                               </el-form-item>
-                           </el-col>
+        <el-col :span="12">
+          <el-form-item :label-width="labelWidth" label="名称" prop="classes_name">
+            <el-input v-model='formData.classes_name' type="text" placeholder='请输入名称'></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label-width="labelWidth" label="简介" prop="classes_desc">
+            <el-input v-model='formData.classes_desc' type="textarea" :rows="5" placeholder='请输入简介'></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label-width="labelWidth" label="内容" prop="classes_content">
+            <RichText v-model='formData.classes_content' :min-height='196'></RichText>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label-width="labelWidth" label="排序" prop="classes_sort">
+            <el-input-number v-model='formData.classes_sort' controls-position='right'></el-input-number>
+          </el-form-item>
+        </el-col>
 
       </el-row>
     </el-form>

src/pages/index/enrol/classes/index.vue

@@ -9,10 +9,10 @@
 
 
     <el-form-item label="名称">
-      <el-input v-model='params.classes_name' placeholder='请输入名称'></el-input>
+      <el-input v-model='params.classes_name' @keyup.enter.native="getList()" placeholder='请输入名称'></el-input>
     </el-form-item>
     <el-form-item>
-      <el-button type="primary" @click="tableRef.reload()" icon="ElIconSearch">
+      <el-button type="primary" @click="getList()" icon="ElIconSearch">
         搜索
       </el-button>
     </el-form-item>
@@ -52,33 +52,25 @@
     </el-dropdown>
   </el-space>
   <!-- 数据表格 -->
-  <DataTable ref="tableRef" style="width: 100%" :onSelectionChange="data => (selectionData = data)" :column="column"
-    :params="params" :request="params => getClassesList(params)">
+  <el-table v-loading="loading" :data="dataList" ref="tableRef" border highlight-current-row
+    :onSelectionChange="data => (selectionData = data)" >
+    <el-table-column type="selection" width="50" align="center" />
+    <el-table-column prop="classes_name" width="200" label="班型名称" :show-overflow-tooltip="true"> </el-table-column>
+    <el-table-column prop="classes_sort" width="200" label="排序" sort>
+      <template #default="scope">
+        <el-input-number v-model='scope.row.classes_sort' controls-position="right"
+          @change="handleEditOrder(scope.row)"></el-input-number>
+      </template>
+    </el-table-column>
 
-
-    <template #chaoz="scope">
-      <el-space>
-        <el-button size="small" @click="handleUpdate(scope.row)">
-          编辑
-        </el-button>
-        <el-dropdown @command="handleCommand">
-          <el-button type="primary" size="small">
-            更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
-          </el-button>
-          <template #dropdown>
-            <el-dropdown-menu>
-              <el-dropdown-item :command="{ type: 'detail', row: scope.row }">
-                详情
-              </el-dropdown-item>
-              <el-dropdown-item :command="{ type: 'delete', row: scope.row }">
-                删除
-              </el-dropdown-item>
-            </el-dropdown-menu>
-          </template>
-        </el-dropdown>
-      </el-space>
-    </template>
-  </DataTable>
+    <el-table-column label="操作" align="center" width="250" fixed='right'>
+      <template #default="scope">
+        <el-button size="small" type="primary" @click="handleUpdate(scope.row)">编辑</el-button>
+        <el-button size="small" type="danger" @click="handleDelete([scope.row])">删除</el-button>
+        <el-button size="small" type="info" @click="handleDetail(scope.row)">查看</el-button>
+      </template>
+    </el-table-column>
+  </el-table>
 
   <!-- 添加班型 -->
   <AddClassesDialog v-model="addClassesDialogVisible" :done="() => tableRef.reload()"></AddClassesDialog>
@@ -90,12 +82,13 @@
 </template>
 <script setup>
 import { ArrowDown } from '@element-plus/icons-vue';
-import { ref, reactive } from 'vue';
+import { ref, reactive,watch } from 'vue';
 import { useLoginStore } from "~/store";
-import { getClassesList, deleteClasses, exportExcel, downloadTemplate, importExcel } from '~/service/classes';
+import { getClassesList, editClasses, deleteClasses, exportExcel, downloadTemplate, importExcel } from '~/service/classes';
 import AddClassesDialog from './components/AddClassesDialog.vue';
 import EditClassesDialog from './components/EditClassesDialog.vue';
 import DetailClassesDialog from './components/DetailClassesDialog.vue';
+import createDraw from 'hyw-drag'
 
 const tableRef = ref();
 const selectionData = ref([]);
@@ -107,6 +100,11 @@ const EditClassesDialogRow = ref({});
 const DetailClassesDialogVisible = ref(false);
 const DetailClassesDialogRow = ref({});
 
+const loading = ref(false)
+const dataList = ref([])
+//排序
+let drag = ref(false)
+
 const headers = {
   Accept: "application/json",
   ...store.headers,
@@ -117,34 +115,6 @@ const params = reactive({
   classes_name: "",
 
 });
-const column = [
-
-  {
-    fixed: true,
-    type: 'selection'
-  },
-  {
-    prop: "classes_name",
-    label: '名称',
-    width: '150'
-  },
-  {
-    prop: "classes_desc",
-    label: '简介',
-    width: '150'
-  },
-  {
-    prop: "classes_sort",
-    label: '排序',
-    width: '150'
-  },
-  {
-    label: '操作',
-    prop: 'chaoz',
-    width: '250'
-  }
-];
-
 
 const handleCommand = ({ type, row }) => {
   switch (type) {
@@ -157,6 +127,41 @@ const handleCommand = ({ type, row }) => {
   }
 };
 
+
+// 查询数据
+function getList() {
+  loading.value = true
+  getClassesList(params).then((res) => {
+    if (res.code == 0) {
+      dataList.value = res.data
+      setTimeout(() => {
+        [...document.getElementsByClassName('el-table__row')].map(item => { item.classList.add('row1') });
+        [...document.getElementsByClassName('el-table__row--level-1')].map(item => { item.classList.remove('row1') })
+        drag.value === false && (drag.value = createDraw(document.getElementsByClassName('el-table__row')[0].parentElement))
+      })
+      loading.value = false
+    }
+  })
+
+}
+
+watch(drag, () => {
+  drag.value.start(() => {
+    dataList.value.map(item => {
+      tableRef.value.toggleRowExpansion(item, false)
+    })
+    tableExpandAll.value = false
+  })
+  drag.value.drop((info) => {
+    let targetIdx = [...document.getElementsByClassName('row1')].indexOf(info.el)
+    let sourceIdx = [...document.getElementsByClassName('row1')].indexOf(info.info.source.el)
+    let orderIdx = dataList.value[sourceIdx]['works_type_order']
+    dataList.value[targetIdx]['works_type_order'] = orderIdx
+    handleEditOrder(dataList.value[targetIdx])
+  })
+})
+getList()
+
 // 删除数据
 const handleDelete = data => {
   ElMessageBox.confirm(`您确定要删除该班型吗？`).then(async () => {
@@ -164,7 +169,7 @@ const handleDelete = data => {
       classes_guid: data.map(v => v.classes_guid).join()
     });
     if (res) {
-      tableRef.value.reload();
+      getList();
     }
   });
 };
@@ -202,9 +207,15 @@ const handleExcelSuccess = (value) => {
     ElMessage.error(value.msg);
   }
   closeUploadLoading();
-  tableRef.value.reload();
+  getList();
 };
 
+//排序
+async function handleEditOrder(data) {
+  loading.value = true
+  await editClasses(data);
+  getList();
+}