一、效果

二、需求

可以一次性创建多个工单，并且点击就医时，显示医生等选项，选择清扫时，显示清扫范围选项。input-table选择责任人时，回填责任人的联系方式

三、项目思路

1、使用avue的 子表单功能 type:form
2、使用avue的input-table组件

四、疑问

1、首次怎么添加第一条数据
手动执行一次添加子表单数据操作

this.$refs["avue-form"].$refs.workOrders[0].$refs.temp.addRow();

2、虽然能够监听到工单类型的值变化，那我怎么知道是那一条目的工单类型
修改avue源码，传出第几个表单条目的参数（avue 版本为2.9.5）
a、在这个组件中传入第几个表单

b、再往具体的子组件中上传

c、在监听值变化的事件中，加入formIndex

d、这样就能获取到第几个表单的参数了,就能做相应的处理了。隐藏和显示不能够控制option.column 里面对象的display值。因为所有表单传的是同一个option，此时只能够通过控制样式display 实现显示隐藏；

e、同理去处理input-table组件，实现选择责任人后，实现责任人联系电话的回显

五、看重要代码注释

<template>
  <div>
    <container-title :btns="['back']" title="工单管理" @back="$emit('back')">
    </container-title>
    <avue-form
      ref="avue-form"
      :option="option"
      v-model="workOrderForm"
      @submit="submit"
    >
    </avue-form>
  </div>
