kd-aiot-frontend-wt/src/views/bpm/handleTask/components/sealManagement/sealDialog.vue

<template>
  <el-form
    ref="formRef"
    :model="form"
    :rules="rules"
    label-width="120px"
    size="small"
  >
    <!-- 第一行：印章编码 + 印章名称 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="印章编码" prop="code">
          <el-input
            v-model="form.code"
            placeholder="系统自动生成，唯一码"
            disabled
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="印章名称" prop="name" required>
          <el-input
            v-model="form.name"
            placeholder="请输入"
            disabled
            clearable
          />
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 第二行：印章类型 + 印章编号 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="印章类型" prop="sealType" required>
          <DictSelection
            dictName="印章类型"
            clearable
            filterable
            v-model="form.sealType"
            :isProhibit="true"
          >
          </DictSelection>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="印章编号" prop="sealNumber">
          <el-input
            v-model="form.sealNumber"
            placeholder="请输入"
            disabled
            clearable
          />
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 第三行：印章持有人 + 版本 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="印章持有人" prop="sealHolderName">
          <el-input
            :maxlength="20"
            v-model="form.sealHolderName"
            @click.native="setUsers"
            placeholder="选择人员"
            disabled
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="版本" prop="version" required>
          <el-input
            v-model="form.version"
            placeholder="请输入"
            disabled
            clearable
          />
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 第四行：是否长期有效 + 状态 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="是否长期有效" prop="isLongTerm" required>
          <el-radio-group v-model="form.isLongTerm" disabled>
            <el-radio :label="1">长期</el-radio>
            <el-radio :label="0">非长期</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="状态" prop="status" required>
          <el-switch
            v-model="form.status"
            :active-value="1"
            :inactive-value="0"
            disabled
          />
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 非长期时显示有效期 -->
    <el-row :gutter="20" v-if="form.isLongTerm == '0'">
      <el-col :span="12">
        <el-form-item label="有效期开始日期" prop="validStartDate">
          <el-date-picker
            v-model="form.validStartDate"
            disabled
            type="date"
            value-format="yyyy-MM-dd"
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="有效期结束日期" prop="validEndDate">
          <el-date-picker
            v-model="form.validEndDate"
            type="date"
            value-format="yyyy-MM-dd"
            disabled
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 印章图片上传 -->
    <el-row>
      <el-col :span="24">
        <el-form-item label="印章图片" prop="imgUrl" required>
          <div class="upload-container">
            <el-image
              style="max-width: 200px; max-height: 200px"
              :src="form.imgUrl"
              :preview-src-list="[form.imgUrl]"
            >
            </el-image>
            <div class="upload-tips">
              <p>上传要求：</p>
              <p>1、图像样式必须与实物印章的印模规制保持一致。</p>
              <p>2、印模必须清晰、完整、无断裂、无拖影</p>
            </div>
          </div>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
  import { getSealById } from '@/api/bpm/components/sealManagement';

  const defaultForm = {
    code: '',
    imgUrl: '',
    isLongTerm: 1,
    name: '',
    remark: '',
    sealHolderId: '',
    sealHolderName: '',
    sealNumber: '',
    sealType: '',
    sealTypeName: '',
    status: 1,
    processInstanceId: '',
    validEndDate: '',
    validStartDate: '',
    version: ''
  };

  export default {
    props: {
      businessId: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        form: {
          ...defaultForm
        },
        rules: {}
      };
    },
    created() {
      this.init();
    },
    methods: {
      init() {
        getSealById(this.businessId).then((res) => {
          this.form = res;
        });
      }
    }
  };
</script>

<style scoped>
  .upload-container {
    display: flex;
    align-items: flex-start;
    gap: 20px;
  }

  .seal-uploader {
    width: 200px;
    height: 200px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    background-color: #f5f7fa;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .seal-uploader:hover {
    border-color: #409eff;
  }

  .uploader-placeholder {
    text-align: center;
    color: #8c939d;
  }

  .uploader-placeholder .el-icon-picture-outline {
    font-size: 48px;
    margin-bottom: 10px;
  }

  .upload-text {
    display: flex;
    gap: 10px;
    justify-content: center;
  }

  .delete-btn {
    color: #f56c6c;
  }

  .seal-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .upload-tips {
    flex: 1;
    font-size: 12px;
    color: #606266;
    line-height: 1.8;
  }

  .upload-tips p {
    margin: 0;
    padding: 0;
  }

  .upload-tips p:first-child {
    font-weight: bold;
    margin-bottom: 5px;
  }
</style>