TaskSystem-admin/src/views/user_informationg/details.vue

<template>
  <el-card>
    <el-form
      ref="elForm"
      :disabled="true"
      :model="formData"
      size="mini"
      label-width="100px"
    >
      <!-- <div style="font-size: 1.2rem; translate: 1vw 0; background-color: white">
          个人信息
        </div> -->
      <p class="tit">个人信息</p>

      <el-col>
        <el-row>
          <el-col :span="6">
            <el-form-item label="姓名" prop="name">
              <el-input
                v-model="formData.name"
                placeholder="请输入姓名"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="性别" prop="sex">
              <el-radio-group v-model="formData.sex" size="medium">
                <el-radio :label="1">男</el-radio>
                <el-radio :label="2">女</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="年龄" prop="age">
              <el-input
                v-model="formData.age"
                placeholder="请输入年龄"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="电话" prop="phone">
              <el-input
                v-model="formData.phone"
                placeholder="请输入电话"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="身份证号" prop="id_card">
              <el-input
                v-model="formData.id_card"
                placeholder="请输入身份证号"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="地址" prop="field104">
              <el-input
                v-model="formData.address"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-col>

      <p class="tit">地区信息</p>
      <el-col>
        <el-row>
          <el-col :span="6">
            <el-form-item label="地址">
              <el-input
                :value="
                  formData.area_name +
                  formData.street_name +
                  formData.village_name +
                  formData.brigade_name
                "
                placeholder="请输入地址"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="详细地址" prop="address">
              <el-input
                v-model="formData.address"
                placeholder="请输入详细地址"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="汽车是否能到家"
              label-width="200px"
              prop="highway"
            >
              <el-radio-group v-model="formData.highway" size="medium">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="是否使用智能手机"
              label-width="200px"
              prop="smart_phone"
            >
              <el-radio-group v-model="formData.smart_phone" size="medium">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="6" v-if="formData.smart_phone">
            <el-form-item label="微信号" prop="field119">
              <el-input
                v-model="formData.skills"
                placeholder="请输入微信号"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-col>

      <p class="tit">常住人口</p>
      <el-col>
        <div v-for="(item, index) in formData.family" :key="index">
          <el-row>
            <el-col :span="6">
              <el-form-item label="姓名" prop="name">
                <el-input
                  v-model="item.name"
                  placeholder="请输入姓名"
                  clearable
                  :style="{ width: '100%' }"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" class="dates">
              <el-form-item label="出生日期" prop="field110">
                <el-date-picker
                  :disabled="true"
                  v-model="item.birth_time"
                  style="width: 150%"
                  placeholder="请输入出生日期"
                  clearable
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="就业情况" prop="field111">
                <el-select
                  :disabled="true"
                  v-model="item.situation"
                  placeholder="请输入就业情况"
                  clearable
                  :style="{ width: '100%' }"
                >
                  <el-option
                    v-for="(items, indexs) in workLists"
                    :key="indexs"
                    :label="items.name"
                    :value="items.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="技能特长" prop="field119">
                <el-input
                  v-model="item.skills"
                  placeholder="请输入技能特长"
                  clearable
                  :style="{ width: '100%' }"
                >
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <el-form-item label="是否存在学生, 婴幼儿" labelWidth="200px">
          <el-radio-group v-model="formData.child" size="medium">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <div v-for="(item, index) in formData.child_arr" v-if="formData.child">
        <el-col v-if="formData.child_arr[index].age <= 3">
          <el-row>
            <el-col :span="6">
              <el-form-item label="年龄" prop="field134">
                <el-input
                  v-model="item.age"
                  clearable
                  :disabled="true"
                  :style="{ width: '100%' }"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="哺乳方式" prop="feeding">
                <el-radio-group v-model="item.feeding" size="medium">
                  <el-radio
                    v-for="(items, indexs) in datas.feedsList"
                    :key="index"
                    :label="items.value"
                    >{{ items.label }}</el-radio
                  >
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="备注" prop="field157">
                <el-input
                  v-model="item.notes"
                  placeholder="请输入备注"
                  clearable
                  :style="{ width: '100%' }"
                >
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col v-else>
          <el-row>
            <el-col :span="6">
              <el-form-item label="年龄" prop="field134">
                <el-input
                  v-model="item.age"
                  clearable
                  :disabled="true"
                  :style="{ width: '100%' }"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="formData.child_arr[index].age >= 3">
              <el-form-item label="年级" prop="grade">
                <el-input
                  v-model="item.grade"
                  placeholder="请输入年级"
                  clearable
                  :style="{ width: '100%' }"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="是否补课" prop="is_lesson">
                <el-radio-group v-model="item.is_lesson" size="medium">
                  <el-radio label="1">是</el-radio>
                  <el-radio label="0">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="item.is_lesson">
              <el-form-item label="补课情况" prop="lessons">
                <el-input
                  v-model="item.lessons"
                  clearable
                  :style="{ width: '100%' }"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="备注" prop="field138">
                <el-input
                  v-model="item.notes"
                  placeholder="请输入备注"
                  clearable
                  :style="{ width: '100%' }"
                >
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
      </div>
    </el-form>
  </el-card>

  <!-- <component
    v-for="(item, card_index) in formData.datas"
    :key="item.id"
    :is="isComponent(item.category_child || item.category_id)"
    :datas="item.datas"
    :update_time="item.update_time"
  ></component> -->

  <template
    v-for="(item, card_index) in formData.datas"
    :key="'card' + item.id"
  >
    <store
      v-if="item.category_child == 8"
      :datas="item.datas"
      :update_time="item.update_time"
    ></store>
    <plant
      v-if="item.category_child == 7"
      :datas="item.datas"
      :update_time="item.update_time"
    ></plant>
    <breeding
      v-if="item.category_child == 32"
      :datas="item.datas"
      :update_time="item.update_time"
    ></breeding>
  </template>
