diff --git a/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/UseCaseService.java b/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/UseCaseService.java
index 1135d0351b34b7223cc025b244dcf02b0e8c6c9e..af27b46adc9d4f432716c7571de7d4b463cc1c13 100644
--- a/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/UseCaseService.java
+++ b/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/UseCaseService.java
@@ -28,4 +28,6 @@ public interface UseCaseService extends BaseService<UseCaseVO> {
     UseCaseVO queryBySystemUuidAndKey(String systemUuid, String key);
 
     List<TextValue> loadSelector(String systemUuid);
+
+    List<TextValue> loadAllSelector();
 }
diff --git a/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/impl/UseCaseServiceImpl.java b/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/impl/UseCaseServiceImpl.java
index 5d8fdf610634e469718b648c7bb131c9b66caaf2..8f63099f5f5ebb84b7ed8cada817d6d152bec729 100644
--- a/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/impl/UseCaseServiceImpl.java
+++ b/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/impl/UseCaseServiceImpl.java
@@ -86,4 +86,21 @@ public class UseCaseServiceImpl implements UseCaseService {
         }
         return textValues;
     }
+
+    @Override
+    public List<TextValue> loadAllSelector() {
+        List<UseCaseVO> useCases = queryAll();
+        List<TextValue> textValues = Lists.newArrayList();
+        for (UseCaseVO useCaseVO : useCases) {
+            String label;
+            if (isDeleted(useCaseVO)) {
+                label = String.format(DELETED_FORMAT, useCaseVO.getUseCaseName());
+            } else {
+                label = String.format(NOT_DELETED_FORMAT, useCaseVO.getUseCaseName());
+            }
+            String value = useCaseVO.getUuid();
+            textValues.add(new TextValue(label, value));
+        }
+        return textValues;
+    }
 }
diff --git a/views/src/main/resources/vueboot/src/api/loadSelectorApi.js b/views/src/main/resources/vueboot/src/api/loadSelectorApi.js
index fe61dca461b6a23139df714848719bd80431b056..194cc8627bfb97a44b97047e84a6d8d908d2e699 100644
--- a/views/src/main/resources/vueboot/src/api/loadSelectorApi.js
+++ b/views/src/main/resources/vueboot/src/api/loadSelectorApi.js
@@ -68,6 +68,17 @@ export async function useCaseSelector(systemUuid) {
   return []
 }
 
