'保安项目提交'

src/views/backOfficeSystem/SealIndustry/VehicleExchange/components/detailForm.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="dialog" v-if="dialogForm">
+    <div class="head_box">
+      <span class="title">承接车辆交换信息{{ title }}</span>
+      <div>
+        <el-button size="small" @click="close">关闭</el-button>
+      </div>
+    </div>
+    <div class="cntinfo">
+      <el-form :model="listQuery" :label-width="230" label-position="left">
+        <div class="form-row">
+          <el-form-item label="业务流水号码">
+            <el-input v-model="listQuery.lshm" placeholder="请输入业务流水号"/>
+          </el-form-item>
+          <el-form-item label="承接车辆代码">
+            <el-input v-model="listQuery.sydw" placeholder="请输入承接车辆代码"/>
+          </el-form-item>
+        </div>
+
+        <div class="form-row">
+          <el-form-item label="送车人">
+            <el-input v-model="listQuery.scr" placeholder="请输入送车人"/>
+          </el-form-item>
+          <el-form-item label="姓名">
+            <el-input v-model="listQuery.xm" placeholder="请输入姓名"/>
+          </el-form-item>
+        </div>
+
+        <div class="form-row">
+          <el-form-item label="联系电话">
+            <el-input v-model="listQuery.lxdh" placeholder="请输入联系电话"/>
+          </el-form-item>
+          <el-form-item label="身份证号">
+            <el-input v-model="listQuery.sfzh" placeholder="请输入身份证号"/>
+          </el-form-item>
+        </div>
+
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const dialogForm = ref(false);
+const listQuery = ref({});
+const title = ref('');
+// 初始化数据
+const init = (type, row) => {
+  dialogForm.value = true;
+  if (row) {
+    title.value = type === 'edit' ? '编辑' : '详情';
+    listQuery.value = { ...row };
+  } else {
+    title.value = '新增';
+    listQuery.value = {};
+  }
+};
+
+const close = () => {
+  dialogForm.value = false;
+  listQuery.value = {};
+};
+
+defineExpose({init});
+</script>
+
+<style lang="scss" scoped>
+.dialog {
+  padding: 20px;
+
+  :deep(.el-form-item__label) {
+    background-color: #F7FAFB;
+    padding: 0px 8px;
+    color: #000;
+    font-weight: 500;
+    border: 1px solid #E3E7ED;
+  }
+
+  .head_box {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+  }
+  .cntinfo{
+    height: calc(100% - 70px);
+    overflow: hidden;
+    overflow-y: auto;
+  }
+
+  .form-row {
+    display: flex;
+    
+    .el-form-item {
+      flex: 1;
+    }
+    .image-group {
+      display: flex;
+      gap: 10px;
+      flex-wrap: wrap;
+    
+      .image-item {
+        width: 150px;
+        height: 150px;
+        border: 1px solid #dcdfe6;
+        
+        .el-image {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+
+   ::v-deep .el-input__inner{
+    height: 36px !important;
+    line-height: 36px !important;
+    border-radius: 0;
+    color: #777575;
+  }
+}
+.el-form-item--default{
+  margin-bottom: 0px;
+}
+</style>