工单作业、工单查询、报工查询

src/components/dialog.vue

@@ -0,0 +1,111 @@
+<template>
+  <div>
+    <div v-if="active" class="dialog_wrapper">
+      <div class="dialog">
+        <div class="dialog_header">
+          <span class="dialog_title">{{title}}</span>
+          <button class="dialog_headerbtn" @click="toCancle">
+            <i class="iconfont close_icon"></i>
+          </button>
+        </div>
+        <div class="dialog_body">
+          <slot></slot>
+        </div>
+        <div class="dialog_footer">
+          <button class="button button--primary" @click="toCancle">取消</button>
+          <button class="button button--primary" :class="{'button--info': unclick === true}" :disabled="disabled" @click="toSure">确定</button>
+        </div>
+      </div>
+    </div>
+    <div v-if="active" class="modal"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'jxDialog',
+  props: {
+    title: String,
+    type: String,
+    unclick: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      active: false,
+      disabled: false
+    }
+  },
+  methods: {
+    toCancle () {
+      this.active = false
+      this.$emit('toCancle', this.type)
+    },
+    toSure () {
+      this.$emit('toSure', this.type)
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.modal
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  opacity: .5;
+  background: #000;
+  z-index: 101;
+.dialog_wrapper
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: auto;
+  z-index: 102;
+.dialog
+  position: relative;
+  margin: 0 auto 50px;
+  background: #fff;
+  border-radius: 16px;
+  box-shadow: 0 1px 3px rgba(0,0,0,.3);
+  box-sizing: border-box;
+  width: 65%;
+  margin-top: 15vh;
+.dialog_header
+  padding: 20px 20px 10px;
+.dialog_title
+  line-height: 24px;
+  font-size: 18px;
+  color: #303133;
+.dialog_headerbtn
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  font-size: 16px;
+.close_icon
+  width 24px
+  height 24px
+  font-size 15px
+  line-height 24px
+  top 0
+.dialog_body
+  padding: 30px 20px;
+  color: #606266;
+  font-size: 14px;
+  word-break: break-all;
+.dialog_footer
+  padding: 10px 20px 20px;
+  text-align: center;
+  box-sizing: border-box;
+</style>