修改

src/views/newTable/index.vue

@@ -93,8 +93,8 @@
               </div>
               <el-form-item label="是否动态表">
                 <el-radio-group v-model="form.isActiveTable">
-                  <el-radio label="1">是</el-radio>
-                  <el-radio label="0">否</el-radio>
+                  <el-radio :label="true">是</el-radio>
+                  <el-radio :label="false">否</el-radio>
                 </el-radio-group>
               </el-form-item>
               <el-form-item label="数据表达式">

src/views/systemSettings/views/newAuth/components/table copy.vue

@@ -0,0 +1,353 @@
+<template>
+  <div class="table">
+    <div class="table-form">
+      <el-form ref="form" :model="form" label-width="100px">
+        <div class="flex-wrap fr-list">
+          <el-form-item class="flex1" label="权限编码">
+            <el-input size="small" clearable placeholder="请输入权限编码" v-model="form.auth_ident"></el-input>
+          </el-form-item>
+          <el-form-item class="flex1" label="表格宽度">
+            <el-input size="small" clearable placeholder="请输入表格宽度" v-model="form.table_width"></el-input>
+          </el-form-item>
+          <el-form-item class="flex1" label="表格高度">
+            <el-input size="small" clearable placeholder="请输入表格高度" v-model="form.table_height"></el-input>
+          </el-form-item>
+        </div>
+        <div class="flex-wrap fr-list">
+          <el-form-item class="flex1" label="服务ID">
+            <el-select @change="serviceChange" style="width: 264px;" size="small" clearable v-model="form.serviceID" placeholder="请选择服务ID">
+              <el-option v-for="(item,index) in authArrs" :key="index" :label="item.serviceName" :value="item.serviceID"></el-option>
+            </el-select>
+          </el-form-item>
+        </div>
+        <el-form-item class="flex1" label="权限描述">
+          <el-input size="small" type="textarea" :rows="5" placeholder="请输入权限描述" v-model="form.auth_comment"></el-input>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="table-yl box-public-shadow-mini">
+      <div class="table-yl-head flex">
+        <div class="title">列设置</div>
+        <el-button @click="restData" type="primary" size="small" class="rmScs">初始化</el-button>
+      </div>
+      <div class="table-yl-content">
+        <el-table :data="tableData" stripe border height="100%" style="width: 100%">
+          <el-table-column prop="columnName" label="名称">
+          </el-table-column>
+          <el-table-column prop="columnLabel" label="标签">
+          </el-table-column>
+          <el-table-column prop="columnDescribe" label="描述">
+          </el-table-column>
+          <el-table-column prop="needSort" label="是否排序">
+            <template slot-scope="scope">
+              <div>{{ scope.row.needSort == 1 ? '是' :'否' }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="needFilters" label="是否过滤">
+            <template slot-scope="scope">
+              <div>{{ scope.row.needFilters == 1 ? '是' :'否' }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="needShow" label="是否显示">
+            <template slot-scope="scope">
+              <div>{{ scope.row.needShow == 1 ? '是' :'否' }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="dataType" label="数据类型">
+          </el-table-column>
+          <el-table-column prop="needGroup" label="是否分组">
+            <template slot-scope="scope">
+              <div>{{ scope.row.needGroup == 1 ? '是' :'否' }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="listqueryTemplateID" label="是否下拉">
+            <template slot-scope="scope">
+              <div>{{ scope.row.listqueryTemplateID == 1 ? '是' :'否' }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="needCount" label="是否合计">
+            <template slot-scope="scope">
+              <div>{{ scope.row.needCount == 1 ? '是' :'否' }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="orderNumber" label="字段排序">
+          </el-table-column>
+          <el-table-column fixed="right" label="操作">
+            <template slot-scope="scope">
+              <el-button type="text" @click="handleEdit(scope.row)" size="small" class="rmScs">编辑</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+    <Dialog width="750px" :flag="tableFlag">
+      <div class="dialog-content">
+        <div class="title">修改列设置</div>
+        <div class="contents">
+          <el-form ref="form" :model="tableForm" label-width="100px">
+            <div class="flex-wrap ">
+              <el-form-item class="flex1" label="名称">
+                <el-input size="small" clearable placeholder="请输入名称" v-model="tableForm.columnName"></el-input>
+              </el-form-item>
+              <el-form-item class="flex1" label="标签">
+                <el-input size="small" clearable placeholder="请输入标签" v-model="tableForm.columnLabel"></el-input>
+              </el-form-item>
+            </div>
+            <div class="flex-wrap ">
+              <el-form-item class="flex1" label="描述">
+                <el-input size="small" clearable placeholder="请输入描述" v-model="tableForm.columnDescribe"></el-input>
+              </el-form-item>
+              <el-form-item class="flex1" label="排序">
+                <el-select size="small" clearable v-model="tableForm.needSort" placeholder="请选择是否排序">
+                  <el-option label="是" :value="1"></el-option>
+                  <el-option label="否" :value="0"></el-option>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="flex-wrap ">
+              <el-form-item class="flex1" label="过滤">
+                <el-select size="small" clearable v-model="tableForm.needFilters" placeholder="请选择是否过滤">
+                  <el-option label="是" :value="1"></el-option>
+                  <el-option label="否" :value="0"></el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item class="flex1" label="显示">
+                <el-select size="small" clearable v-model="tableForm.needShow" placeholder="请选择是否显示">
+                  <el-option label="是" :value="1"></el-option>
+                  <el-option label="否" :value="0"></el-option>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="flex-wrap ">
+              <el-form-item class="flex1" label="数据类型">
+                <el-input size="small" clearable placeholder="请输入名称" v-model="tableForm.dataType"></el-input>
+              </el-form-item>
+              <el-form-item class="flex1" label="分组">
+                <el-select size="small" clearable v-model="tableForm.needGroup" placeholder="请选择是否分组">
+                  <el-option label="是" :value="1"></el-option>
+                  <el-option label="否" :value="0"></el-option>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="flex-wrap ">
+              <el-form-item class="flex1" label="下拉">
+                <el-select size="small" clearable v-model="tableForm.listqueryTemplateID" placeholder="请选择是否下拉">
+                  <el-option label="是" :value="1"></el-option>
+                  <el-option label="否" :value="0"></el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item class="flex1" label="合计">
+                <el-select size="small" clearable v-model="tableForm.needCount" placeholder="请选择是否合计">
+                  <el-option label="是" :value="1"></el-option>
+                  <el-option label="否" :value="0"></el-option>
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="flex-wrap ">
+              <el-form-item label="字段排序">
+                <el-input style="width: 240px;" size="small" clearable placeholder="请输入名称" v-model="tableForm.orderNumber"></el-input>
+              </el-form-item>
+            </div>
+          </el-form>
+        </div>
+        <div class="foot right">
+          <el-button size="medium" @click="handleOk" class="r24 bcButton" type="primary">提交</el-button>
+          <el-button @click="eledite" size="medium">取消</el-button>
+        </div>
+      </div>
+    </Dialog>
+  </div>
+</template>
+
+<script>
+import Dialog from '@/layout/components/Dialog'
+import pb from '@/layout/mixin/getPublicData'
+import { initColumnSet } from '@/api/newLogin'
+export default {
+  name: 'Table',
+  mixins: [pb],
+  props: {
+    icons: {
+      type: Array,
+      default: () => []
+    },
+    authObj: {
+      type: Object,
+      default: () => { }
+    },
+    authType: {
+      type: String,
+      default: ''
+    },
+    authTable: {
+      type: Boolean,
+      default: false
+    },
+  },
+  components: { Dialog },
+  data () {
+    return {
+      form: {
+        auth_ident: '',
+        auth_comment: '',
+        table_width: '',
+        table_height: '',
+        serviceID: ''
+      },
+      tableForm: {
+        columnName: "",
+        columnLabel: "",
+        columnDescribe: "",
+        needSort: "",
+        needFilters: "",
+        needShow: "",
+        needGroup: "",
+        dataType: "",
+        listqueryTemplateID: "",
+        needCount: "",
+        orderNumber: "",
+        needSearch: "",
+      },
+      tableData: [],
+      authArrs: [],
+      tableFlag: false,
+      allData: [],
+      addAuthId: '',
+      editAuthId: ''
+    }
+  },
+  watch: {
+    authType: {
+      handler (val) {
+        if (val == 'add') {
+          this.clearForm()
+          this.tableData = []
+        }
+      },
+      immediate: true
+    },
+    authObj: {
+      handler (obj) {
+        if (obj.queryTemplateID) {
+          obj.serviceID = obj.queryTemplateID
+          // this.getTable(obj.queryTemplateID)
+        }
+        if (this.authType == 'add' && obj.auth_id) {
+          this.addAuthId = obj.auth_id
+        } else if (this.authType == 'edit' && obj.auth_id) {
+          this.editAuthId = obj.auth_id
+        }
+        if (this.addAuthId && this.editAuthId) {
+          if (this.addAuthId != this.editAuthId) {
+            this.tableData = []
+          }
+        } else {
+          this.tableData = []
+        }
+        this.form = obj
+        // this.restData()
+      },
+      immediate: true
+    },
+  },
+  async mounted () {
+    const result = await this.getQuery(SERVICE_ID.sysAllMenuId, false, { serviceType: 1 })
+    this.authArrs = result
+  },
+  methods: {
+    //清空表单
+    clearForm () {
+      const data = this.form
+      for (const key in data) {
+        if (Object.hasOwnProperty.call(data, key)) {
+          data[key] = ''
+        }
+      }
+    },
+    //新增表格
+    tableAdd () {
+      this.tableFlag = true
+    },
+    //表格数据提交
+    async handleOk () {
+      this.tableForm.serviceOutPutId = this.form.auth_id
+      const result = await this.generalDataReception(SERVICE_ID.getTableColumnId, this.tableForm, 2)
+      this.tableFlag = false
+    },
+    //表格取消
+    eledite () {
+      this.tableFlag = false
+    },
+    //获取表格数据
+    async getTable (id) {
+      const result = await this.getQuery(id, true, {}, 10)
+      this.tableData = result
+      // for (let i = 0; i < result.length; i++) {
+      //   const element = result[i];
+      //   element.serviceOutPutId = this.form.auth_id
+      //   await this.generalDataReception(18122, element, 1)
+      // }
+    },
+    serviceChange (val) {
+      if (val) {
+        this.form.queryTemplateID = val
+      }
+    },
+    handleEdit (row) {
+      this.tableFlag = true
+      this.tableForm = row
+    },
+    async restData () {
+      if (this.form.auth_id) {
+        const { code, returnData } = await initColumnSet({ auth_id: this.form.auth_id })
+        if (code && returnData && returnData.length) {
+          this.tableData = returnData
+        } else {
+          this.tableData = []
+        }
+      } else {
+        this.$message.error('请添加数据保存后再操作')
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.table {
+  .fr-list {
+    .el-form-item {
+      margin-right: 105px;
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+  .el-select {
+    width: 100%;
+  }
+  &-yl {
+    position: absolute;
+    bottom: 0;
+    width: calc(100% - 376px);
+    right: 0;
+    height: calc(100% - 440px);
+    &-content {
+      margin-top: 20px;
+      height: calc(100% - 48px);
+    }
+  }
+  .contents {
+    padding: 24px;
+    .el-form {
+      padding-right: 0;
+    }
+    .el-select {
+      width: 100%;
+    }
+    .r40 {
+      margin-right: 60px;
+    }
+  }
+}
+</style>

src/views/systemSettings/views/newAuth/components/table.vue

@@ -14,70 +14,111 @@
           </el-form-item>
         </div>
         <div class="flex-wrap fr-list">
-          <el-form-item class="flex1" label="服务ID">
+          <el-form-item label="服务ID">
             <el-select @change="serviceChange" style="width: 264px;" size="small" clearable v-model="form.serviceID" placeholder="请选择服务ID">
               <el-option v-for="(item,index) in authArrs" :key="index" :label="item.serviceName" :value="item.serviceID"></el-option>
             </el-select>
           </el-form-item>
+          <el-form-item class="flex1" label="权限描述">
+            <el-input size="small" type="textarea" :rows="1" placeholder="请输入权限描述" v-model="form.auth_comment"></el-input>
+          </el-form-item>
         </div>
-        <el-form-item class="flex1" label="权限描述">
-          <el-input size="small" type="textarea" :rows="5" placeholder="请输入权限描述" v-model="form.auth_comment"></el-input>
-        </el-form-item>
       </el-form>
     </div>
     <div class="table-yl box-public-shadow-mini">
       <div class="table-yl-head flex">
-        <div class="title">列设置</div>
-        <el-button @click="restData" type="primary" size="small" class="rmScs">初始化</el-button>
+        <div class="title">表格预览</div>
+        <div>
+          <el-button @click="restData" type="primary" plain size="small" class="rmScs">初始化</el-button>
+          <el-button :disabled="tableName" @click="handleOk" type="primary" size="small" class="rmScs">保存</el-button>
+        </div>
       </div>
       <div class="table-yl-content">
-        <el-table :data="tableData" stripe border height="100%" style="width: 100%">
-          <el-table-column prop="columnName" label="名称">
-          </el-table-column>
-          <el-table-column prop="columnLabel" label="标签">
-          </el-table-column>
-          <el-table-column prop="columnDescribe" label="描述">
-          </el-table-column>
-          <el-table-column prop="needSort" label="是否排序">
-            <template slot-scope="scope">
-              <div>{{ scope.row.needSort == 1 ? '是' :'否' }}</div>
-            </template>
-          </el-table-column>
-          <el-table-column prop="needFilters" label="是否过滤">
-            <template slot-scope="scope">
-              <div>{{ scope.row.needFilters == 1 ? '是' :'否' }}</div>
-            </template>
-          </el-table-column>
-          <el-table-column prop="needShow" label="是否显示">
-            <template slot-scope="scope">
-              <div>{{ scope.row.needShow == 1 ? '是' :'否' }}</div>
-            </template>
-          </el-table-column>
-          <el-table-column prop="dataType" label="数据类型">
-          </el-table-column>
-          <el-table-column prop="needGroup" label="是否分组">
-            <template slot-scope="scope">
-              <div>{{ scope.row.needGroup == 1 ? '是' :'否' }}</div>
-            </template>
-          </el-table-column>
-          <el-table-column prop="listqueryTemplateID" label="是否下拉">
-            <template slot-scope="scope">
-              <div>{{ scope.row.listqueryTemplateID == 1 ? '是' :'否' }}</div>
-            </template>
-          </el-table-column>
-          <el-table-column prop="needCount" label="是否合计">
-            <template slot-scope="scope">
-              <div>{{ scope.row.needCount == 1 ? '是' :'否' }}</div>
-            </template>
-          </el-table-column>
-          <el-table-column prop="orderNumber" label="字段排序">
-          </el-table-column>
-          <el-table-column fixed="right" label="操作">
-            <template slot-scope="scope">
-              <el-button type="text" @click="handleEdit(scope.row)" size="small" class="rmScs">编辑</el-button>
-            </template>
+        <el-table class="table" :data="tableDataCopys" stripe border @header-click="headerClick" style="width: 100%">
+          <el-table-column v-for="(item,index) in tableData" :key="index" :prop="item.columnName" :label="item.columnLabel">
           </el-table-column>
         </el-table>
+        <el-form style="margin-top: 30px;" ref="form" :model="tableForm" label-width="40px">
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <el-form-item class="flex1" label="名称">
+                <el-input size="small" clearable placeholder="请输入名称" v-model="tableForm.columnLabel"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item class="flex1" label="标签">
+                <el-input disabled size="small" clearable placeholder="请输入标签" v-model="tableForm.columnName"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item class="flex1" label="描述">
+                <el-input size="small" clearable placeholder="请输入描述" v-model="tableForm.columnDescribe"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item class="flex1" label="排序">
+                <el-select size="small" clearable v-model="tableForm.needSort" placeholder="请选择是否排序">
+                  <el-option label="是" :value="1"></el-option>
+                  <el-option label="否" :value="0"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <el-form-item class="flex1" label="过滤">
+                <el-select size="small" clearable v-model="tableForm.needFilters" placeholder="请选择是否过滤">
+                  <el-option label="是" :value="1"></el-option>
+                  <el-option label="否" :value="0"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item class="flex1" label="显示">
+                <el-select size="small" clearable v-model="tableForm.needShow" placeholder="请选择是否显示">
+                  <el-option label="是" :value="1"></el-option>
+                  <el-option label="否" :value="0"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item class="flex1" label-width="80px" label="数据类型">
+                <el-input size="small" clearable placeholder="请输入名称" v-model="tableForm.dataType"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item class="flex1" label="分组">
+                <el-select size="small" clearable v-model="tableForm.needGroup" placeholder="请选择是否分组">
+                  <el-option label="是" :value="1"></el-option>
+                  <el-option label="否" :value="0"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <el-form-item class="flex1" label="下拉">
+                <el-select size="small" clearable v-model="tableForm.listqueryTemplateID" placeholder="请选择是否下拉">
+                  <el-option label="是" :value="1"></el-option>
+                  <el-option label="否" :value="0"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item class="flex1" label="合计">
+                <el-select size="small" clearable v-model="tableForm.needCount" placeholder="请选择是否合计">
+                  <el-option label="是" :value="1"></el-option>
+                  <el-option label="否" :value="0"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label-width="80px" label="字段排序">
+                <el-input size="small" clearable placeholder="请输入名称" v-model="tableForm.orderNumber"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
       </div>
     </div>
     <Dialog width="750px" :flag="tableFlag">
@@ -209,11 +250,13 @@ export default {
         needSearch: "",
       },
       tableData: [],
+      tableDataCopys: [],
       authArrs: [],
       tableFlag: false,
       allData: [],
       addAuthId: '',
-      editAuthId: ''
+      editAuthId: '',
+      tableName: true
     }
   },
   watch: {
@@ -240,9 +283,13 @@ export default {
         if (this.addAuthId && this.editAuthId) {
           if (this.addAuthId != this.editAuthId) {
             this.tableData = []
+            this.clearFormData()
+            this.tableName = true
           }
         } else {
           this.tableData = []
+          this.clearFormData()
+          this.tableName = true
         }
         this.form = obj
         // this.restData()
@@ -264,6 +311,14 @@ export default {
         }
       }
     },
+    clearFormData () {
+      const newData = this.tableForm
+      for (const key in newData) {
+        if (Object.hasOwnProperty.call(newData, key)) {
+          newData[key] = ''
+        }
+      }
+    },
     //新增表格
     tableAdd () {
       this.tableFlag = true
@@ -297,6 +352,13 @@ export default {
       this.tableFlag = true
       this.tableForm = row
     },
+    headerClick (column) {
+      const datas = this.tableData.filter(item => item.columnName == column.property)
+      this.tableName = column.property ? false : true
+      if (datas && datas.length) {
+        this.tableForm = datas[0]
+      }
+    },
     async restData () {
       if (this.form.auth_id) {
         const { code, returnData } = await initColumnSet({ auth_id: this.form.auth_id })
@@ -331,10 +393,15 @@ export default {
     bottom: 0;
     width: calc(100% - 376px);
     right: 0;
-    height: calc(100% - 440px);
+    height: calc(100% - 306px);
     &-content {
       margin-top: 20px;
       height: calc(100% - 48px);
+      ::v-deep .table {
+        // .el-table__body-wrapper {
+        //   display: none;
+        // }
+      }
     }
   }
   .contents {

src/views/systemSettings/views/newAuth/index.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="newAuth scroll-y pd24">
-    <div class="newAuth-head manageTitle">{{ title }}</div>
     <div class="newAuth-content flex-wrap">
       <div class="newAuth-content-left box-public-shadow-mini">
         <div class="newAuth-content-left-head flex">
@@ -13,18 +12,24 @@
         </div>
         <div class="newAuth-content-left-tree">
           <el-scrollbar ref="scroll" style="height: 100%">
-            <el-tree ref="tree" :data="treeData" :props="defaultProps" highlight-current :filter-node-method="filterNode" default-expand-all node-key="auth_id" @node-click="handleNodeClick" draggable :expand-on-click-node="false">
+            <el-tree ref="tree" :data="treeData" :props="defaultProps" highlight-current :filter-node-method="filterNode" node-key="auth_id" @node-click="handleNodeClick" :expand-on-click-node="false">
               <span class="custom-tree-node" slot-scope="{ node, data }">
                 <span class="customTxt">{{ node.label }}</span>
-                <span v-show="treeCheckId == data.auth_id" class="customBtn">
-                  <span v-if="data.auth_id != 0" @click.stop="handleRemove(node, data)" class="el-icon-error"></span>
-                </span>
+                <div>
+                  <template v-if="data.auth_type == 1 || data.auth_type == 2">
+                    <el-button @click.stop="handleUp(node,data)" type="text">上移</el-button>
+                    <el-button @click.stop="handleDown(node,data)" type="text">下移</el-button>
+                  </template>
+                  <span v-show="treeCheckId == data.auth_id" class="customBtn">
+                    <span v-if="data.auth_id != 0" @click.stop="handleRemove(node, data)">删除</span>
+                  </span>
+                </div>
               </span>
             </el-tree>
           </el-scrollbar>
         </div>
       </div>
-      <div :style="componentName == 'Table' ? 'height:50%':''" class="newAuth-content-right box-public-shadow-mini flex1">
+      <div :style="componentName == 'Table' ? 'height:290px':''" class="newAuth-content-right box-public-shadow-mini flex1">
         <div class="newAuth-content-right-head flex">
           <div class="title">权限信息维护</div>
           <el-button type="primary" @click="handleSave" size="small">保存</el-button>
@@ -74,6 +79,7 @@
 
 <script>
 import pb from '@/layout/mixin/getPublicData'
+import pf from '@/layout/mixin/publicFunc'
 import { setTree } from '@/utils/validate'
 import allIcons from '@/layout/mixin/publicIcons'
 import Dialog from "@/layout/components/Dialog/index.vue";
@@ -83,7 +89,7 @@ import Button from './components/button.vue'
 import Table from './components/table.vue'
 export default {
   name: 'NewAuth',
-  mixins: [pb],
+  mixins: [pb, pf],
   components: { Dialog, Menu, Catalogue, Button, Table },
   data () {
     return {
@@ -121,7 +127,8 @@ export default {
       dataType: 'add',
       authNum: null,
       authDataArr: [],
-      authTable: false
+      authTable: false,
+      treeDatas: []
     }
   },
   watch: {
@@ -151,8 +158,10 @@ export default {
     async setTreeData () {
       const result = await this.getQuery(this.queryId)
       const treeMenu = setTree(result, 'up_auth_id', 'auth_id')
+      const newTreeMenu = treeMenu.sort((a, b) => a.show_index - b.show_index)
+      this.treeDatas = _.cloneDeep(newTreeMenu)
       this.authDataArr = result.filter(item => item.auth_type != 3)
-      this.treeData[0].children = treeMenu
+      this.treeData[0].children = newTreeMenu
       this.$store.dispatch("auth/changeAuthArrs", result);
     },
     //新增
@@ -181,6 +190,50 @@ export default {
       this.rmFlag = true
       this.rmObj = data
     },
+    //树上移
+    async handleUp (node, data) {
+      const { auth_type, auth_id } = data
+      const mulu = this.treeDatas
+      const nums = []
+      const numsObj = { min: null, max: null }
+      if (auth_type == 1) {
+        if (mulu && mulu.length) {
+          mulu.forEach((item, index) => {
+            if (!item.show_index) {
+              item.show_index = index
+              nums.push(index)
+            } else {
+              nums.push(item.show_index)
+            }
+          })
+        }
+        numsObj.min = Math.min(...nums)
+        numsObj.max = Math.max(...nums)
+        const list = mulu.filter(item => item.auth_id == auth_id)
+        const listObj = list[0]
+        const listIndex = listObj.show_index
+        if (listIndex == numsObj.min) {
+          this.$message.error('当前已是最上级，无法移动')
+        } else {
+          const lastObj = mulu[listIndex - 1] //上一级数据
+          mulu[listIndex - 1] = listObj
+          mulu[listIndex - 1].show_index = listIndex - 1
+          mulu[listIndex] = lastObj
+          mulu[listIndex].show_index = listIndex
+          const code = await this.getChangeList(this.queryId, mulu, 2, 'auth_id')
+          if (code) {
+            this.$message.success('操作成功')
+            this.setTreeData()
+          } else {
+            this.$message.success('操作失败')
+          }
+        }
+      } else {
+        console.log(mulu)
+      }
+    },
+    //树下移
+    handleDown (node, data) { },
     //树删除-确定
     async tableRemove () {
       const code = await this.generalDataReception(this.queryId, this.rmObj, 3)
@@ -258,12 +311,12 @@ export default {
 <style lang="scss" scoped>
 .newAuth {
   &-content {
-    margin-top: 30px;
+    height: 100%;
     position: relative;
     &-left {
       width: 360px;
       margin-right: 16px;
-      height: calc(100vh - 190px);
+      height: 100%;
       &-head {
         line-height: 32px;
       }
@@ -281,10 +334,8 @@ export default {
           font-size: 14px;
           padding-right: 8px;
           .customBtn {
-            .el-icon-error {
-              font-size: 16px;
-              color: #dd3838;
-            }
+            color: #dd3838;
+            margin-left: 10px;
           }
         }
       }

src/views/systemSettings/views/newService/index.vue

@@ -66,61 +66,91 @@
             <el-button type="primary" @click="handleSave" :disabled="flag" class="bcButton" size="small">保存</el-button>
           </div>
           <div class="demo-form">
-            <el-form :inline="true" :model="formInline" class="flex">
-              <el-form-item label="服务名称">
-                <el-input style="width:550px" clearable v-model="formInline.serviceName" :disabled="activeIndex == null" size="small" placeholder="请输入服务名称"></el-input>
-              </el-form-item>
-              <el-form-item label="服务类型">
-                <el-select clearable v-model="formInline.serviceType" :disabled="activeIndex == null" size="small" placeholder="请选择服务类型">
-                  <el-option v-for="(item,index) in serviceType" :key="index" :label="item.label" :value="item.value"></el-option>
-                </el-select>
-              </el-form-item>
-              <el-form-item label="机器ID">
-                <el-select :disabled="activeIndex == null" clearable size="small" v-model="formInline.workId" placeholder="请选择机器ID">
-                  <el-option v-for="(item,index) in jqList" :key="index" :label="item.deployNodeName" :value="`${item.deployNodeID}`"></el-option>
-                </el-select>
-              </el-form-item>
+            <el-form :model="formInline" label-width="80px">
+              <el-row :gutter="20">
+                <el-col :span="12">
+                  <el-form-item label="服务名称">
+                    <el-input clearable v-model="formInline.serviceName" :disabled="activeIndex == null" size="small" placeholder="请输入服务名称"></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="服务类型">
+                    <el-select style="width:100%" clearable v-model="formInline.serviceType" :disabled="activeIndex == null" size="small" placeholder="请选择服务类型">
+                      <el-option v-for="(item,index) in serviceType" :key="index" :label="item.label" :value="item.value"></el-option>
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="机器ID">
+                    <el-select style="width:100%" :disabled="activeIndex == null" clearable size="small" v-model="formInline.workId" placeholder="请选择机器ID">
+                      <el-option v-for="(item,index) in jqList" :key="index" :label="item.deployNodeName" :value="`${item.deployNodeID}`"></el-option>
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+              </el-row>
             </el-form>
           </div>
           <div class="cj-form">
-            <el-form class="flex" style="flex-wrap: wrap;justify-content: flex-start;" :inline="true" :model="formInline">
-              <el-form-item label="采集类型">
-                <el-select clearable size="small" style="width: 175px;" v-model="formInline.taskType" placeholder="请选择采集类型">
-                  <el-option label="CRON表达式" :value="0"></el-option>
-                  <el-option label="轮询方式" :value="1"></el-option>
-                </el-select>
-              </el-form-item>
-              <el-form-item label="循环次数 " style="margin-left: 50px;">
-                <el-input clearable style="width:175px" v-model="formInline.loopCount" size="small" placeholder="循环次数"></el-input>
-              </el-form-item>
-              <template v-if="formInline.taskType == 1">
-                <el-form-item label="采集频率" style="margin-left: 50px;">
-                  <el-input clearable style="width:170px" v-model="formInline.frequencyCount" size="small" placeholder="请输入采集频率"></el-input>
-                </el-form-item>
-                <el-form-item label="频率单位" style="margin-left: 50px;">
-                  <el-select clearable size="small" style="width: 175px;" v-model="formInline.frequencyUnit" placeholder="请选择频率单位">
-                    <el-option label="毫秒" :value="1"></el-option>
-                    <el-option label="秒" :value="1000"></el-option>
-                    <el-option label="分钟" :value="60000"></el-option>
-                    <el-option label="小时" :value="3600000"></el-option>
-                  </el-select>
-                </el-form-item>
-              </template>
-              <template v-else-if="formInline.taskType == 0">
-                <el-form-item label="CRON表达式" style="margin-left: 50px;">
-                  <el-input clearable style="width:300px" v-model="formInline.cronExpress" size="small" placeholder="请输入CRON表达式"></el-input>
-                </el-form-item>
-              </template>
-              <el-form-item label="有效时间" prop="startTime" :style="formInline.taskType ? 'margin-left: 0px':'50px'">
-                <el-date-picker size="small" style="width: 175px;" v-model="formInline.taskValid" type="datetime" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm" placeholder="有效时间" />
-              </el-form-item>
-              <el-form-item label="失效时间" prop="stopTime" :style="formInline.taskType ? 'margin-left: 50px':'50px'">
-                <el-date-picker size="small" style="width: 175px;" v-model="formInline.taskInvalid" type="datetime" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm" placeholder="有效时间" />
-              </el-form-item>
+            <el-form :model="formInline" label-width="80px">
+              <el-row :gutter="20">
+                <el-col :span="6">
+                  <el-form-item label="采集类型">
+                    <el-select style="width:100%" size="small" :disabled="formInline.serviceType == 1 || activeIndex == null" v-model="formInline.taskType" placeholder="请选择采集类型">
+                      <el-option label="CRON表达式" :value="0"></el-option>
+                      <el-option label="轮询方式" :value="1"></el-option>
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="循环次数 ">
+                    <el-input style="width: 100%;" :disabled="checkStatus(formInline)" clearable v-model="formInline.loopCount" size="small" placeholder="循环次数"></el-input>
+                  </el-form-item>
+                </el-col>
+                <template v-if="formInline.taskType == 0">
+                  <el-col :span="6">
+                    <el-form-item label-width="100px" label="CRON表达式">
+                      <el-input :disabled="checkStatus(formInline)" clearable v-model="formInline.cronExpress" size="small" placeholder="请输入CRON表达式"></el-input>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item label="有效时间" prop="startTime">
+                      <el-date-picker :disabled="checkStatus(formInline)" style="width: 100%;" size="small" v-model="formInline.taskValid" type="datetime" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm" placeholder="有效时间" />
+                    </el-form-item>
+                  </el-col>
+                </template>
+                <template v-else>
+                  <el-col :span="6">
+                    <el-form-item label="采集频率">
+                      <el-input :disabled="checkStatus(formInline)" style="width: 100%;" clearable v-model="formInline.frequencyCount" size="small" placeholder="请输入采集频率"></el-input>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item label="频率单位">
+                      <el-select :disabled="checkStatus(formInline)" style="width: 100%;" clearable size="small" v-model="formInline.frequencyUnit" placeholder="请选择频率单位">
+                        <el-option label="毫秒" :value="1"></el-option>
+                        <el-option label="秒" :value="1000"></el-option>
+                        <el-option label="分钟" :value="60000"></el-option>
+                        <el-option label="小时" :value="3600000"></el-option>
+                      </el-select>
+                    </el-form-item>
+                  </el-col>
+                </template>
+              </el-row>
+              <el-row :gutter="20">
+                <el-col v-if="formInline.taskType == 1" :span="6"><el-form-item label="有效时间" prop="startTime">
+                    <el-date-picker :disabled="checkStatus(formInline)" style="width: 100%;" size="small" v-model="formInline.taskValid" type="datetime" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm" placeholder="有效时间" />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="失效时间" prop="stopTime">
+                    <el-date-picker :disabled="checkStatus(formInline)" style="width: 100%;" size="small" v-model="formInline.taskInvalid" type="datetime" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm" placeholder="有效时间" />
+                  </el-form-item>
+                </el-col>
+              </el-row>
             </el-form>
           </div>
         </div>
-        <div style="height: calc(100% - 215px);" class="newService-content-right-bottom">
+        <div style="height: calc(100% - 280px);" class="newService-content-right-bottom">
           <Table :dataId="dataId" :dataContent="msgContent" width="860px" tableHeight="calc(100% - 30px)" dataTitle="算法配置" />
         </div>
       </div>
@@ -180,6 +210,11 @@ export default {
   computed: {
     dataList () {
       return this.arrs.filter(data => !this.search || data.serviceName.toLowerCase().includes(this.search.toLowerCase()))
+    },
+    checkStatus () {
+      return function (formInline) {
+        return (formInline.serviceType && formInline.taskType) || (formInline.serviceType && formInline.taskType == 0) ? false : true
+      }
     }
   },
   created () {
@@ -408,6 +443,11 @@ export default {
         this.activeIndex = null
         this.flag = true
         this.dataObj = {}
+        for (const key in this.formInline) {
+          if (Object.hasOwnProperty.call(this.formInline, key)) {
+            this.formInline[key] = null
+          }
+        }
       }
     },
     //服务列表-增/删/改