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
                " 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" :update_time="item.update_time"></component>

</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 houseTransaction from "./component/houseTransaction.vue";
import houseRenovate from "./component/houseRenovate.vue";
import houseDecoration from "./component/houseDecoration.vue";
import houseRepair from "./component/houseRepair.vue";
import banquetMarry from "./component/banquetMarry.vue";
import banquetOther from "./component/banquetOther.vue";
import banquetFuneral from "./component/banquetFuneral.vue";
import banquetFullMoon from "./component/banquetFullMoon.vue";
import banquetBirthday from "./component/banquetBirthday.vue";
import thickProcessing from "./component/thickProcessing.vue";
import deepProcessing from "./component/deepProcessing.vue";

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

const componentList = reactive(new Map());

componentList.set(7, plant);
componentList.set(8, store);
componentList.set(32, breeding);
componentList.set(15, houseTransaction);
componentList.set(14, houseRenovate);
componentList.set(13, houseDecoration);
componentList.set(12, houseRepair);
componentList.set(17, banquetMarry);
componentList.set(20, banquetOther);
componentList.set(21, banquetFuneral);
componentList.set(19, banquetFullMoon);
componentList.set(18, banquetBirthday);
componentList.set(10, thickProcessing);
componentList.set(9, deepProcessing);

const isComponent = (id: any) => {
  return componentList.get(id);
};

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>