</template>
<script>
import containerTitle from "@/components/containerTitle/index.vue";
import { getElderPage, principalPage, doctorPage } from "@/api/system/user";
export default {
  components: {
    containerTitle,
  },
  props: {
    type: {
      type: String,
      default: "",
    },
    form: {
      type: Object,
      default: () => {},
    },
  },
  created() {
    this.workOrderForm = this.form;
    this.option.boxType = this.type;
  },
  watch: {
    workOrderForm: {
      handler(val) {
        this.$emit("update:form", val);
      },
    },
  },
  data() {
    return {
      workOrderForm: {},
      option: {
        boxType: "add",
        group: [
          {
            icon: "el-icon-user",
            label: "老人信息",
            collapse: true,
            prop: "group1",
            column: [
              {
                label: "老人",
                prop: "userId",
                type: "table",
                dialogWidth: "50%",
                children: {
                  border: true,
                  column: [
                    {
                      label: "姓名",
                      width: 120,
                      search: true,
                      searchSpan: 6,
                      prop: "name",
                    },
                    {
                      label: "性别",
                      width: 60,
                      prop: "sex",
                      type: "select",
                      dicData: [
                        {
                          label: "男",
                          value: 1,
                        },
                        {
                          label: "女",
                          value: 2,
                        },
                        {
                          label: "未知",
                          value: -1,
                        },
                      ],
                    },
                    {
                      label: "年龄",
                      width: 60,
                      prop: "age",
                    },
                    {
                      label: "联系方式",
                      width: 100,
                      prop: "phone",
                    },
                    {
                      label: "详细地址",
                      prop: "address",
                      align: "left",
                    },
                  ],
                },
                onLoad: async ({ page, value, data }, callback) => {
                  this.getInputTableOnLoad(page, value, data, callback, 1);
                },

                span: 24,
                row: true,
                width: 80,
                props: {
                  label: "name",
                  value: "id",
                },
                rules: [
                  {
                    required: true,
                    message: "请选择老人",
                    trigger: "change",
                  },
                ],
              },
              {
                label: "身份证号",
                prop: "cardId",
                disabled: true,
                width: 150,
              },
              {
                label: "性别",
                prop: "sexName",
                disabled: true,
                width: 150,
              },
              {
                label: "年龄",
                prop: "age",
                disabled: true,
                width: 150,
              },
              {
                label: "联系方式",
                prop: "phone",
                disabled: true,
                width: 150,
              },
              {
                label: "详细地址",
                prop: "address",
                disabled: true,
                width: 150,
              },
            ],
          },
          {
            icon: "el-icon-s-order",
            label: "工单信息",
            collapse: true,
            prop: "group2",
            column: [
              {
                label: "工单",
                prop: "workOrders",
                type: "dynamic",
                span: 24,
                children: {
                  align: "center",
                  type: "form", //子表单属性
                  headerAlign: "center",
                  rowAdd: (done) => {
                    // this.$message.success("新增回调");
                    done();
                    this.$nextTick(() => {
                      let len = this.workOrderForm.workOrders.length;
                      let formIndex = len - 1;
                      this.changeWorkOrderType(9, formIndex);
                    });
                  },
                  rowDel: (row, done) => {
                    done();
                  },
                  column: [
                    {
                      label: "工单编号",
                      prop: "workCode",
                      display: false,
                      width: 100,
                      rules: [
                        {
                          required: true,
                          message: "请输入工单编号",
                          trigger: "blur",
                        },
                      ],
                    },
                    {
                      label: "工单类型",
                      type: "select",
                      searchSpan: 4,
                      width: 100,
                      dicUrl:
                        "/api/blade-system/dict-biz/dictionary?code=work_type",
                      props: {
                        label: "dictValue",
                        value: "dictKey",
                      },
                      dataType: "number",
                      prop: "workOrderType",
                      search: true,
                      cell: false,
                      change: (row) => {
                        let value = row.value;
                        let formIndex = row.formIndex;
                        this.changeWorkOrderType(value, formIndex);
                      },
                      rules: [
                        {
                          required: true,
                          message: "请选择工单类型",
                          trigger: "blur",
                        },
                      ],
                    },
                    {
                      label: "责任人",
                      prop: "taskUserId",
                      type: "table", //input-table 组件
                      dialogWidth: "50%",
                      children: {
                        border: true,
                        column: [
                          {
                            label: "姓名",
                            // width: 120,
                            search: true,
                            searchSpan: 6,
                            searchSize: "mini",
                            prop: "name",
                          },
                          {
                            label: "性别",
                            width: 60,
                            prop: "sex",
                            type: "select",
                            dicData: [
                              {
                                label: "男",
                                value: 1,
                              },
                              {
                                label: "女",
                                value: 2,
                              },
                              {
                                label: "未知",
                                value: -1,
                              },
                            ],
                          },
                          {
                            label: "年龄",
                            // width: 60,
                            prop: "age",
                          },
                          {
                            label: "联系方式",
                            // width: 100,
                            prop: "phone",
                          },
                        ],
                      },
                      onLoad: async (
                        { page, value, data, formIndex },
                        callback
                      ) => {
                        this.getInputTableOnLoad(
                          page,
                          value,
                          data,
                          callback,
                          2,
                          formIndex
                        );
                      },
                      props: {
                        label: "name",
                        value: "id",
                      },
                    },
                    {
                      label: "联系方式",
                      prop: "taskUserPhone",
                      disabled: true,
                      width: 150,
                    },
                    {
                      label: "清扫范围",
                      prop: "clearArea",
                      width: 150,
                    },
                    {
                      label: "医生",
                      prop: "doctorUserId",
                      type: "table",
                      dialogWidth: "50%",
                      children: {
                        border: true,
                        column: [
                          {
                            label: "姓名",
                            // width: 120,
                            search: true,
                            searchSpan: 6,
                            prop: "name",
                          },
                          {
                            label: "性别",
                            width: 60,
                            prop: "sex",
                            type: "select",
                            dicData: [
                              {
                                label: "男",
                                value: 1,
                              },
                              {
                                label: "女",
                                value: 2,
                              },
                              {
                                label: "未知",
                                value: -1,
                              },
                            ],
                          },
                          {
                            label: "联系方式",
                            // width: 100,
                            prop: "phone",
                          },
                        ],
                      },
                      onLoad: async (
                        { page, value, data, formIndex },
                        callback
                      ) => {
                        this.getInputTableOnLoad(
                          page,
                          value,
                          data,
                          callback,
                          3,
                          formIndex
                        );
                      },
                      props: {
                        label: "name",
                        value: "id",
                      },
                    },
                    {
                      label: "联系方式",
                      prop: "doctorPhone",
                      disabled: true,
                      width: 150,
                    },
                    {
                      label: "预约时间",
                      prop: "appointmentTime",
                      type: "datetime",
                      format: "yyyy-MM-dd hh:mm:ss",
                      valueFormat: "yyyy-MM-dd hh:mm:ss",
                      width: 150,
                    },
                    {
                      label: "工单描述",
                      prop: "descript",
                      type: "textarea",
                      span: 24,
                      row: true,
                      rules: [
                        {
                          required: true,
                          message: "请输入工单描述",
                          trigger: "blur",
                        },
                      ],
                    },
                    {
                      label: "工单状态",
                      prop: "workOrderStatus",
                      display: false,
                      type: "select",
                      dicData: [
                        {
                          label: "未派单",
                          value: "0",
                        },
                        {
                          label: "已派单",
                          value: "1",
                        },
                        {
                          label: "已服务",
                          value: "2",
                        },
                      ],
                    },
                    {
                      label: "服务描述",
                      prop: "serviceDescript",
                      span: 24,
                      row: true,
                      display: false,
                    },
                    {
                      label: "服务照片",
                      prop: "servicePhoto",
                      display: false,
                      type:"upload",
                      listType: 'picture-card',

                    },
                  ],
                },
              },
            ],
          },
        ],
      },
    };
  },
  mounted() {
    //默认点击一下工单信息
    if (this.type == "add") {
      this.$nextTick(() => {
        this.$refs["avue-form"].$refs.workOrders[0].$refs.temp.addRow();
      });
    } else if (this.type == "view") {
      //如果是查看，则显示其他服务信息
      let column = this.option.group[1].column[0].children.column;
      this.findObject(column, "workOrderStatus").display = true;
      this.findObject(column, "serviceDescript").display = true;
      this.findObject(column, "servicePhoto").display = true;
    }
  },
  methods: {
    submit(form, hide) {
      hide();
      this.$emit("submit");
    },
    setTaskUserPhone(value, formIndex) {
      console.log("formIndex: ", formIndex);
      console.log("value: ", value);
      this.$set(
        this.workOrderForm.workOrders[formIndex],
        "taskUserPhone",
        value
      );
    },
    changeWorkOrderType(value, formIndex) {
      let main =
        this.$refs["avue-form"].$refs.workOrders[0].$refs.temp.$refs.main;
      let target = main[formIndex];
      if (value == 1) {
        this.setPropValue(target, "doctorUserId", "display", "block");
        this.setPropValue(target, "doctorPhone", "display", "block");
        this.setPropValue(target, "appointmentTime", "display", "block");
        this.setPropValue(target, "clearArea", "display", "none");
      } else if (value == 2) {
        this.setPropValue(target, "doctorUserId", "display", "none");
        this.setPropValue(target, "doctorPhone", "display", "none");
        this.setPropValue(target, "appointmentTime", "display", "none");
        this.setPropValue(target, "clearArea", "display", "block");
      } else {
        this.setPropValue(target, "doctorUserId", "display", "none");
        this.setPropValue(target, "doctorPhone", "display", "none");
        this.setPropValue(target, "appointmentTime", "display", "none");
        this.setPropValue(target, "clearArea", "display", "none");
      }
    },
    //设置属性
    setPropValue(target, propName, setProp, propValue) {
      let el =
        target.$refs[propName][0].$el.parentNode.parentNode.parentNode
          .parentNode;
      el.style[setProp] = propValue;
    },
    setCurrentOldPeople(currentOldPeopleObj) {
      this.$set(this.workOrderForm, "cardId", currentOldPeopleObj.cardId);
      this.$set(this.workOrderForm, "sexName", currentOldPeopleObj.sexName);
      this.$set(this.workOrderForm, "phone", currentOldPeopleObj.phone);
      this.$set(this.workOrderForm, "age", currentOldPeopleObj.age);
      this.$set(this.workOrderForm, "address", currentOldPeopleObj.address);
    },
    async getInputTableOnLoad(page, value, data, callback, type, formIndex) {
      //分页查询信息
      let pageData = await this.getInputTableList(
        page,
        value,
        data,
        type,
        formIndex
      );
      callback(pageData);
    },
    //查询老人列表
    getInputTableList(page, value, data, type, formIndex) {
      let params = {};
      if (value) {
        params.id = value;
      }
      if (data) {
        params = { ...params, ...data };
      }
      return new Promise((resolve) => {
        let currentPage = page ? page.currentPage : 1;
        let pageSize = page ? page.pageSize : 10;
        let funName = "";
        if (type == 1) {
          funName = getElderPage;
        } else if (type == 2) {
          funName = principalPage;
        } else if (type == 3) {
          funName = doctorPage;
        }
        funName(currentPage, pageSize, params).then((res) => {
          const data = res.data.data;
          let result = data.records[0];
          //获取数值化的值
          if (value) {
            if (type == 1) {
              this.setCurrentOldPeople(result);
            } else if (type == 2) {
              this.workOrderForm.workOrders[formIndex].taskUserPhone =
                result.phone;
            } else if (type == 3) {
              this.workOrderForm.workOrders[formIndex].doctorPhone =
                result.phone;
            }
            resolve(result);
            return;
          } else {
            //分页查询信息
            resolve({
              total: data.total,
              data: data.records,
            });
          }
        });
      });
    },
  },
};
</script>