traffic-laser/src/views/tables/author/author-one.vue

<!--  -->
<template>
  <div class="author" :class="{ downMode }" v-if="data">
    <h2 class="title">授权委托书</h2>
    <div class="content">
      <template v-for="(i, index) in data.authorList">
        <div class="item">
          <span>委托人：</span>
          <div class="input-box" style="min-width: 100px">
            <input style="width: 100px" v-model="i.name" />
            <div class="content-box">{{ i.name }}</div>
          </div>
          <span>性别：</span>
          <div class="input-box" style="min-width: 60px">
            <input style="width: 60px" v-model="i.sex" />
            <div class="content-box">{{ i.sex }}</div>
          </div>
          <span>年龄：</span>
          <div class="input-box" style="min-width: 60px">
            <input style="width: 60px" v-model="i.age" />
            <div class="content-box">{{ i.age }}</div>
          </div>
          <span>身份证号：</span>
          <div class="input-box" style="flex: 1">
            <input style="width: 100%" v-model="i.id" />
            <div class="content-box">{{ i.id }}</div>
          </div>
        </div>
        <div class="item">
          <span>住址：</span>
          <div style="flex: 1" class="input-box">
            <input style="width: 100%" v-model="i.address" />
            <div class="content-box">{{ i.address }}</div>
          </div>
          <span>联系方式：</span>
          <div class="input-box">
            <input style="width: 100%" v-model="i.phoneNum" />
            <div class="content-box">{{ i.phoneNum }}</div>
          </div>
        </div>
      </template>

      <div class="item" style="margin-top: 100px">
        <span>受委托人姓名：</span>
        <div style="flex: 1" class="input-box">
          <input style="width: 100%" v-model="data.authorByName" />
          <div class="content-box">{{ data.authorByName }}</div>
        </div>
        <span>性别：</span>
        <div class="input-box" style="min-width: 60px">
          <input style="width: 60px" v-model="data.authorBySex" />
          <div class="content-box">{{ data.authorBySex }}</div>
        </div>
        <span>年龄：</span>
        <div class="input-box" style="min-width: 60px">
          <input style="width: 60px" v-model="data.authorByAge" />
          <div class="content-box">{{ data.authorByAge }}</div>
        </div>
        <span>身份证号：</span>
      </div>
      <div class="item">
        <div style="flex: 1" class="input-box">
          <input style="width: 100%" v-model="data.authorById" />
          <div class="content-box">{{ data.authorById }}</div>
        </div>
        <span>工作单位：</span>
        <div class="input-box" style="min-width: 330px">
          <input style="width: 330px" v-model="data.authorByCompany" />
          <div class="content-box">{{ data.authorByCompany }}</div>
        </div>
        <span>住址及联系方式：</span>
      </div>
      <div class="item">
        <div style="flex: 1" class="input-box">
          <input style="width: 100%" v-model="data.authorByPhoneNum" />
          <div class="content-box left">{{ data.authorByPhoneNum }}</div>
        </div>
      </div>

      <div class="item" style="margin-top: 120px">
        <div style="text-indent: 2em">现委托上述受委托人参与：</div>
        <div style="flex: 1" class="input-box">
          <input style="width: 100%" v-model="data.message" />
          <div class="content-box">{{ data.message }}</div>
        </div>
        <span>一案</span>
      </div>
      <div class="item">
        <div>处理工作。</div>
      </div>
      <div class="item" style="margin-top: 100px">
        <span>受托人：</span>
        <div class="input-box">
          <input style="width: 100%" v-model="data.authorByName" />
          <div class="content-box">{{ data.authorByName }}</div>
        </div>
        <span>代理权限为：</span>
      </div>

      <div class="check-item" @click="checkOptions(checkData, index)" v-for="(i, index) in checkData.options">
        <div style="display: inline-block">
          <ui-icon :type="data.options.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
          <span>{{ i.title }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, toRefs, onBeforeMount, onMounted } from "vue";
import { tables } from "@/store/tables";
import { tablesInfo, setData } from "../data";
const props = defineProps({
  downMode: { type: Boolean, default: false },
  isDownloadShow: { type: Boolean, default: false },
});
const data = ref(null);
const checkOptions = (item, index) => {
  item.check = item.options[index].id;
  data.value[item.type].check = item.check;
};
const checkData = ref({
  check: 0,
  type: "options",
  options: [
    {
      id: 1,
      title: "一般代理。即代理为参与诉讼、调解，提供法律帮助。",
    },
    {
      id: 2,
      title: "特别授权，代为起诉，陈述事实，参加辩论和调解，代为提出、承认、放弃或变更赔偿请求， 提起反诉或上诉，签收法律文书。",
    },
  ],
});

const saveHandler = () => {
  return { type: "authorOne", data: data.value };
};

defineExpose({ saveHandler, data });
onMounted(() => {
  if (props.isDownloadShow) {
  } else {
    setData("authorOne");
  }

  if (tablesInfo.authorOne) {
    data.value = tablesInfo.authorOne;
  }
});
</script>
<style lang="scss" scoped>
.content-box {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  border-bottom: 1px solid #000;
  padding: 0 10px;
  box-sizing: border-box;
  &.left {
    justify-content: flex-start;
  }
}
.input-box {
  input {
    width: 100%;
    height: 100%;
    border-bottom: 1px solid #000;
    padding: 0 10px;
    box-sizing: border-box;
    text-align: center;
  }
}
.author {
  color: #000;
  width: 100%;
  height: 100%;
  // font-family: sr, st;
  font-family: SimHei-Regular, SimHei;
  font-size: 24px;
  font-weight: 400;
  .content-box {
    display: none;
  }
  &.downMode {
    input {
      display: none;
    }
    .content-box {
      display: flex;
    }

    .content {
      .item {
        width: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: flex-start;
        margin-bottom: 20px;
      }
    }
  }
  .title {
    text-align: center;
    margin-bottom: 70px;
  }
  .content {
    .item {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-bottom: 20px;
    }
    .check-item {
      margin-bottom: 30px;

      span {
        line-height: 30px;
      }
    }
  }
}
</style>