sgxt_web/src/views/backOfficeSystem/DeploymentDisposal/mpvGroup/model/info.vue

<template>
  <div>
    <div class="headClass" style="">
      <h3>群体背景信息</h3>
      <el-button type="primary" v-if="showBut" :disabled="disabled" @click="gettbGsxtZdqtUpdate">保存</el-button>
    </div>
    <FormMessage v-model="listQuery" :formList="formData" labelWidth="120px" ref="elform" :rules="rules">
      <template #qtzp>
        <div style="width: 100%; padding-left: 50px">
          <MOSTY.Upload :showBtn="false" :limit="1" v-model="listQuery.qtzp" />
        </div>
      </template>
    </FormMessage>
  </div>
</template>

<script setup>
import { ref, watch, reactive, getCurrentInstance } from "vue";
import FormMessage from "@/components/aboutTable/FormMessage.vue";
import { tbGsxtZdqtUpdate } from '@/api/qt'
import * as MOSTY from "@/components/MyComponents/index";
const props = defineProps({
  dataList: {
    type: Object,
    default: () => { },
  }, disabled: {
    type: Boolean,
    default: false
  },
  showBut: {
    type: Boolean,
    default: false
  },
})
watch(() => props.dataList, (val) => {
  listQuery.value = { ...val }
}, { deep: true })
const { proxy } = getCurrentInstance();
const { D_GS_ZDQT_FXDJ, D_GS_ZDQT_LB, D_GS_ZDR_YJDJ, D_BZ_RCBKZT, D_ZDQT_QTXZ } =
  proxy.$dict('D_GS_ZDQT_FXDJ', 'D_GS_ZDQT_LB', 'D_GS_ZDR_YJDJ', 'D_BZ_RCBKZT', 'D_ZDQT_QTXZ')
const formData = ref([
  { label: "群体名称", prop: "qtMc", type: "input", width: '30%' },
  { label: "群体别名", prop: "qtBm", type: "input", width: '30%' },
  { label: "风险等级", prop: "qtFxdj", type: "select", options: D_GS_ZDQT_FXDJ, width: '30%' },
  { label: "群体类别", prop: "qtLb", type: "select", options: D_GS_ZDQT_LB, width: '30%' },
  { label: "预警等级", prop: "zdrYjdj", type: "select", options: D_GS_ZDR_YJDJ, width: '30%' },
  { label: "布控状态", prop: "bkzt", type: "select", options: D_BZ_RCBKZT, width: '30%' },
  { label: "群体成立时间", prop: "qtClsj", type: "date", width: '30%' },
  { label: "入库时间", prop: "zdrRkkssj", type: "datetime", width: '30%' },
  { label: "出库时间", prop: "zdrRkjssj", type: "datetime", width: '30%' },
  { label: "所属部门", prop: "gxSsbmdm", type: "department", width: '30%' },
  { label: "群体照片", prop: "qtzp", type: "slot", width: '60%' },

])
const listQuery = ref({})
const elform = ref(null)
const rules = reactive({
  qtMc: [{ required: true, message: "请输入车牌号", trigger: "blur" }],
  qtFxdj: [{ required: true, message: "请选择风险等级", trigger: "change" }],
  qtLb: [{ required: true, message: "请选择群体类别", trigger: "change" }],
  bkzt: [{ required: true, message: "请选择布控状态", trigger: "change" }],
  qtClsj: [{ required: true, message: "请选择群体成立时间", trigger: "change" }],
  zdrYjdj: [{ required: true, message: "请选择所预警等级", trigger: "change" }]
})
const gettbGsxtZdqtUpdate = () => {
  const promes = { ...listQuery.value, qtzp: listQuery.value.qtzp ? listQuery.value.qtzp.toString() : '' }
  tbGsxtZdqtUpdate(promes).then((res) => {
    proxy.$message({
      message: '更新成功',
      type: 'success'
    })
  }).catch((err) => {

  });
}
// 抛出数据并验证表单
const throwData = () => {
  return new Promise((resolve, reject) => {
    if (elform.value && elform.value.validate) {
      elform.value.validate((valid) => {
        if (valid) {
          resolve({ ...listQuery.value, qtzp: listQuery.value.qtzp ? listQuery.value.qtzp.toString() : '' });
        } else {
          reject(new Error('表单验证失败，请检查输入信息'));
        }
      });
    } else {
      // 如果没有验证方法，直接返回数据
      resolve({ ...listQuery.value, qtzp: listQuery.value.qtzp ? listQuery.value.qtzp.toString() : '' });
    }
  });
}
defineExpose({
  throwData
})



</script>

<style lang="scss" scoped>
@import "~@/assets/css/layout.scss";
@import "~@/assets/css/element-plus.scss";

.left_box {
  width: 200px;
  border: 1px solid #c8c8c89a;
  border-radius: 5px;
  padding: 5px;
}

.right_box {
  width: calc(100% - 230px);
  overflow-y: auto;
  padding: 5px;
}

::v-deep .el-form-item__content {
  display: block !important;
  width: 100%;
}

::v-deep .form-item-box {
  width: 100% !important;
}

.headClass {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 10px 0;
  padding-bottom: 10px;
  border-bottom: 2px solid #409eff;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.headClass::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 60px;
  height: 2px;
  background-color: #409eff;
}

h3 {
  margin: 0;
}
</style>