'保安项目提交'

src/views/backOfficeSystem/AlarmLinkage/TemporaryDuty/components/detailForm.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="dialog" v-if="dialogForm">
+    <div class="head_box">
+      <span class="title">临时任务统计详情</span>
+      <div>
+        <el-button size="small" @click="close">关闭</el-button>
+      </div>
+    </div>
+    <div class="cntinfo">
+      <el-form :model="listQuery" label-position="right">
+        <el-form-item label="任务名称">
+          <el-input v-model="listQuery.rwmc" placeholder="请输入任务名称" />
+        </el-form-item>
+        <el-form-item label="所属辖区">
+          <el-input v-model="listQuery.ssbm" placeholder="请输入所属辖区" />
+        </el-form-item>
+        <el-form-item label="任务地点">
+          <el-input v-model="listQuery.rwdz" placeholder="请输入任务地点" />
+        </el-form-item>
+        <el-form-item label="任务时间">
+          <el-input v-model="listQuery.rwsj" placeholder="请输入任务时间" />
+        </el-form-item>
+        <el-form-item label="任务类型">
+          <el-select :disabled="true" v-model="listQuery.rwlx" placeholder="请选择任务类型">
+            <el-option v-for="item in dic.D_BZ_JBLDRWLX" :key="item" :label="item.zdmc" :value="item.dm"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="任务状态">
+          <el-select :disabled="true" v-model="listQuery.rwzt" placeholder="请选择任务状态">
+            <el-option v-for="item in dic.JBLDRWZT" :key="item" :label="item.zdmc" :value="item.dm"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="任务描述" style="width:100%">
+          <el-input type="textarea" style="width:100%" v-model="listQuery.rwms" placeholder="请输入任务描述" :rows="4" />
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
+import { ref, reactive } from 'vue';
+const props = defineProps({
+  dic: {
+    type: Object,
+    default: {}
+  }
+})
+const dialogForm = ref(false);
+const listQuery = ref({});
+
+// 初始化数据
+const init = (row) => {
+  dialogForm.value = true;
+  // 根据type和row初始化表单数据
+  qcckGet({ id: row.id }, "/mosty-jbld/rw/selectByid").then(res => {
+    listQuery.value = res;
+  })
+};
+
+
+const close = () => {
+  dialogForm.value = false;
+  FormRef.value.reset()
+};;
+
+defineExpose({ init })
+</script>
+
+<style lang="scss" scoped>
+.dialog {
+  padding: 20px;
+  .head_box {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+  }
+  .cntinfo {
+    height: calc(100% - 70px);
+    overflow: hidden;
+    overflow-y: auto;
+  }
+  ::v-deep .el-form{
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0 12rem;
+    .el-form-item--default{
+      width: 23%;
+      margin-right: 20px;
+    }
+  }
+}
+</style>