lcw

src/views/backOfficeSystem/HumanIntelligence/components/checkProcess.vue

@@ -0,0 +1,158 @@
+<!--文件导出  -->
+<template>
+  <el-dialog v-model="modelValue" :title="title" :width="width" @close="close" append-to-body>
+    <div style="height: 50vh; overflow: auto;">
+      <el-timeline style="max-width: 600px">
+        <el-timeline-item :timestamp="item.czsj" placement="top" v-for="(item,index) in lcList" :key="index">
+          <el-card class="process-card">
+            <div class="process-info">
+              <div class="info-label">处置人：</div>
+              <div class="info-value">{{item.czrxm || '未记录'}}</div>
+            </div>
+            <div class="process-info">
+              <div class="info-label">处置结果：</div>
+              <div class="info-value">
+                    <DictTag :tag="false" :value="item.czzt" :options="dict.D_BZ_QBCZZT" />
+              </div>
+            </div>
+          </el-card>
+        </el-timeline-item>
+      </el-timeline>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="close">取消</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+<script setup>
+
+import { onMounted, reactive, watch, ref } from 'vue'
+import {qbcjSelectCzlcList } from "@/api/Intelligence.js";
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  width: {
+    type: String,
+    default: '50%'
+  }, tableColumn: {
+    type: Array,
+    default: () => []
+  }, dict: {
+    type: Object,
+    default: () => ({})
+  },
+  dataList: {
+    type: Object,
+    default: () => ({})
+  },
+  title: {
+    type: String,
+    default: '操作流程'
+  }
+})
+onMounted(() => {
+})
+
+
+const dxRadio = ref()
+const emit = defineEmits(['update:modelValue', 'getList'])
+// 当对话框显示时处理表格列配置
+watch(() => props.modelValue, (newVal) => {
+  if (newVal) {
+    getqbcjPldb()
+  }
+
+})
+
+
+const close = () => {
+  emit('update:modelValue', false)
+}
+const lcList=ref([])
+const getqbcjPldb = () => {
+  qbcjSelectCzlcList({ qbid: props.dataList.id }).then(res => {
+lcList.value=res||[]
+
+  })
+    .catch(() => {
+
+    })
+}
+</script>
+
+<style scoped>
+/* 时间线样式优化 */
+.el-timeline {
+  margin-top: 20px;
+}
+
+/* 处置流程卡片样式 */
+.process-card {
+  border: none;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
+  transition: all 0.3s ease;
+  margin-bottom: 16px;
+  border-left: 3px solid #409EFF;
+}
+
+.process-card:hover {
+  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.12);
+  transform: translateY(-2px);
+}
+
+/* 卡片内部信息样式 */
+.process-info {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 12px;
+  flex-wrap: wrap;
+}
+
+.process-info:last-child {
+  margin-bottom: 0;
+}
+
+.info-label {
+  font-size: 14px;
+  font-weight: 600;
+  color: #409EFF;
+  margin-right: 8px;
+  min-width: 65px;
+}
+
+.info-value {
+  font-size: 14px;
+  color: #606266;
+  line-height: 1.6;
+  flex: 1;
+  word-break: break-word;
+}
+
+/* 时间戳样式 */
+.el-timeline-item__timestamp {
+  font-size: 13px;
+  color: #909399;
+  margin-bottom: 8px;
+}
+
+/* 时间线节点样式 */
+.el-timeline-item__node {
+  background-color: #409EFF;
+}
+
+/* 响应式设计 */
+@media screen and (max-width: 768px) {
+  .process-info {
+    flex-direction: column;
+  }
+
+  .info-label {
+    margin-bottom: 4px;
+  }
+}
+</style>