diff --git a/src/pages/node/node-layout/package/package-list.vue b/src/pages/node/node-layout/package/package-list.vue
index 95f85f9f2e030c04e1da3868cd38f4df516e8f5d..0030ec17cf7dce59109772b74324d8998821d510 100644
--- a/src/pages/node/node-layout/package/package-list.vue
+++ b/src/pages/node/node-layout/package/package-list.vue
@@ -275,6 +275,51 @@ export default {
         }
       }
     },
+    batchDelete() {
+      this.$confirm({
+        title: '提示',
+        content: '确定卸载所选中的软件包吗?',
+        onOk: () => {
+          let list = []
+          let message = ''
+          list = this.selectedPackageList.map((item, index) => {
+            if (item.status !== 'ii' || item.classification === 'important' || item.classification === 'necessary') {
+              message = item.name + ':该软件包不可卸载'
+            }
+            const tem = {
+              nodeId: this.node.id,
+              taskAction: 'uninstall',
+              taskTarget: item.name
+            }
+            return tem
+          })
+          if (message !== '') {
+            this.$notification.error({ message })
+            return
+          }
+          const param = {
+            nodeId: this.node.id,
+            taskList: list
+          }
+          addPackageTask(param).then(res => {
+            if (res.code === 200) {
+              this.$notification.success({
+                message: '添加软件包卸载任务成功'
+              })
+              this.getTaskList()
+              this.rowKeys = []
+              this.selectedPackageList = []
+            } else {
+              this.$notification.warning({
+                message: '添加软件包卸载任务失败' + res.msg
+              })
+            }
+          })
+        },
+        onCancel: function() {
+        }
+      })
+    },
     showTaskList() {
       this.packageTaskListVisible = true
     },
diff --git a/src/pages/node/node-layout/package/package_batch_install.vue b/src/pages/node/node-layout/package/package_batch_install.vue
index f32c9cf0c9f885a0b37c09cc8bc5732d5bea2272..b5e173813ecd909b12ac24fadeba99ed0a303342 100644
--- a/src/pages/node/node-layout/package/package_batch_install.vue
+++ b/src/pages/node/node-layout/package/package_batch_install.vue
@@ -1,58 +1,309 @@
 <template>
