sgxt_web/src/views/backOfficeSystem/HumanIntelligence/components/pursueContent.vue

<!--文件导出  -->
<template>
  <el-dialog v-model="modelValue" :title="title" :width="width" @close="close" append-to-body>
    <div style="height: 50vh; overflow: auto;">
      <FormMessage v-model="listQuery" :formList="formData" ref="elform" :rules="rules">

      </FormMessage>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="submit">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>

import { onMounted, reactive, watch, ref } from 'vue'
import FormMessage from "@/components/aboutTable/FormMessage.vue";
import { ElMessage } from 'element-plus'
import { qbcjCzzt, qbcjCzztEdit } from "@/api/qbcj.js"
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  width: {
    type: String,
    default: '50%'
  }, tableColumn: {
    type: Array,
    default: () => []
  }, dict: {
    type: Object,
    default: () => ({})
  },
  dataList: {
    type: Array,
    default: () => ([])
  },
  title: {
    type: String,
    default: '信息追加'
  }, updeteBool: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:modelValue', 'getqbcjCzztList'])
const listQuery = ref({})
watch(() => props.modelValue, (newVal) => {
  if (newVal) {
    if (props.updeteBool) {
      listQuery.value = { ...props.dataList }
    } else {
      listQuery.value.ysnr = props.dataList.qbnr
    }

  }
})

const rules = ref({
  ysnr: [
    { required: true, message: '请输入原始内容', trigger: 'blur' }
  ],
  bcnr: [
    { required: true, message: '请输入补充内容', trigger: 'blur' }
  ]
})
const elform = ref()
const formData = ref([
  {
    label: '原始内容',
    prop: 'ysnr',
    type: 'textarea',
    placeholder: '请输入原始内容',
    disabled: true,
    width: '90%'
  },
  {
    label: '补充内容',
    prop: 'bcnr',
    type: 'textarea',
    placeholder: '请输入补充内容',
    width: '90%'
  }
])
const submit = () => {
  elform.value.submit((val) => {
    const promes = {
      xsid: props.dataList.id,
      ...listQuery.value
    }
    if (props.updeteBool) {
        qbcjCzztEdit(promes).then(res => {
        ElMessage.success('修改成功')
        close()
        emit('getqbcjCzztList')
      })
    } else {
      qbcjCzzt(promes).then(res => {
        ElMessage.success('新增成功')
        close()
      })
    }
  })
}
const close = () => {
  elform.value.reset()
  emit('update:modelValue', false)

}
</script>

<style scoped>
.intelligence-container {
  padding: 10px;
}

.info-row {
  display: flex;
  margin-bottom: 20px;
  gap: 30px;
  flex-wrap: wrap;
}

.info-item {
  flex: 1;
  min-width: 250px;
}

.info-label {
  font-size: 14px;
  font-weight: 600;
  color: #409EFF;
  margin-bottom: 8px;
}

.info-value {
  font-size: 14px;
  color: #606266;
  padding: 8px;
  background-color: #f5f7fa;
  border-radius: 4px;
  min-height: 32px;
  line-height: 1.5;
}

.content-section {
  margin-top: 10px;
}

.info-content {
  font-size: 14px;
  color: #606266;
  padding: 12px;
  background-color: #f5f7fa;
  border-radius: 4px;
  min-height: 100px;
  line-height: 1.8;
  white-space: pre-wrap;
  word-break: break-word;
  border-left: 3px solid #409EFF;
}

/* 响应式设计 */
@media screen and (max-width: 768px) {
  .info-row {
    flex-direction: column;
    gap: 15px;
  }

  .info-item {
    min-width: 100%;
  }
}
</style>