优化

package.json

@@ -40,6 +40,7 @@
     "print-js": "^1.6.0",
     "qrcode": "^1.5.1",
     "require": "^2.4.20",
+    "sortablejs": "^1.15.0",
     "vue": "^2.6.14",
     "vue-pdf": "^4.3.0",
     "vue-router": "^3.5.3",

src/utils/drag.js

@@ -0,0 +1,19 @@
+import Sortable from "sortablejs";
+
+//列拖拽
+function columnDrop(dropCol) {
+  //获取dom节点
+  const wrapperTr = document.querySelector(".el-table__header-wrapper tr");
+  Sortable.create(wrapperTr, {
+    animation: 180,
+    delay: 0,
+    onEnd: (evt) => {
+      const oldItem = dropCol[evt.oldIndex - 1];
+      dropCol.splice(evt.oldIndex - 1, 1);
+      dropCol.splice(evt.newIndex - 1, 0, oldItem);
+    },
+  });
+  return dropCol;
+}
+
+export default columnDrop;

src/views/gwglxt/dbfw/index.vue

@@ -3,6 +3,7 @@
     <div class="d-flex flex-between">
       <div>
       </div>
+      
       <el-form label-width="100px" :inline="true">
         <el-form-item prop="state_value">
           <el-select class="mr10" v-model="state_value" placeholder="请选择类别">
@@ -15,41 +16,75 @@
         <el-button type="primary" class="ml5" @click="getListData">搜索</el-button>
       </el-form>
     </div>
-    <el-table :data="tableData" tooltip-effect="dark" v-loading="loading" style="width: 100%" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" align="center" width="55"></el-table-column>
-      <el-table-column label="序号" align="center" type="index" width="50"></el-table-column>
-      <el-table-column label="类型" prop="lb_name" show-overflow-tooltip></el-table-column>
-      <el-table-column label="标题" prop="gw_title" show-overflow-tooltip></el-table-column>
-      <el-table-column label="发文字号" prop="gw_zh" show-overflow-tooltip></el-table-column>
-      <el-table-column label="发起人" prop="gw_fqr_name" show-overflow-tooltip></el-table-column>
-      <el-table-column label="发起科室" prop="gw_fqks_name" show-overflow-tooltip></el-table-column>
-      <el-table-column label="发起时间" prop="create_dateline" show-overflow-tooltip></el-table-column>
-      <el-table-column label="当前步骤" >
-        <template slot-scope="scope">
-          {{scope.row.gw_bz!='' ? scope.row.gw_bz : '--'}}
-        </template>
-      </el-table-column>
-      <el-table-column label="当前审核人">
-        <template slot-scope="scope">
-          {{scope.row.gw_shr!='' ? scope.row.gw_shr : '--'}}
-        </template>
-      </el-table-column>
-      <el-table-column label="状态" >
-        <template slot-scope="scope">
-          <div>{{scope.row.gw_status}}</div>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" width="200">
-        <template slot-scope="scope">
-          <el-button type="text" v-if="scope.row.is_check=='0'" @click="handleCheck(scope.row)">审核</el-button>
-          <el-button type="text" v-else @click="handleCheck(scope.row)">详情</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <footer class="flex-item-none" style="display: flex; justify-content: flex-end; margin-top: 30px">
-      <el-pagination background layout="total,prev, pager, next" :page-size="limit" :total="total"
-        :current-page.sync="cur_page" @current-change="handleCurrentChange"></el-pagination>
-    </footer>
+    <div v-if="false">
+      <el-table :data="tableData" tooltip-effect="dark" v-loading="loading" style="width: 100%" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" align="center" width="55"></el-table-column>
+        <el-table-column label="序号" align="center" type="index" width="50"></el-table-column>
+        <el-table-column label="类型" prop="lb_name" show-overflow-tooltip></el-table-column>
+        <el-table-column label="标题" prop="gw_title" show-overflow-tooltip></el-table-column>
+        <el-table-column label="发文字号" prop="gw_zh" show-overflow-tooltip></el-table-column>
+        <el-table-column label="发起人" prop="gw_fqr_name" show-overflow-tooltip></el-table-column>
+        <el-table-column label="发起科室" prop="gw_fqks_name" show-overflow-tooltip></el-table-column>
+        <el-table-column label="发起时间" prop="create_dateline" show-overflow-tooltip></el-table-column>
+        <el-table-column label="当前步骤" >
+          <template slot-scope="scope">
+            {{scope.row.gw_bz!='' ? scope.row.gw_bz : '--'}}
+          </template>
+        </el-table-column>
+        <el-table-column label="当前审核人">
+          <template slot-scope="scope">
+            {{scope.row.gw_shr!='' ? scope.row.gw_shr : '--'}}
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" >
+          <template slot-scope="scope">
+            <div>{{scope.row.gw_status}}</div>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="200">
+          <template slot-scope="scope">
+            <el-button type="text" v-if="scope.row.is_check=='0'" @click="handleCheck(scope.row)">审核</el-button>
+            <el-button type="text" v-else @click="handleCheck(scope.row)">详情</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!-- 可拖拉table -->
+    <div class="sortAbleTable" >
+      <el-table :data="tableData" row-key="gw_id" border style="width: 100%">
+        <el-table-column type="selection" align="center" width="55"></el-table-column>
+        <el-table-column type="index" label="序号" width="100" align="center" />
+        <el-table-column
+          v-for="(item, index) in colList"
+          align="center"
+          show-overflow-tooltip
+          :key="`col_${index}`"
+          :prop="dropCol[index].prop"
+          :label="item.label"
+          :min-width="item.minWidth"
+        >
+          <template v-slot="scope">
+            <span v-if="dropCol[index].prop == 'date'" style="color: blue">
+              {{ scope.row[dropCol[index].prop] }}
+            </span>
+            <span v-else>
+              {{ scope.row[dropCol[index].prop] }}
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" >
+          <template slot-scope="scope">
+            <el-button type="text" v-if="scope.row.is_check=='0'" @click="handleCheck(scope.row)">审核</el-button>
+            <el-button type="text" v-else @click="handleCheck(scope.row)">详情</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <footer class="flex-item-none" style="display: flex; justify-content: flex-end; margin-top: 30px">
+        <el-pagination background layout="total,prev, pager, next" :page-size="limit" :total="total"
+          :current-page.sync="cur_page" @current-change="handleCurrentChange"></el-pagination>
+      </footer>
+    </div>
 
    
   </div>