-  <div ref="package" class="package">
-    <div ref="filter" class="filter">
-      <a-input-search
-        v-model="keyWord"
-        class="width-150 mr-10"
-        allow-clear
-        placeholder="请输入软件包名"
-        @search="filterData"
-        @pressEnter="filterData"
-      />
-      软件包类型：
-      <a-select v-model="classification" class="width-100 mr-10" @change="classificationChange">
-        <a-select-option v-for="item in classificationList" :key="item.value">
-          {{ item.label }}
-        </a-select-option>
-      </a-select>
-      <a-popover placement="bottom" :overlay-style="{width:'720px'}">
-        <template slot="content">
-          期望状态：未知(u)/安装(i)/删除(r)/清除(p)/保持(h)<br>
-          状态：未安装(n)/已安装(i)/仅存配置(c)/仅解压缩(U)/配置失败(F)/不完全安装(H)/触发器等待(W)/触发器未决(T)<br>
-          示例：ii表示软件包期望状态为安装并且安装成功
-        </template>
-        <a-icon type="exclamation-circle" class="warning help-icon" />
-        软件包状态：
-      </a-popover>
-      <a-select v-model="onlyInstalled" class="width-100 mr-10" @change="loadData">
-        <a-select-option v-for="item in packageStatus" :key="item.value">
-          {{ item.label }}
-        </a-select-option>
-      </a-select>
-      <a-button type="primary" icon="tool" @click="batchInstall">软件包安装</a-button>
-      <a-badge :count="upgradeNum" :title="'可升级软件数'+upgradeNum">
-        <a-button class="task-list-btn" type="primary" icon="rise" @click="updatePackageVisible = true">软件包升级</a-button>
-      </a-badge>
-      <a-button class="ml-15" type="danger" :disabled="BtnIsDisabled" icon="delete" @click="batchDelete">批量卸载</a-button>
-      <a-badge :count="taskNumNot"><a-button class="task-list-btn" type="primary" icon="file-text" @click="showTaskList">任务列表</a-button></a-badge>
-      <lock-status class="ml-15" :node-id="node.id" />
-      <a-button type="primary" icon="sync" @click="freshenList">刷新</a-button>
-    </div>
+  <div>
+    <a-alert banner>
+      <span slot="message">
+        可能会出现安装软件包检索不到或查找到的软件包安装不成功的情况，建议
+        <a-icon v-show="refreshLoading" type="loading" />
+        <a href="#" style="text-decoration: underline;" :disabled="refreshLoading" @click="getInstallablePackage">更新安装软件包检索库</a>
+      </span>
+    </a-alert>
+    <a-form-model ref="packageForm" :model="packageInfo" :rules="rules">
+      <!-- 搜索头 -->
+      <a-form-model-item label="软件包名" prop="taskTarget" :label-col="{span:3}" :wrapper-col="{span:21}">
+        <a-input-search
+          v-model="packageInfo.taskTarget"
+          style="width:calc(100% - 75px);margin-right:10px;"
+          allow-clear
+          @change="handleChange"
+          @search="handleSearch"
+        >
+          <a-select slot="addonAfter" v-model="packageInfo.searchType" class="width-100" @change="handleChange">
+            <a-select-option value="0">模糊匹配</a-select-option>
+            <a-select-option value="1">单词匹配</a-select-option>
+            <a-select-option value="2">精准匹配</a-select-option>
+          </a-select>
+        </a-input-search>
+        <a-button :disabled="isAbleAdd" type="primary" @click="addPackage">添加</a-button>
+        <installable-package-list
+          v-if="isShowInstallableList"
+          :inputvalue="packageInfo.taskTarget"
+          :list="installableList"
+          :node-id="nodeId"
+          @handleInputValue="handleClick"
+        />
+      </a-form-model-item>
+      <a-form-model-item>
+        <a-divider>
+          待安装软件包列表
+          <a-tooltip :overlay-style="{'max-width':'400px'}" title="拖拽软件包可确定安装优先级,此操作可能会影响安装速度！">
+            <a-icon type="exclamation-circle" class="warning help-icon" />
+          </a-tooltip>
+        </a-divider>
+        <a-table
+          :columns="columns"
+          class="drag"
+          :data-source="packageList"
+          bordered
+          :row-key="record=>record.taskTarget"
+          style="height:325px;"
+          :pagination="false"
+          :scroll="{ y: 270 }"
+        >
+          <a-tooltip slot="taskTarget" slot-scope="text" placement="topLeft" :title="text">
+            <span>{{ text }}</span>
+          </a-tooltip>
+          <a-tooltip slot="version" slot-scope="text" placement="topLeft" :title="text">
+            <span>{{ text }}</span>
+          </a-tooltip>
+          <a-tooltip slot="dependency" slot-scope="text" placement="topLeft" :overlay-style="{'max-width':'500px'}">
+            <template slot="title"><span v-html="text" /></template>
+            <a-icon v-if="!text" type="loading" />
+            <span v-else>{{ text }}</span>
+          </a-tooltip>
+          <template slot="operation" slot-scope="record">
+            <a-tooltip title="移除">
+              <a-button type="link" @click="deletePackage(record)"><a-icon type="delete" class="danger" /></a-button>
+            </a-tooltip>
+          </template>
+        </a-table>
+      </a-form-model-item>
+    </a-form-model>
   </div>
 </template>
 