</template>

  <script lang="ts" setup name="test">
import { ref, reactive } from "vue";
import store from "./component/store.vue";
import breeding from "./component/breeding.vue";
import plant from "./component/plant.vue";

import { fileManagelist, fileManageDetil } from "@/api/informationg";
const route = useRoute();

const componentList = ref([
  {
    id: 8,
    name: "store",
  },
  {
    id: 7,
    name: "plant",
  },
  {
    id: 32,
    name: "breeding",
  },
]);

const isComponent = (id: any) => {
  console.log(componentList.value.find((item) => item.id == id)?.name);

  return componentList.value.find((item) => item.id == id)?.name;
};

const formData = reactive({
  name: "",
  phone: "",
  age: "",
  sex: "",
  id_card: "",
  area_name: "",
  street_name: "",
  village_name: "",
  brigade_name: "",
  addressa: "",
  address: "",
  //   常住人口
  family: [
    {
      name: "",
      birth_time: "",
      situation: "",
      work: "",
      phone: "",
      skills: "",
    },
  ],
  child: undefined,
  child_arr: [
    {
      name: "",
      birth: "",
      age: 0,
      class: "",
      lessons: "",
      notes: "",
      feeding: "",
    },
  ],
  highway: undefined,
  smart_phone: undefined,
  wechat: "",
  datas: [],
});

