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

<!--  -->
<template>
  <div class="author" :class="{ downMode }" v-if="data">
    <div class="content">
      <!-- <div class="check-item" @click="checkOptions(checkData1, index)" v-for="(i, index) in checkData1.options">
        <div class="item">
          <ui-icon :type="checkData1.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
          <span>{{ i.title }}</span>
          <div v-if="i.id == 1 || i.id == 4" class="input-box" style="flex: 1">
            <input type="text" />
          </div>
        </div>
      </div> -->
      <div class="check-item" @click="checkOptions(checkData, index)" v-for="(i, index) in checkData.options">
        <div class="item" :style="i.id == 1 || i.id == 4 ? '' : 'display: inline-block'">
          <ui-icon :type="checkData.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
          <span>{{ i.title }}</span>
          <div v-if="i.id == 1 || i.id == 4" class="input-box" style="flex: 1">
            <input type="text" />
          </div>
        </div>
      </div>

      <div class="item" style="margin-top: 200px">
        <span style="padding-left: 20px">委托人（签名）：</span>
        <div style="flex: 1">
          <input type="text" v-model="data.authorSign" />
        </div>
      </div>
      <div class="item" style="margin-top: 100px">
        <span>受委托人（签名）：</span>
        <div style="flex: 1">
          <input type="text" v-model="data.authorBySign" />
        </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 checkData1 = ref({
  check: 0,
  options: [
    {
      id: 1,
      title: "...",
    },
  ],
});
const checkData = ref({
  check: 0,
  options: [
    {
      id: 1,
      title: "...",
    },
    {
      id: 2,
      title: "一般代理。即代理为参与诉讼、调解，提供法律帮助。",
    },
    {
      id: 3,
      title: "特别授权，代为起诉，陈述事实，参加辩论和调解，代为提出、承认、放弃或变更赔偿请求， 提起反诉或上诉，签收法律文书。",
    },
    {
      id: 4,
      title: "...",
    },
  ],
});

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

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

  if (tablesInfo.author) {
    data.value = tablesInfo.author;
  }
});
</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;
  }
}
div[contenteditable] {
  outline: none;
}
.input-box {
  input {
    width: 100%;
    height: 100%;
    border-bottom: 1px solid #000;
    padding: 0 10px;
    box-sizing: border-box;
  }
}
.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;
    }
  }
  .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;
      .item {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        span {
          line-height: 30px;
        }
      }
    }
  }
}
</style>