-
-<style scoped lang="scss">
-.package{
-  height: 100%;
-}
-.filter {
-  margin-bottom: 15px;
+<script>
+import Sortable from 'sortablejs'
+import { addPackageTask, getInstallablePackageByKeyword, queryDependency, getInstallablePackage } from '@/api/node_package'
+import InstallablePackageList from './Installable_package_list.vue'
+export default {
+  components: {
+    InstallablePackageList
+  },
+  props: {
+    nodeId: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      refreshLoading: false,
+      packageInfo: {
+        taskTarget: '',
+        searchType: '0'
+      },
+      rules: {
+        taskTarget: [
+          { required: true, message: '请输入软件包包名', trigger: 'change' }
+        ]
+      },
+      columns: [
+        {
+          title: '软件包名',
+          key: 'taskTarget',
+          dataIndex: 'taskTarget',
+          scopedSlots: { customRender: 'taskTarget' },
+          ellipsis: true
+        },
+        {
+          title: '版本',
+          key: 'version',
+          dataIndex: 'version',
+          scopedSlots: { customRender: 'version' },
+          ellipsis: true
+        },
+        {
+          title: '架构',
+          key: 'Architecture',
+          dataIndex: 'Architecture',
+          width: 100
+        },
+        {
+          title: '安装优先级',
+          key: 'taskPriority',
+          customRender: (text, record, index) => `${index + 1}`,
+          width: 110
+        },
+        {
+          title: '关联软件包',
+          key: 'dependency',
+          dataIndex: 'dependency',
+          scopedSlots: { customRender: 'dependency' },
+          ellipsis: true
+        },
+        {
+          title: '操作',
+          scopedSlots: { customRender: 'operation' },
+          align: 'center',
+          width: 80
+        }
+      ],
+      packageList: [],
+      installableList: [],
+      selectPackages: [],
+      isShowInstallableList: false,
+      isAbleAdd: true
+    }
+  },
+  mounted() {
+    this.drag()
+  },
+  methods: {
+    deletePackage(record) {
+      this.packageList = this.packageList.filter(item => {
+        return item.taskTarget !== record.taskTarget
+      })
+    },
+    addPackage() {
+      this.isAbleAdd = true
+      this.$refs.packageForm.validate(valid => {
+        if (!valid) {
+          return
+        }
+        const flag = this.packageList.some(item => {
+          return item.taskTarget === this.packageInfo.taskTarget
+        })
+        if (flag) {
+          this.$notification.warning({
+            message: '软件包已存在'
+          })
+          return
+        }
+        const packageInfo = {
+          taskAction: 'install',
+          taskGroupId: 1,
+          nodeId: this.nodeId,
+          ...this.packageInfo,
+          version: this.selectPackages[0].Version,
+          Architecture: this.selectPackages[0].Architecture
+        }
+        queryDependency({ packageName: packageInfo.taskTarget, nodeId: this.nodeId }).then(res => {
+          if (res.code === 200) {
+            if (res.data) {
+              let result = ''
+              const dependency = res.data[packageInfo.taskTarget]
+              for (let dep of dependency) {
+                for (let key in dep) {
+                  const value = dep[key]
+                  if (typeof value === 'object') {
+                    for (let key1 in value) {
+                      for (let item of value[key1]) {
+                        result += key.replace('|', '') + '：' + this.replacelgt(item) + '<br/>'
+                      }
+                    }
+                  } else {
+                    result += key.replace('|', '') + '：' + this.replacelgt(value) + '<br/>'
+                  }
+                }
+              }
+              this.$set(packageInfo, 'dependency', result)
+            } else {
+              this.$set(packageInfo, 'dependency', '无')
+            }
+          } else {
+            this.$set(packageInfo, 'dependency', '无')
+            this.$notification.error({ message: res.msg })
+          }
+        }).catch(error => {
+          this.$set(packageInfo, 'dependency', '无')
+          this.$notification.error({ message: error })
+        })
+        this.packageList.push(packageInfo)
+        this.$refs.packageForm.resetFields()
+      })
+    },
+    replacelgt(data) {
+      return data.replace('<', '&lt').replace('>', '&gt')
+    },
+    handleInstall() {
+      if (this.packageList.length === 0) {
+        this.$notification.warning({
+          message: '请添加待安装的软件包'
+        })
+        return new Promise((resolve, reject) => reject())
+      }
+      return new Promise((resolve, reject) => {
+        this.packageList = this.packageList.map((item, index) => {
+          item.taskPriority = index + 1
+          item.taskTarget = item.taskTarget + '=' + item.version
+          return item
+        })
+        let params = {
+          nodeId: this.nodeId,
+          taskList: this.packageList
+        }
+        addPackageTask(params).then(res => {
+          resolve(res)
+        }).catch((err) => {
+          reject(err)
+        })
+      })
+    },
+    drag() {
+      const el = document.querySelectorAll('.drag  tbody')[0]
+      Sortable.create(el, {
+        disabled: false,
+        sort: true,
+        onEnd: (e) => {
+          this.packageList.splice(e.newIndex, 0, this.packageList.splice(e.oldIndex, 1)[0])
+          let newArr = this.packageList.slice(0)
+          this.packageList = []
+          this.$nextTick(() => {
+            this.packageList = newArr
+          })
+        }
+      })
+    },
+    handleClick(packageName) {
+      this.selectPackages = []
+      this.packageInfo.taskTarget = packageName
+      this.isShowInstallableList = false
+      this.isAbleAdd = false
+      this.installableList.forEach(item => {
+        if (item.Package === packageName) {
+          this.selectPackages.push(item)
+        }
+      })
+    },
+    handleSearch() {
+      if (this.packageInfo.taskTarget === '') {
+        this.isShowInstallableList = false
+        this.installableList = []
+        this.selectPackages = []
+        return
+      }
+      const params = {
+        nodeId: this.nodeId,
+        search: this.packageInfo.taskTarget,
+        searchType: this.packageInfo.searchType
+      }
+      getInstallablePackageByKeyword(params).then(res => {
+        this.installableList = res.data
+        this.isShowInstallableList = true
+      })
+    },
+    handleChange() {
+      this.isAbleAdd = true
+      this.handleSearch()
+    },
+    getInstallablePackage(e) {
+      e.preventDefault()
+      this.refreshLoading = true
+      getInstallablePackage({ nodeId: this.nodeId }).then(res => {
+        if (res.code === 200) {
+          this.$notification.success({ message: '更新软件包检索库成功' })
+        }
+      }).finally(() => {
+        this.refreshLoading = false
+      })
+    }
+  }
 }
-.ant-btn {
-  margin-right: 10px;
-}
-.ant-btn.task-list-btn{
-  margin-right: 0;
+</script>
+
+<style scoped>
+.text{
+  font-size: 12px;
+  font-weight: 500;
 }
-</style>
\ No newline at end of file
+</style>