const workLists = reactive([
  { name: "做工地的", id: "0" },
  { name: "厂里打工", id: "1" },
  { name: "公司职员", id: "2" },
  { name: "政府上班", id: "3" },
  { name: "种地", id: "4" },
  { name: "在家赋闲", id: "5" },
  { name: "其他", id: "6" },
]);
const isCheck = ref(false);
const datas = reactive({
  subjs: [
    {
      label: "语文",
      value: 1,
    },
    {
      label: "数学",
      value: 2,
    },
    {
      label: "英语",
      value: 3,
    },
    {
      label: "艺术类",
      value: 4,
    },
    {
      label: "其他",
      value: 5,
    },
  ],
  feedsList: [
    {
      label: "母乳",
      value: "0",
    },
    {
      label: "奶粉",
      value: "1",
    },
  ],
  plantList: [
    {
      label: "自己种养",
      value: "0",
    },
    {
      label: "出租",
      value: "1",
    },
    {
      label: "代种养",
      value: "2",
    },
    {
      label: "租更多地扩大种植",
      value: "3",
    },
  ],
  // 房屋风格
  houseStyle: [
    {
      label: "中式",
      value: 1,
    },
    {
      label: "美式",
      value: 2,
    },
    {
      label: "欧式",
      value: 3,
    },
    {
      label: "简约",
      value: 4,
    },
    {
      label: "奢华",
      value: 5,
    },
    {
      label: "别墅/四合院",
      value: 6,
    },
    {
      label: "其他",
      value: 7,
    },
  ],
  //   维护内容
  weihu: [
    {
      label: "房顶",
      value: 1,
    },
    {
      label: "厕所",
      value: 2,
    },
    {
      label: "管线",
      value: 3,
    },
    {
      label: "电器",
      value: 4,
    },
  ],
  field102Options: [
    {
      label: "别墅",
      value: 1,
    },
    {
      label: "洋房",
      value: 2,
    },
    {
      label: "高层",
      value: 3,
    },
    {
      label: "楼梯房",
      value: 4,
    },
  ],
  //   生态种植
  ecologyPlant: [
    {
      label: "非生态种植",
      value: 1,
    },
  ],
  sellType: [
    {
      label: "自销",
      value: "1",
    },
    {
      label: "定点销售",
      value: "2",
    },
  ],
  // 宣传
  publicize: [
    {
      label: "有无宣传推广",
      value: 1,
    },
  ],
  //经营类型
  field106Options: [
    {
      label: "超市",
      value: 1,
    },
    {
      label: "生鲜",
      value: 2,
    },
    {
      label: "饭店",
      value: 3,
    },
    {
      label: "五金",
      value: 4,
    },
    {
      label: "杂货",
      value: 5,
    },
    {
      label: "服装",
      value: 6,
    },
    {
      label: "文具",
      value: 7,
    },
    {
      label: "其他",
      value: 8,
    },
  ],
  //   服务对象
  field109Options: [
    {
      label: "学生",
      value: 1,
    },
    {
      label: "家庭客户",
      value: 2,
    },
    {
      label: "青年客户",
      value: 3,
    },
    {
      label: "老年人",
      value: 4,
    },
    {
      label: "游客",
      value: 5,
    },
  ],
  //   宴席类型
  banquetList: [
    {
      label: "婚宴",
      value: 1,
    },
    {
      label: "寿宴",
      value: 2,
    },
    {
      label: "满月酒",
      value: 3,
    },
    {
      label: "其它庆功宴",
      value: 4,
    },
    {
      label: "白事",
      value: 5,
    },
  ],
  //
  field106aOptions: [
    {
      label: "酒店",
      value: 1,
    },
    {
      label: "一条龙",
      value: 2,
    },
    {
      label: "只请厨师",
      value: 3,
    },
  ],
  //   交通工具
  field104Options: [
    {
      label: "电瓶车",
      value: 1,
    },
    {
      label: "摩托车",
      value: 2,
    },
    {
      label: "小汽车",
      value: 3,
    },
  ],
  provinceOptions: [],
  cityOptions: [],
  areaOptions: [],
  streetOptions: [],
});
const test = () => {
  console.log(formData.banquetList);
};
const field181Options = reactive([
  {
    label: "有加工仓储",
    value: 1,
  },
]);
const field183Options = reactive([
  {
    label: "有运输",
    value: 1,
  },
]);
const field188Options = reactive([
  {
    label: "是否想要扩大经营",
    value: 1,
  },
]);
// 分析
const analyse = ref(true);

const addDecoration = () => {};

fileManageDetil({ id: route.query.id }).then(async (res) => {
  //   console.log(res);
  for (const key in formData) {
    if (res[key] != null && res[key] != undefined) {
      //@ts-ignore
      formData[key] = res[key];
    }
  }
  // "area_name": "江阳区",
  //     "street_name": "茜草街道",
  //     "village_name": "建国村",
  //     "brigade_name": "10队",
  formData.addressa =
    formData.area_name +
    formData.street_name +
    formData.village_name +
    formData.brigade_name +
    formData.address;

  console.log(formData);
  //   await getCityList();
  //   await getAreaList();
  //   await getStreetList();
});
</script>
  <style lang="scss" scoped>
.content {
  background-color: #fff;
}

.tit {
  font-size: 1.2rem;
  translate: 1vw -1vw;
  background-color: white;

  margin: 2vh 0 0vh;
}

// .tit {
//   font-size: 1.2rem;
//   margin: 10px 0;
//   background-color: #f6f6f6;
// }

.dates {
  .el-input__inner {
    width: 14vw;
  }
}
</style>