diff --git a/src/views/components/BindingTagDlg.vue b/src/views/components/BindingTagDlg.vue
new file mode 100644
index 0000000..22d6999
--- /dev/null
+++ b/src/views/components/BindingTagDlg.vue
@@ -0,0 +1,141 @@
+<template>
+  <div>
+    <el-dialog class="bindingDialog" :title="bindingTitle" :visible.sync="bindingVisible" :close-on-click-modal="false" :before-close="handleClose">
+      <span class="dialog-right-top" />
+      <span class="dialog-left-bottom" />
+      <div class="setting-dialog">
+        <div class="binding-wrap">
+          <div v-if="isBinding" class="rebinding">
+            <span>TID</span>
+            <el-input v-model="tidCode" placeholder="请输入内容" />
+          </div>
+          <div v-else class="binding-flow">
+            <div class="step-item">
+              <!-- step-active 完成  step-loading 进行种 -->
+              <span class="step-left-num step-active">1</span>
+              <div class="step-right-cont">
+                <p class="step-title">第一步<span>连接读写器</span></p>
+                <p class="step-tip tip-active">连接成功</p>
+                <!-- err: 连接失败，请检查网络 -->
+                <!-- err: 当前电脑未绑定读写器，请到档案设备里进行绑定 -->
+              </div>
+            </div>
+            <div class="step-item">
+              <span class="step-left-num step-active step-loading">2</span>
+              <div class="pulse1" />
+              <div class="pulse2" />
+              <div class="pulse3" />
+              <div class="step-right-cont">
+                <p class="step-title">第二步<span>放入标签</span></p>
+                <p class="step-tip tip-error">请放入标签</p>
+                <!-- tip: 已放入标签 -->
+                <!-- err: 未读取到标签，请重新放入 -->
+              </div>
+            </div>
+            <div class="step-item">
+              <span class="step-left-num">3</span>
+              <div class="step-right-cont">
+                <p class="step-title">第三步<span>读取标签</span></p>
+                <p class="step-tip">放入标签后开始读取标签</p>
+                <!-- tip: 读取成功 -->
+                <!-- err: 当前标签存在多个，请取出多余的标签只保留一张！ -->
+              </div>
+            </div>
+            <div class="step-item">
+              <span class="step-left-num">4</span>
+              <div class="step-right-cont">
+                <p class="step-title">第四步<span>开始绑定</span></p>
+                <p class="step-tip">标签读取成功后，开始绑定档案</p>
+                <!-- tip: 绑定中 -->
+                <!-- err: 当前标签已被绑定，是否覆盖？  -->
+                <!-- 3s后 弹出覆盖绑定dialog -->
+                <!-- tip: 已覆盖 -->
+                <!-- err: 绑定失败，请拿走当前标签  -->
+              </div>
+            </div>
+            <div class="step-item">
+              <span class="step-left-num">5</span>
+              <div class="step-right-cont">
+                <p class="step-title">第五步<span>绑定成功</span></p>
+                <p class="step-tip">当前标签与档案绑定成功</p>
+                <!-- tip: 绑定成功 -->
+              </div>
+            </div>
+          </div>
+          <div v-if="isBinding" slot="footer" class="dialog-footer">
+            <el-button type="primary" @click="isBinding=false">下一步</el-button>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+
+    <!-- 是否覆盖 -->
+    <el-dialog title="覆盖绑定" :append-to-body="true" :visible.sync="coverBindingVisible" :before-close="handleClose">
+      <span class="dialog-right-top" />
+      <span class="dialog-left-bottom" />
+      <div class="setting-dialog">
+        <div class="dialog-delt">
+          <p><span>当前标签已被绑定，是否覆盖？</span></p>
+        </div>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="primary">确定覆盖</el-button>
+          <el-button type="text" @click="coverBindingVisible=false">取消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'BindingTagDlg',
+  components: {},
+  mixins: [],
+  props: {
+    isBinding: {
+      type: Boolean,
+      default: false
+    },
+    bindingId: {
+      type: String,
+      default: ''
+    },
+    bindingType: {
+      type: Number,
+      default: 1
+    }
+  },
+  data() {
+    return {
+      bindingVisible: false, // 绑定标签
+      bindingTitle: '绑定标签',
+      tidCode: null,
+      coverBindingVisible: false
+    }
+  },
+  mounted() {
+    // test
+    // setTimeout(() => {
+    //   this.coverBindingVisible = true
+    // }, 4000)
+  },
+  methods: {
+    // 右边初始化数据是空
+    // [CRUD.HOOK.beforeRefresh]() {
+    //   if (this.$refs.dictDetail) {
+    //     this.$refs.dictDetail.query.id = ''
+    //   }
+    //   return true
+    // },
+    // 关闭
+    handleClose(done) {
+      this.coverBindingVisible = false
+      done()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/styles/archives-manage.scss";
+</style>