+export async function allUseCaseSelector() {
+  let ret = await request({
+    url: '/bicAdmin/useCase/loadAllSelector',
+    method: 'get'
+  })
+  if (ret.ok) {
+    return ret.data.textValues;
+  }
+  return []
+}
+
 export async function nodeSelector(systemUuid) {
   let ret = await request({
     url: '/bicAdmin/node/loadSelector/' + systemUuid,
diff --git a/views/src/main/resources/vueboot/src/api/unitView.js b/views/src/main/resources/vueboot/src/api/unitView.js
index 05dcc5f2ea910f0f7e1bc2b43a3c93600e72b3a7..7441757dd6d3988681cc2bd75e928c1b504102f5 100644
--- a/views/src/main/resources/vueboot/src/api/unitView.js
+++ b/views/src/main/resources/vueboot/src/api/unitView.js
@@ -19,7 +19,7 @@ export async function unitViewSave(unitView) {
   })
 }
 
-export async function remoteValidateUnique(systemUuid, useCaseUuid) {
+export async function remoteValidateUnitViewUnique(systemUuid, useCaseUuid) {
   return await request({
     url: '/bicAdmin/unitView/validateUnique/' + systemUuid + '/' + useCaseUuid,
     method: 'get',
diff --git a/views/src/main/resources/vueboot/src/views/bic-config/bic-edit.vue b/views/src/main/resources/vueboot/src/views/bic-config/bic-edit.vue
index 05b205c501822a54f56a36f18a37eedb38530ed2..21e82ca130db26c6d5505a4c017f8598c5101cd1 100644
--- a/views/src/main/resources/vueboot/src/views/bic-config/bic-edit.vue
+++ b/views/src/main/resources/vueboot/src/views/bic-config/bic-edit.vue
@@ -1,30 +1,229 @@
 <template>
   <div class="app-container">
-    <aside>
-      <span class="red-text-css">组织模块</span> 配置简介：对纠察图的 <span class="red-text-css">整个图的渲染</span> 进行配置。
-      实际上关系的是业务节点之间的关联，对于关联关系，每个节点提供节点函数、每个边提供边函数的配置。上述的边配置和节点配置划分2类。
-      一类是边和节点的基本属性。另外一个是计算相关事件的属性，现在支持的属性有 <span class="blue-text-css">@click</span> 和 <span class="blue-text-css">@hover</span> 两类事件
-    </aside>
+    <el-card class="box-card">
+      <el-form :inline="true" :model="queryForm" class="demo-form-inline">
+        <el-form-item label="系统">
+          <el-select clearable
+                     filterable
+                     v-model="queryForm.systemUuid"
+                     @change="refreshUseCaseOptions"
+                     placeholder="请选择系统">
+            <el-option
+              v-for="item in systemOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="用例">
+          <el-select :disabled="queryForm.systemUuid === ''"
+                     clearable filterable v-model="queryForm.useCaseUuid" placeholder="请选择用例">
+            <el-option
+              v-for="item in useCaseOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="query">查询</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="warning" @click="addNew">新增</el-button>
+        </el-form-item>
+      </el-form>
+
+      <el-table
+        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
+        :data="pageResult.data"
+        border
+        :default-sort="{prop: 'updateTime', order: 'descending'}"
+        style="width: 100%; margin-top: 20px;font-size: 10px">
+        <el-table-column
+          align="center"
+          label="系统名称">
+          <template scope="scope">
+            {{ getSystemName(scope.row.systemUuid) }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          align="center"
+          label="用例名称">
+          <template scope="scope">
+            {{ getUseCaseName(scope.row.nodeUuid) }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          align="center"
+          prop="nodeVueName"
+          label="节点组件名称">
+        </el-table-column>
+        <el-table-column
+          align="center"
+          prop="nodeVueKey"
+          label="节点组件Key">
+        </el-table-column>
+        <el-table-column
+          align="center"
+          label="组件类型">
+          <template scope="scope">
+            {{ getNodeTypeName(scope.row.nodeVueType) }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          align="center"
+          label="是否有效">
+          <template slot-scope="scope">
+            <span v-if="scope.row.deleted">无效</span>
+            <span v-if="!scope.row.deleted">有效</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          sortable
+          align="center"
+          width="300"
+          label="创建/修改时间">
+          <template slot-scope="scope">
+            {{ baseDateFormat(scope.row.createTime) }} / {{ baseDateFormat(scope.row.updateTime) }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          fixed="right"
+          align="center"
+          width="100"
+          label="操作">
+          <template slot-scope="scope">
+            <el-button style="margin-left: 0px" type="text" size="mini" @click="toEdit(scope.row)">编辑</el-button>
+            <!--            <el-button style="margin-left: 0px;color: #189c1a" type="text" size="mini" @click="toDisableOrEnable(scope.row)">-->
+            <!--              <span v-if="!scope.row.deleted">禁用</span>-->
+            <!--              <span v-if="scope.row.deleted">启用</span>-->
+            <!--            </el-button>-->
+            <!-- TODO 暂时不支持删除 -->
+            <!--            <el-button style="margin-left: 0px;color: red" type="text" size="mini" @click="deleteOne(scope.row)">删除</el-button>-->
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-footer>
+        <vue-page :paginator="pageResult.paginator" :query="query"></vue-page>
+      </el-footer>
+    </el-card>
+
+    <bic-edit-form ref="bicEditForm"></bic-edit-form>
   </div>
 </template>
 
 <script>
+import vuePage from "@/views/common/vue-page.vue";
+import vueLog from "@/views/common/vue-log.vue";
+import bicEditForm from "@/views/bic-config/dialog/bic-edit-form.vue";
+import {allUseCaseSelector, systemSelector, useCaseSelector} from "@/api/loadSelectorApi";
+import {unitViewPageQuery} from "@/api/unitView";
+
 export default {
-  name: "module-relation",
+  name: "unit-view-config",
+  components: {
+    bicEditForm,
+    vuePage,
+    vueLog,
+  },
   data() {
-    return {}
+    return {
+      systemOptions: [],
+      useCaseOptions: [],
+      allUseCaseOptions: [],
+      queryForm: {
+        systemUuid: '',
+        useCaseUuid: '',
+      },
+      // 查询返回结果
+      pageResult: {
+        data: [],
+        paginator: {
+          currentPage: 0,
+          totalCount: 0,
+          pageSize: 10,
+          totalPage: 0
+        }
+      },
+      logTargetId: undefined,
+    }
   },
-  methods: {}
+  async created() {
+    let vm = this
+    vm.systemOptions = await systemSelector()
+    vm.allUseCaseOptions = await allUseCaseSelector()
+    await vm.query()
+  },
+  methods: {
+    async query() {
+
+      let vm = this
+      let ret = await unitViewPageQuery(vm.queryForm, vm.pageResult.paginator)
+      vm.$message({type: 'success', message: '查询成功'});
+      if (ret.ok) {
+        vm.pageResult = ret.data.queryPage
+      } else {
+        vm.$message({type: 'error', message: '查询失败：' + ret.message});
+      }
+    },
+    addNew() {
+      this.$refs.bicEditForm.load();
+    },
+    toEdit(row) {
+      this.$refs.bicEditForm.load(row);
+    },
+    toDisableOrEnable(row) {
+      let vm = this
+      let clone = vm.$cloneObj(row);
+      clone.deleted = !clone.deleted
+      vm.$confirm('是否确认修改为【' + (clone.deleted ? '无效' : '有效') + '】', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$refs.bicEditForm.doSave(clone);
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消修改'
+        });
+      });
+    },
+    getSystemName(systemUuid) {
+      let vm = this
+      for (let i = 0; i < vm.systemOptions.length; i++) {
+        let systemOption = vm.systemOptions[i];
+        if (systemOption.value === systemUuid) {
+          return systemOption.label
+        }
+      }
+      return systemUuid
+    },
+    getUseCaseName(useCaseUuid) {
+      let vm = this
+      for (let i = 0; i < vm.allUseCaseOptions.length; i++) {
+        let useCaseOption = vm.allUseCaseOptions[i];
+        if (useCaseOption.value === useCaseUuid) {
+          return useCaseOption.label
+        }
+      }
+      return useCaseUuid
+    },
+    async refreshUseCaseOptions() {
+      let vm = this
+      if (vm.queryForm.systemUuid === '') {
+        vm.useCaseOptions = []
+      } else {
+        vm.useCaseOptions = await useCaseSelector(vm.queryForm.systemUuid)
+      }
+    }
+  }
 }
 </script>
 
 <style scoped>
-.red-text-css {
-  color: red;
-  font-weight: bolder;
-}
-.blue-text-css {
-  color: #0bb7b3;
-  font-weight: bolder;
-}
+
 </style>
diff --git a/views/src/main/resources/vueboot/src/views/bic-config/dialog/bic-edit-form.vue b/views/src/main/resources/vueboot/src/views/bic-config/dialog/bic-edit-form.vue
new file mode 100644
index 0000000000000000000000000000000000000000..88692bdfa1d9d0f1f0e7b7d81a2cd6447fe726de
--- /dev/null
+++ b/views/src/main/resources/vueboot/src/views/bic-config/dialog/bic-edit-form.vue
@@ -0,0 +1,192 @@
+<style>
+
+</style>
+<template>
+  <el-dialog
+    title="用例配置"
+    :visible.sync="dialogVisible"
+    :close-on-press-escape="false"
+    :close-on-click-modal="false"
+    width="80%"
+    :before-close="clearForm">
+
+    <el-form
+      :label-position="labelPosition"
+      label-width="80px"
+      :model="saveData"
+      :rules="rules"
+      ref="ruleForm"
+    >
+      <el-form-item label="系统" prop="systemUuid">
+        <el-select filterable
+                   @change="refreshUseCaseOptions"
+                   :disabled="saveData.id && saveData.id !==''" v-model="saveData.systemUuid" placeholder="请选择系统">
+          <el-option
+            v-for="item in systemOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="用例">
+        <el-select :disabled="saveData.systemUuid === '' ||(saveData.id && saveData.id !=='')"
+                   @change="refreshUnitViewOptions"
+                   clearable filterable v-model="save.useCaseUuid" placeholder="请选择用例">
+          <el-option
+            v-for="item in useCaseOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+      </el-form-item>
+
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+    <el-button @click="clearForm">取 消</el-button>
+    <el-button type="primary" @click="save">确 定</el-button>
+  </span>
+  </el-dialog>
+</template>
+<script>
+
+import {remoteValidatesSystemKey, remoteValidateSystemName, systemSave} from "@/api/system";
+import {edgeStyleSelector, nodeDataModes, nodeSelector, nodeStyleSelector, nodeTypes, nodeVueSelector, systemSelector, useCaseSelector} from "@/api/loadSelectorApi";
+import {remoteValidatesUseCaseKey, remoteValidateUseCaseName, useCaseSave} from "@/api/useCase";
+import {remoteValidateUnique, remoteValidateUnitViewUnique} from "@/api/unitView";
+
+export default {
+  name: "useCaseForm",
+  filters: {},
+  components: {},
+  data() {
+    const validateName = async (rule, value, callback) => {
+      if (this.saveData.id) {
+        callback()
+      }
+      let systemUuid = this.saveData.systemUuid;
+      let useCaseUuid = this.saveData.useCaseUuid;
+
+      if (systemUuid === '') {
+        callback(new Error("请选择纠察图所属系统"))
+      }
+
+      if (useCaseUuid === '') {
+        callback(new Error("请选择纠察图所属用例"))
+      }
+
+      let ret = await remoteValidateUnitViewUnique(systemUuid, useCaseUuid);
+      if (ret.data.result) {
+        callback()
+      } else {
+        callback(new Error("当前系统当前用例已经存在纠察图"))
+      }
+    };
+
+    return {
+      labelPosition: 'right',
+      dialogVisible: false,
+      saveData: {
+        systemUuid: '',
+        useCaseUuid: '',
+        edges: [],
+        nodes: []
+      },
+      rules: {
+        systemUuid: [
+          {required: true, message: '此项必填', trigger: 'change'},
+          {validator: validateName, trigger: 'blur'}
+        ],
+        useCaseUuid: [
+          {required: true, message: '此项必填', trigger: 'change'}
+          {validator: validateName, trigger: 'blur'}
+        ],
+      },
+      systemOptions: [],
+      useCaseOptions: [],
+      nodeOptions: [],
+      nodeVueOptions: [],
+      nodeStyleOptions: [],
+      edgeStyleOptions: [],
+      nodeDataModeOptions: [],
+      nodeTypesOptions: [],
+    }
+  },
+  async created() {
+    this.systemOptions = await systemSelector();
+    this.nodeDataModeOptions = await nodeDataModes();
+    this.nodeTypesOptions = await nodeTypes();
+  },
+  mounted() {
+  },
+  methods: {
+    load(data) {
+      let vm = this
+      if (data) {
+        vm.saveData = vm.$cloneObj(data)
+      }
+      vm.dialogVisible = true
+    },
+    save() {
+      let vm = this
+      this.$refs['ruleForm'].validate(async (valid) => {
+        if (valid) {
+          await vm.doSave(this.saveData)
+        }
+      })
+    },
+    async doSave(saveData) {
+      let vm = this
+      let ret = await useCaseSave(saveData);
+      if (ret.ok) {
+        vm.$message({type: 'success', message: '保存成功'});
+      } else {
+        vm.$message({type: 'error', message: '保存失败：' + ret.message});
+      }
+      vm.clearForm()
+      vm.$parent.query()
+    },
+    clearForm() {
+      let vm = this
+      try {
+        vm.saveData = {
+          systemUuid: '',
+          useCaseUuid: '',
+          edges: [],
+          nodes: []
+        }
+        vm.$refs['ruleForm'].resetFields()
+      } catch (e) {
+        console.log(e)
+      }
+      vm.dialogVisible = false
+    },
+    async refreshUseCaseOptions() {
+      let vm = this
+      if (vm.saveData.systemUuid === '') {
+        vm.useCaseOptions = []
+        vm.nodeOptions = []
+        vm.nodeStyleOptions = []
+        vm.edgeStyleOptions = []
+        vm.saveData.useCaseUuid = ''
+        vm.saveData.nodes = []
+        vm.saveData.edges = []
+      } else {
+        vm.useCaseOptions = await useCaseSelector(vm.saveData.systemUuid)
+        vm.nodeOptions = await nodeSelector(vm.saveData.systemUuid)
+        vm.nodeVueOptions = await nodeVueSelector(vm.saveData.systemUuid)
+        vm.nodeStyleOptions = await nodeStyleSelector(vm.saveData.systemUuid)
+        vm.edgeStyleOptions = await edgeStyleSelector(vm.saveData.systemUuid)
+      }
+    },
+    refreshUnitViewOptions() {
+      let vm = this
+      if (vm.saveData.useCaseUuid === '') {
+        vm.saveData.nodes = []
+        vm.saveData.edges = []
+      }
+    }
+  }
+}
+</script>
diff --git a/views/src/main/resources/vueboot/src/views/bic-config/dialog/node-vue-form.vue b/views/src/main/resources/vueboot/src/views/bic-config/dialog/node-vue-form.vue
index a1e495a9279ddd141a84397cfefda479c8d18a68..19cd6b184888884a89e2c3e0d6b2f163728856a9 100644
--- a/views/src/main/resources/vueboot/src/views/bic-config/dialog/node-vue-form.vue
+++ b/views/src/main/resources/vueboot/src/views/bic-config/dialog/node-vue-form.vue
@@ -239,6 +239,7 @@ export default {
       let vm = this
       if (vm.saveData.systemUuid === '') {
         vm.nodeOptions = []
+        vm.saveData.nodeUuid = ''
       } else {
         vm.nodeOptions = await nodeSelector(vm.saveData.systemUuid)
       }
diff --git a/web/src/main/java/cn/icanci/loopstack/bic/web/controller/UseCaseController.java b/web/src/main/java/cn/icanci/loopstack/bic/web/controller/UseCaseController.java
index 48730e37a4986d281e9b4a78e50cc4fc7375c761..4d5295696dc0a7988c0189c5852b5f845c9991af 100644
--- a/web/src/main/java/cn/icanci/loopstack/bic/web/controller/UseCaseController.java
+++ b/web/src/main/java/cn/icanci/loopstack/bic/web/controller/UseCaseController.java
@@ -59,4 +59,10 @@ public class UseCaseController {
         List<TextValue> textValues = useCaseService.loadSelector(systemUuid);
         return R.builderOk().data("textValues", textValues).build();
     }
+
+    @GetMapping("loadAllSelector")
+    public R loadAllSelector() {
+        List<TextValue> textValues = useCaseService.loadAllSelector();
+        return R.builderOk().data("textValues", textValues).build();
+    }
 }