@@ -59,6 +94,10 @@
 import { dbfw_list, org_users } from "./itemApi";
 import { useUserStore } from "@/stores/user";
 const { real_name, dept_ids } = useUserStore();
+
+import Sortable from 'sortablejs';
+import colDrap from "../../../utils/drag";
+
 export default {
   name: "bbtj",
   data() {
@@ -154,11 +193,110 @@ export default {
       id: "",
       loading: false,
       userList: [],
+
+      //动态列数组
+      colList: [
+        {
+          label: "类型",
+          prop: "lb_name",
+          minWidth: 100,
+        },
+        {
+          label: "标题",
+          prop: "gw_title",
+          minWidth: 100,
+        },
+        {
+          label: "发文字号",
+          prop: "gw_zh",
+          minWidth: 100,
+        },
+        {
+          label: "发起人",
+          prop: "gw_fqr_name",
+          minWidth: 100,
+        },
+        {
+          label: "发起科室",
+          prop: "gw_fqks_name",
+          minWidth: 100,
+        },
+        {
+          label: "发起时间",
+          prop: "create_dateline",
+          minWidth: 100,
+        },
+        {
+          label: "当前步骤",
+          prop: "gw_bz",
+          minWidth: 100,
+        },
+        {
+          label: "当前审核人",
+          prop: "gw_shr",
+          minWidth: 100,
+        },
+        {
+          label: "状态",
+          prop: "gw_status",
+          minWidth: 100,
+        },
+      ],
+      //拖拽列
+      dropCol: [
+      {
+          label: "类型",
+          prop: "lb_name",
+          minWidth: 100,
+        },
+        {
+          label: "标题",
+          prop: "gw_title",
+          minWidth: 100,
+        },
+        {
+          label: "发文字号",
+          prop: "gw_zh",
+          minWidth: 100,
+        },
+        {
+          label: "发起人",
+          prop: "gw_fqr_name",
+          minWidth: 100,
+        },
+        {
+          label: "发起科室",
+          prop: "gw_fqks_name",
+          minWidth: 100,
+        },
+        {
+          label: "发起时间",
+          prop: "create_dateline",
+          minWidth: 100,
+        },
+        {
+          label: "当前步骤",
+          prop: "gw_bz",
+          minWidth: 100,
+        },
+        {
+          label: "当前审核人",
+          prop: "gw_shr",
+          minWidth: 100,
+        },
+        {
+          label: "状态",
+          prop: "gw_status",
+          minWidth: 100,
+        },
+      ],
+
     };
   },
   mounted() {
     // this.getUserList();
     this.getListData();
+    this.dropCol = colDrap(this.dropCol);
   },
   methods: {
     getUserList() {

src/views/gwglxt/gwjh/index.vue

@@ -15,46 +15,82 @@
         <el-button type="primary" class="ml5" @click="getListData">搜索</el-button>
       </el-form>
     </div>
-    <el-table :data="tableData" tooltip-effect="dark" v-loading="loading" style="width: 100%" >
-      <el-table-column type="selection" align="center" width="55"></el-table-column>
-      <el-table-column label="序号" align="center" type="index" width="50"></el-table-column>
-      <el-table-column label="类型" prop="lb_name" show-overflow-tooltip></el-table-column>
-      <el-table-column label="标题" prop="gw_title" show-overflow-tooltip></el-table-column>
-      <el-table-column label="发文字号" prop="gw_zh"  show-overflow-tooltip></el-table-column>
-      <el-table-column label="发起人" prop="gw_fqr_name"  show-overflow-tooltip></el-table-column>
-      <el-table-column label="发起科室" prop="gw_fqks_name"  show-overflow-tooltip></el-table-column>
-      <el-table-column label="发起时间" prop="create_dateline"  show-overflow-tooltip></el-table-column>
-      <el-table-column label="查阅情况" prop="cyqk">
-        <template slot-scope="scope">
-          <div>
-            {{scope.row.gw_ycy}}/ {{scope.row.gw_zcy}}
-          </div>
-        </template>
-      </el-table-column>
-      <el-table-column label="状态" prop="gw_fb_option_k">
-        <template slot-scope="scope">
-          <div>
-            {{scope.row.gw_fb_option_k=="2" ? "未发布" : "已发布"}}
-          </div>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" width="200">
-        <template slot-scope="scope">
-          <div v-show="scope.row.gw_fb_option_k=='1'" >
-            <el-button type="text"  @click="handleRemind(scope.row)">提醒</el-button>
-            <el-button type="text" @click="handleDetail(scope.row)">详情</el-button>
-          </div>
-          <div v-show="scope.row.gw_fb_option_k=='2'" >
-            <el-button type="text"  @click="handlePublish(scope.row)">发布</el-button>
-            <el-button type="text" @click="handleDetail(scope.row)">详情</el-button>
-          </div>
-        </template>
-      </el-table-column>
-    </el-table>
-    <footer class="flex-item-none" style="display: flex; justify-content: flex-end; margin-top: 30px">
-      <el-pagination background layout="total,prev, pager, next" :page-size="limit" :total="total"
-        :current-page.sync="cur_page" @current-change="handleCurrentChange"></el-pagination>
-    </footer>
+    <div v-if="false">
+      <el-table :data="tableData" tooltip-effect="dark" v-loading="loading" style="width: 100%" >
+        <el-table-column type="selection" align="center" width="55"></el-table-column>
+        <el-table-column label="序号" align="center" type="index" width="50"></el-table-column>
+        <el-table-column label="类型" prop="lb_name" show-overflow-tooltip></el-table-column>
+        <el-table-column label="标题" prop="gw_title" show-overflow-tooltip></el-table-column>
+        <el-table-column label="发文字号" prop="gw_zh"  show-overflow-tooltip></el-table-column>
+        <el-table-column label="发起人" prop="gw_fqr_name"  show-overflow-tooltip></el-table-column>
+        <el-table-column label="发起科室" prop="gw_fqks_name"  show-overflow-tooltip></el-table-column>
+        <el-table-column label="发起时间" prop="create_dateline"  show-overflow-tooltip></el-table-column>
+        <el-table-column label="查阅情况" prop="cyqk">
+          <template slot-scope="scope">
+            <div>
+              {{scope.row.gw_ycy}}/ {{scope.row.gw_zcy}}
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" prop="gw_fb_option_k">
+          <template slot-scope="scope">
+            <div>
+              {{scope.row.gw_fb_option_k=="2" ? "未发布" : "已发布"}}
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="200">
+          <template slot-scope="scope">
+            <div v-show="scope.row.gw_fb_option_k=='1'" >
+              <el-button type="text"  @click="handleRemind(scope.row)">提醒</el-button>
+              <el-button type="text" @click="handleDetail(scope.row)">详情</el-button>
+            </div>
+            <div v-show="scope.row.gw_fb_option_k=='2'" >
+              <el-button type="text"  @click="handlePublish(scope.row)">发布</el-button>
+              <el-button type="text" @click="handleDetail(scope.row)">详情</el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!-- 可拖拉table -->
+    <div class="sortAbleTable" >
+      <el-table :data="tableData" row-key="gw_id" border style="width: 100%">
+        <el-table-column type="selection" align="center" width="55"></el-table-column>
+        <el-table-column type="index" label="序号" width="100" align="center" />
+        <el-table-column  v-for="(item, index) in colList"  align="center"  show-overflow-tooltip  :key="`col_${index}`"  :prop="dropCol[index].prop"  :label="item.label"  :min-width="item.minWidth" >
+          <template v-slot="scope">
+            <span v-if="dropCol[index].prop == 'cyqk'" style="color: blue">
+              {{scope.row.gw_ycy}}/ {{scope.row.gw_zcy}}
+            </span>
+            <span v-else>
+              {{ scope.row[dropCol[index].prop] }}
+            </span>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="操作" >
+          <template slot-scope="scope">
+            <div v-show="scope.row.gw_fb_option_k=='1'" >
+              <el-button type="text"  @click="handleRemind(scope.row)">提醒</el-button>
+              <el-button type="text" @click="handleDetail(scope.row)">详情</el-button>
+            </div>
+            
+            <div v-show="scope.row.gw_fb_option_k=='2'" >
+              <el-button type="text"  @click="handlePublish(scope.row)">发布</el-button>
+              <el-button type="text" @click="handleDetail(scope.row)">详情</el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <footer class="flex-item-none" style="display: flex; justify-content: flex-end; margin-top: 30px">
+        <el-pagination background layout="total,prev, pager, next" :page-size="limit" :total="total"
+          :current-page.sync="cur_page" @current-change="handleCurrentChange"></el-pagination>
+      </footer>
+    </div>
+
+    
 
     <!-- dialogt弹出 -发布 -->
     <el-dialog :title="title" :visible.sync="dialogFormVisible" width="600px">
@@ -166,6 +202,10 @@
 import { gwjh_list, gwjh_add, gwjh_edit, gwjh_detail,gwjh_del,fast_remind,publishe_api,org_tree,org_users } from "./itemApi";
 import { useUserStore } from "@/stores/user";
 const { real_name,user_id, dept_ids } = useUserStore();
+
+import Sortable from 'sortablejs';
+import colDrap from "../../../utils/drag";
+
 export default {
   name: "bbtj",
   data() {
@@ -252,13 +292,99 @@ export default {
       gwId:'',
       prefixPDFUrl:window.globalVariables.api+'/plugins/pdf.js/web/viewer2.html?file=',
 
-
+      //动态列数组
+      colList: [
+        {
+          label: "类型",
+          prop: "lb_name",
+          minWidth: 100,
+        },
+        {
+          label: "标题",
+          prop: "gw_title",
+          minWidth: 100,
+        },
+        {
+          label: "发文字号",
+          prop: "gw_zh",
+          minWidth: 100,
+        },
+        {
+          label: "发起人",
+          prop: "gw_fqr_name",
+          minWidth: 100,
+        },
+        {
+          label: "发起科室",
+          prop: "gw_fqks_name",
+          minWidth: 100,
+        },
+        {
+          label: "发起时间",
+          prop: "create_dateline",
+          minWidth: 100,
+        },
+        {
+          label: "查询情况",
+          prop: "cyqk",
+          minWidth: 100,
+        },
+        {
+          label: "状态",
+          prop: "gw_status",
+          minWidth: 100,
+        },
+      ],
+      //拖拽列
+      dropCol: [
+      {
+          label: "类型",
+          prop: "lb_name",
+          minWidth: 100,
+        },
+        {
+          label: "标题",
+          prop: "gw_title",
+          minWidth: 100,
+        },
+        {
+          label: "发文字号",
+          prop: "gw_zh",
+          minWidth: 100,
+        },
+        {
+          label: "发起人",
+          prop: "gw_fqr_name",
+          minWidth: 100,
+        },
+        {
+          label: "发起科室",
+          prop: "gw_fqks_name",
+          minWidth: 100,
+        },
+        {
+          label: "发起时间",
+          prop: "create_dateline",
+          minWidth: 100,
+        },
+        {
+          label: "查询情况",
+          prop: "cyqk",
+          minWidth: 100,
+        },
+        {
+          label: "状态",
+          prop: "gw_status",
+          minWidth: 100,
+        },
+      ],
       
     };
   },
   mounted() {
     this.getListData();
     this.getUserList();
+    this.dropCol = colDrap(this.dropCol);
   },
   methods: {
     //初始化列表数据

src/views/gwglxt/gwk/index.vue

@@ -23,27 +23,63 @@
         <el-button type="primary" class="ml5" @click="getListData">搜索</el-button>
       </el-form>
     </div>
-    <el-table :data="tableData" tooltip-effect="dark" v-loading="loading" style="width: 100%"
-      @selection-change="handleSelectionChange">
+    <div v-if="false">
+      <el-table :data="tableData" tooltip-effect="dark" v-loading="loading" style="width: 100%"
+        @selection-change="handleSelectionChange">
+        <el-table-column type="selection" align="center" width="55"></el-table-column>
+        <el-table-column label="序号" align="center" type="index" width="50"></el-table-column>
+        <el-table-column label="类型" prop="lb_name" show-overflow-tooltip></el-table-column>
+        <el-table-column label="标题" prop="gw_title" show-overflow-tooltip></el-table-column>
+        <el-table-column label="发文字号" prop="gw_zh"></el-table-column>
+        <el-table-column label="发起人" prop="gw_fqr_name"></el-table-column>
+        <el-table-column label="发起科室" prop="gw_fqks_name" show-overflow-tooltip></el-table-column>
+        <el-table-column label="发起时间" prop="create_dateline"></el-table-column>
+        <el-table-column label="操作" width="200">
+          <template slot-scope="scope">
+            <el-button type="text" @click="handleDetail(scope.row)">详情</el-button>
+            <el-button type="text" @click="exportsingle(scope.row)">导出</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+     <!-- 可拖拉table -->
+     <div class="sortAbleTable" >
+    <el-table :data="tableData" row-key="gw_id" border style="width: 100%">
       <el-table-column type="selection" align="center" width="55"></el-table-column>
-      <el-table-column label="序号" align="center" type="index" width="50"></el-table-column>
-      <el-table-column label="类型" prop="lb_name" show-overflow-tooltip></el-table-column>
-      <el-table-column label="标题" prop="gw_title" show-overflow-tooltip></el-table-column>
-      <el-table-column label="发文字号" prop="gw_zh"></el-table-column>
-      <el-table-column label="发起人" prop="gw_fqr_name"></el-table-column>
-      <el-table-column label="发起科室" prop="gw_fqks_name" show-overflow-tooltip></el-table-column>
-      <el-table-column label="发起时间" prop="create_dateline"></el-table-column>
-      <el-table-column label="操作" width="200">
+      <el-table-column type="index" label="序号" width="100" align="center" />
+      <el-table-column
+        v-for="(item, index) in colList"
+        align="center"
+        show-overflow-tooltip
+        :key="`col_${index}`"
+        :prop="dropCol[index].prop"
+        :label="item.label"
+        :min-width="item.minWidth"
+      >
+        <template v-slot="scope">
+          <span v-if="dropCol[index].prop == 'date'" style="color: blue">
+            {{ scope.row[dropCol[index].prop] }}
+          </span>
+          <span v-else>
+            {{ scope.row[dropCol[index].prop] }}
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" >
         <template slot-scope="scope">
           <el-button type="text" @click="handleDetail(scope.row)">详情</el-button>
           <el-button type="text" @click="exportsingle(scope.row)">导出</el-button>
         </template>
       </el-table-column>
     </el-table>
-    <footer class="flex-item-none" style="display: flex; justify-content: flex-end; margin-top: 30px">
-      <el-pagination background layout="total,prev, pager, next" :page-size="limit" :total="total"
-        :current-page.sync="cur_page" @current-change="handleCurrentChange"></el-pagination>
-    </footer>
+
+      <footer class="flex-item-none" style="display: flex; justify-content: flex-end; margin-top: 30px">
+        <el-pagination background layout="total,prev, pager, next" :page-size="limit" :total="total"
+          :current-page.sync="cur_page" @current-change="handleCurrentChange"></el-pagination>
+      </footer>
+    </div>
+
+    
   </div>
 </template>
 
@@ -61,6 +97,10 @@ import {
 } from "./itemApi";
 import { useUserStore } from "@/stores/user";
 const { real_name, dept_ids } = useUserStore();
+
+import Sortable from 'sortablejs';
+import colDrap from "../../../utils/drag";
+
 export default {
   name: "bbtj",
   data() {
@@ -95,11 +135,80 @@ export default {
 
       mineStatus: "",
       mineStatusValue: [],
+
+      //动态列数组
+      colList: [
+        {
+          label: "类型",
+          prop: "lb_name",
+          minWidth: 100,
+        },
+        {
+          label: "标题",
+          prop: "gw_title",
+          minWidth: 100,
+        },
+        {
+          label: "发文字号",
+          prop: "gw_zh",
+          minWidth: 100,
+        },
+        {
+          label: "发起人",
+          prop: "gw_fqr_name",
+          minWidth: 100,
+        },
+        {
+          label: "发起科室",
+          prop: "gw_fqks_name",
+          minWidth: 100,
+        },
+        {
+          label: "发起时间",
+          prop: "create_dateline",
+          minWidth: 100,
+        },
+      ],
+      //拖拽列
+      dropCol: [
+        {
+          label: "类型",
+          prop: "lb_name",
+          minWidth: 100,
+        },
+        {
+          label: "标题",
+          prop: "gw_title",
+          minWidth: 100,
+        },
+        {
+          label: "发文字号",
+          prop: "gw_zh",
+          minWidth: 100,
+        },
+        {
+          label: "发起人",
+          prop: "gw_fqr_name",
+          minWidth: 100,
+        },
+        {
+          label: "发起科室",
+          prop: "gw_fqks_name",
+          minWidth: 100,
+        },
+        {
+          label: "发起时间",
+          prop: "create_dateline",
+          minWidth: 100,
+        },
+      ],
+
     };
   },
   mounted() {
     // this.getUserList();
     this.getListData();
+    this.dropCol = colDrap(this.dropCol);
   },
   methods: {
     getUserList() {

src/views/gwglxt/wdfw/index.vue

@@ -17,98 +17,166 @@
       </el-form>
     </div>
 
-    <el-table :data="applyTable" tooltip-effect="dark" v-loading="loading" style="width: 100%"
-      @selection-change="handleSelectionChange">
-      <el-table-column type="selection" align="center" width="55"></el-table-column>
-      <el-table-column label="序号" align="center" type="index" width="50"></el-table-column>
-      <el-table-column label="类型" show-overflow-tooltip prop="lb_name" width="auto"></el-table-column>
-      <el-table-column label="标题" show-overflow-tooltip prop="gw_title"></el-table-column>
-      <el-table-column label="发文字号" show-overflow-tooltip >
-        <template slot-scope="scope">
-          {{scope.row.gw_zh}}
-        </template>
-      </el-table-column>
-      <el-table-column label="发起人" show-overflow-tooltip prop="gw_fqr_name"></el-table-column>
-      <el-table-column label="发起科室" show-overflow-tooltip prop="gw_fqks_name"></el-table-column>
-      <el-table-column label="发起时间" show-overflow-tooltip prop="create_dateline"></el-table-column>
-      <el-table-column label="当前步骤" >
-        <template slot-scope="scope">
-          {{scope.row.gw_bz!='' ? scope.row.gw_bz : '--'}}
-        </template>
-      </el-table-column>
-      <el-table-column label="当前审核人" >
-        <template slot-scope="scope">
-          {{scope.row.gw_shr!='' ? scope.row.gw_shr : '--'}}
-        </template>
-      </el-table-column>
-      <el-table-column label="状态">
-        <template slot-scope="scope">
-          <div>
-            {{scope.row.gw_status}}
-          </div>
-          <!-- <div :class="scope.row.xm_status_option_k=='4' ? 'red' : (scope.row.xm_status_option_k=='3' ? 'blue' : ' ') ">
-                {{scope.row.xm_status}}
-              </div> -->
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" width="150">
-        <template slot-scope="scope">
-          <el-popover placement="left" width="185" trigger="click" v-if="scope.row.gw_status_option_k=='1'">
-            <!--待提交-->
-            <el-button type="text" @click="reviewShow(scope.row)">预览</el-button>
-            <el-button type="text" @click="editShow(scope.row,'edit')">编辑</el-button>
-            <el-button type="text" @click="applyCheck(scope.row)">提交</el-button>
-            <el-button type="text" @click="delData(scope.row)">删除</el-button>
-            <div slot="reference" class="optionMore" style="padding-left:10%;">
-              <img src="../../../assets/icon/optionIcon.png" style="width:3%;" alt="">
+    <div v-if="false">
+      <el-table :data="applyTable" tooltip-effect="dark" v-loading="loading" style="width: 100%"
+        @selection-change="handleSelectionChange">
+        <el-table-column type="selection" align="center" width="55"></el-table-column>
+        <el-table-column label="序号" align="center" type="index" width="50"></el-table-column>
+        <el-table-column label="类型" show-overflow-tooltip prop="lb_name" width="auto"></el-table-column>
+        <el-table-column label="标题" show-overflow-tooltip prop="gw_title"></el-table-column>
+        <el-table-column label="发文字号" show-overflow-tooltip >
+          <template slot-scope="scope">
+            {{scope.row.gw_zh}}
+          </template>
+        </el-table-column>
+        <el-table-column label="发起人" show-overflow-tooltip prop="gw_fqr_name"></el-table-column>
+        <el-table-column label="发起科室" show-overflow-tooltip prop="gw_fqks_name"></el-table-column>
+        <el-table-column label="发起时间" show-overflow-tooltip prop="create_dateline"></el-table-column>
+        <el-table-column label="当前步骤" >
+          <template slot-scope="scope">
+            {{scope.row.gw_bz!='' ? scope.row.gw_bz : '--'}}
+          </template>
+        </el-table-column>
+        <el-table-column label="当前审核人" >
+          <template slot-scope="scope">
+            {{scope.row.gw_shr!='' ? scope.row.gw_shr : '--'}}
+          </template>
+        </el-table-column>
+        <el-table-column label="状态">
+          <template slot-scope="scope">
+            <div>
+              {{scope.row.gw_status}}
             </div>
-          </el-popover>
-
-          <el-popover placement="left" width="240" trigger="click" v-if="scope.row.gw_status_option_k=='2'">
-            <el-button type="text" @click="reviewShow(scope.row)">详情</el-button>
-            <el-button type="text" @click="editShow(scope.row,'edit')">编辑</el-button>
-            <!-- <el-button type="text" @click="applyCheck(scope.row)">重新提交</el-button> -->
-            <el-button type="text" @click="higSpeed(scope.row)">催办</el-button>
-            <el-button type="text" @click="delData(scope.row)">删除</el-button>
-            <div slot="reference" class="optionMore" style="padding-left:10%;">
-              <img src="../../../assets/icon/optionIcon.png" style="width:3%;" alt="">
+            <!-- <div :class="scope.row.xm_status_option_k=='4' ? 'red' : (scope.row.xm_status_option_k=='3' ? 'blue' : ' ') ">
+                  {{scope.row.xm_status}}
+                </div> -->
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="150">
+          <template slot-scope="scope">
+            <el-popover placement="left" width="185" trigger="click" v-if="scope.row.gw_status_option_k=='1'">
+              <!--待提交-->
+              <el-button type="text" @click="reviewShow(scope.row)">预览</el-button>
+              <el-button type="text" @click="editShow(scope.row,'edit')">编辑</el-button>
+              <el-button type="text" @click="applyCheck(scope.row)">提交</el-button>
+              <el-button type="text" @click="delData(scope.row)">删除</el-button>
+              <div slot="reference" class="optionMore" style="padding-left:10%;">
+                <img src="../../../assets/icon/optionIcon.png" style="width:3%;" alt="">
+              </div>
+            </el-popover>
+
+            <el-popover placement="left" width="240" trigger="click" v-if="scope.row.gw_status_option_k=='2'">
+              <el-button type="text" @click="reviewShow(scope.row)">详情</el-button>
+              <el-button type="text" @click="editShow(scope.row,'edit')">编辑</el-button>
+              <!-- <el-button type="text" @click="applyCheck(scope.row)">重新提交</el-button> -->
+              <el-button type="text" @click="higSpeed(scope.row)">催办</el-button>
+              <el-button type="text" @click="delData(scope.row)">删除</el-button>
+              <div slot="reference" class="optionMore" style="padding-left:10%;">
+                <img src="../../../assets/icon/optionIcon.png" style="width:3%;" alt="">
+              </div>
+            </el-popover>
+
+            <el-popover placement="left" width="185" trigger="click" v-if="scope.row.gw_status_option_k=='3'">
+              <el-button type="text" @click="reviewShow(scope.row)">详情</el-button>
+              <el-button type="text" @click="checkRecord(scope.row)">审批记录</el-button>
+              <el-button type="text" @click="higSpeed(scope.row)">催办</el-button>
+              <div slot="reference" class="optionMore" style="padding-left:10%;">
+                <img src="../../../assets/icon/optionIcon.png" style="width:3%;" alt="">
+              </div>
+            </el-popover>
+
+            <el-popover placement="left" width="240" trigger="click" v-if="scope.row.gw_status_option_k=='4'">
+              <el-button type="text" @click="reviewShow(scope.row)">详情</el-button>
+              <el-button type="text" @click="checkRecord(scope.row)">审批记录</el-button>
+              <el-button type="text" @click="editShow(scope.row,'reEdit')">重新进行拟稿</el-button>
+              <div slot="reference" class="optionMore" style="padding-left:10%;">
+                <img src="../../../assets/icon/optionIcon.png" style="width:3%;" alt="">
+              </div>
+            </el-popover>
+
+            <el-popover placement="left" width="45" trigger="click" v-if="scope.row.gw_status_option_k=='5'">
+              <el-button type="text" @click="reviewShow(scope.row)">详情</el-button>
+              <el-button type="text" @click="checkRecord(scope.row)">审批记录</el-button>
+              <div slot="reference" class="optionMore" style="padding-left:10%;">
+                <img src="../../../assets/icon/optionIcon.png" style="width:3%;" alt="">
+              </div>
+            </el-popover>
+
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!-- 可拖拉table -->
+    <div class="sortAbleTable" >
+      <el-table :data="applyTable" row-key="gw_id" border style="width: 100%">
+        <el-table-column type="selection" align="center" width="55"></el-table-column>
+        <el-table-column type="index" label="序号" width="100" align="center" />
+        <el-table-column
+          v-for="(item, index) in colList"
+          align="center"
+          show-overflow-tooltip
+          :key="`col_${index}`"
+          :prop="dropCol[index].prop"
+          :label="item.label"
+          :min-width="item.minWidth"
+        >
+          <template v-slot="scope">
+            <span v-if="dropCol[index].prop == 'date'" style="color: blue">
+              {{ scope.row[dropCol[index].prop] }}
+            </span>
+            <span v-else>
+              {{ scope.row[dropCol[index].prop] }}
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="200">
+          <template slot-scope="scope">
+            <div v-if="scope.row.gw_status_option_k=='1'">
+              <el-button type="text" @click="reviewShow(scope.row)">预览</el-button>
+              <el-button type="text" @click="editShow(scope.row,'edit')">编辑</el-button>
+              <el-button type="text" @click="applyCheck(scope.row)">提交</el-button>
+              <el-button type="text" @click="delData(scope.row)">删除</el-button>
+              
             </div>
-          </el-popover>
-
-          <el-popover placement="left" width="185" trigger="click" v-if="scope.row.gw_status_option_k=='3'">
-            <el-button type="text" @click="reviewShow(scope.row)">详情</el-button>
-            <el-button type="text" @click="checkRecord(scope.row)">审批记录</el-button>
-            <el-button type="text" @click="higSpeed(scope.row)">催办</el-button>
-            <div slot="reference" class="optionMore" style="padding-left:10%;">
-              <img src="../../../assets/icon/optionIcon.png" style="width:3%;" alt="">
+            
+            <div v-if="scope.row.gw_status_option_k=='2'">
+              <el-button type="text" @click="reviewShow(scope.row)">详情</el-button>
+              <el-button type="text" @click="editShow(scope.row,'edit')">编辑</el-button>
+              <el-button type="text" @click="higSpeed(scope.row)">催办</el-button>
+              <el-button type="text" @click="delData(scope.row)">删除</el-button>
+
             </div>
-          </el-popover>
-
-          <el-popover placement="left" width="240" trigger="click" v-if="scope.row.gw_status_option_k=='4'">
-            <el-button type="text" @click="reviewShow(scope.row)">详情</el-button>
-            <el-button type="text" @click="checkRecord(scope.row)">审批记录</el-button>
-            <el-button type="text" @click="editShow(scope.row,'reEdit')">重新进行拟稿</el-button>
-            <div slot="reference" class="optionMore" style="padding-left:10%;">
-              <img src="../../../assets/icon/optionIcon.png" style="width:3%;" alt="">
+          
+            <div v-if="scope.row.gw_status_option_k=='3'">
+              <el-button type="text" @click="reviewShow(scope.row)">详情</el-button>
+              <el-button type="text" @click="checkRecord(scope.row)">审批记录</el-button>
+              <el-button type="text" @click="higSpeed(scope.row)">催办</el-button>
             </div>
-          </el-popover>
-
-          <el-popover placement="left" width="45" trigger="click" v-if="scope.row.gw_status_option_k=='5'">
-            <el-button type="text" @click="reviewShow(scope.row)">详情</el-button>
-            <el-button type="text" @click="checkRecord(scope.row)">审批记录</el-button>
-            <div slot="reference" class="optionMore" style="padding-left:10%;">
-              <img src="../../../assets/icon/optionIcon.png" style="width:3%;" alt="">
+            
+            <div v-if="scope.row.gw_status_option_k=='4'">
+              <el-button type="text" @click="reviewShow(scope.row)">详情</el-button>
+              <el-button type="text" @click="checkRecord(scope.row)">审批记录</el-button>
+              <el-button type="text" @click="editShow(scope.row,'reEdit')">重新进行拟稿</el-button>
+              
+            </div>
+            
+            <div v-if="scope.row.gw_status_option_k=='5'">
+              <el-button type="text" @click="reviewShow(scope.row)">详情</el-button>
+                <el-button type="text" @click="checkRecord(scope.row)">审批记录</el-button>
+              
             </div>
-          </el-popover>
 
-        </template>
-      </el-table-column>
-    </el-table>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <footer class="flex-item-none" style="display: flex; justify-content: flex-end; margin-top: 30px">
+        <el-pagination background layout="total,prev, pager, next" :page-size="limit" :total="total"
+          :current-page.sync="cur_page" @current-change="handleCurrentChange"></el-pagination>
+      </footer>
+    </div>
 
-    <footer class="flex-item-none" style="display: flex; justify-content: flex-end; margin-top: 30px">
-      <el-pagination background layout="total,prev, pager, next" :page-size="limit" :total="total"
-        :current-page.sync="cur_page" @current-change="handleCurrentChange"></el-pagination>
-    </footer>
+    
 
 
 
@@ -242,6 +310,10 @@ import { useUserStore } from "@/stores/user";
 const { real_name, user_id, dept_ids } = useUserStore();
 import Tinymce from "@/components/Tinymce/index.vue";
 import FileUpload from "@/components/FileUpload/index.vue";
+
+import Sortable from 'sortablejs';
+import colDrap from "../../../utils/drag";
+
 export default {
   name: "xmsq",
   components: {
@@ -390,11 +462,110 @@ export default {
       timestamp: Date.now(),
       gwId:'',
       reEdit: '',
-      prefixPDFUrl:window.globalVariables.api+'/plugins/pdf.js/web/viewer2.html?file=',
+      prefixPDFUrl: window.globalVariables.api + '/plugins/pdf.js/web/viewer2.html?file=',
+
+      //动态列数组
+      colList: [
+        {
+          label: "类型",
+          prop: "lb_name",
+          minWidth: 100,
+        },
+        {
+          label: "标题",
+          prop: "gw_title",
+          minWidth: 100,
+        },
+        {
+          label: "发文字号",
+          prop: "gw_zh",
+          minWidth: 100,
+        },
+        {
+          label: "发起人",
+          prop: "gw_fqr_name",
+          minWidth: 100,
+        },
+        {
+          label: "发起科室",
+          prop: "gw_fqks_name",
+          minWidth: 100,
+        },
+        {
+          label: "发起时间",
+          prop: "create_dateline",
+          minWidth: 100,
+        },
+        {
+          label: "当前步骤",
+          prop: "gw_bz",
+          minWidth: 100,
+        },
+        {
+          label: "当前审核人",
+          prop: "gw_shr",
+          minWidth: 100,
+        },
+        {
+          label: "状态",
+          prop: "gw_status",
+          minWidth: 100,
+        },
+      ],
+      //拖拽列
+      dropCol: [
+      {
+          label: "类型",
+          prop: "lb_name",
+          minWidth: 100,
+        },
+        {
+          label: "标题",
+          prop: "gw_title",
+          minWidth: 100,
+        },
+        {
+          label: "发文字号",
+          prop: "gw_zh",
+          minWidth: 100,
+        },
+        {
+          label: "发起人",
+          prop: "gw_fqr_name",
+          minWidth: 100,
+        },
+        {
+          label: "发起科室",
+          prop: "gw_fqks_name",
+          minWidth: 100,
+        },
+        {
+          label: "发起时间",
+          prop: "create_dateline",
+          minWidth: 100,
+        },
+        {
+          label: "当前步骤",
+          prop: "gw_bz",
+          minWidth: 100,
+        },
+        {
+          label: "当前审核人",
+          prop: "gw_shr",
+          minWidth: 100,
+        },
+        {
+          label: "状态",
+          prop: "gw_status",
+          minWidth: 100,
+        },
+      ],
+      
     };
   },
   mounted() {
     this.getListData();
+    this.dropCol = colDrap(this.dropCol);
   },
   methods: {
     //获取用户列表