byte-sailing-mobile/src/views/MES/produceManage/completeProject1/index.vue

<template>
  <div style="padding-bottom: 60px">
    <van-nav-bar title="完工入库" left-text="" left-arrow>
      <template #right> 添加 </template>
    </van-nav-bar>
    <van-search v-model="req.keyword" placeholder="请输入搜索关键词" />
    <testForm
      v-model="formData.data"
      :formOption="formOption"
      :formConfig="formConfig"
      :rules="rules"
      @onSubmit="onSubmit"
      ref="formDom"
    ></testForm>
  </div>
</template>
<script setup>
import { ref, getCurrentInstance, onMounted, reactive } from "vue";
import commonList from "@/components/common-list.vue";
import { useRoute } from "vue-router";
import testForm from "@/components/testForm/index.vue";
const loading = ref(false);
const router = useRoute();
const req = ref({
  pageNum: 1,
  keyword: null,
});
const finished = ref(false);
const classification = ref([]);
const proxy = getCurrentInstance().proxy;
const formDom = ref(null);
const formOption = reactive({
  readonly: false, //用于控制整个表单是否只读
  disabled: false,
  labelAlign: "top",
  scroll: true,
  labelWidth: "62pk",
  // hiddenSubmitBtn: true,
  btnConfig: {
    isNeed: true,
    label: "明细",
    prop: "list",
    plain: true,
    // itemType: "default",
    listConfig: [
      {
        type: "input",
        itemType: "text",
        label: "姓名",
        prop: "name",
        clearable: true,
        readonly: true,
      },
      {
        type: "picker",
        label: "选择器",
        prop: "select",
        itemType: "onePicker",
        showPicker: false,
        readonly: false,
        // 指定label、value
        fieldNames: {
          text: "att",
          value: "id",
        },
        pickerOption: {
          columns: [
            {
              att: "ceshi",
              id: "1",
            },
            {
              att: "ceshi1",
              id: "2",
            },
          ],
        },
      },
      {
        type: "picker",
        label: "时间选择器",
        prop: "date",
        itemType: "datePicker",
        showPicker: false,
        split: "-", //时间分隔符
        columnsType: ["year", "month"], //只选年月
      },
    ],
    clickFn: () => {
      formData.data.list.push({
        name: "cz",
      });
    },
  },
});

const formConfig = reactive([
  {
    type: "input",
    itemType: "text",
    label: "姓名",
    prop: "name",
    clearable: true,
  },
  {
    type: "input",
    itemType: "textarea",
    label: "富文本",
    prop: "reamlke",
  },
  {
    type: "input",
    itemType: "password",
    label: "密码",
    prop: "password",
  },
  // {
  //   type: "switch",
  //   label: "开关",
  //   prop: "switch1",
  // },
  // {
  //   type: "checkbox",
  //   label: "复选框组",
  //   prop: "checkbox",
  //   data: [
  //     {
  //       text: "1",
  //       value: "1",
  //     },
  //     {
  //       text: "2",
  //       value: "2",
  //     },
  //   ],
  // },
  // {
  //   type: "radio",
  //   label: "单选框",
  //   prop: "radio",
  //   data: [
  //     {
  //       label: "dan1",
  //       id: "10",
  //     },
  //     {
  //       title: "dan2",
  //       value: "20",
  //     },
  //   ],
  // },
  {
    type: "picker",
    label: "选择器",
    prop: "select",
    itemType: "onePicker",
    showPicker: false,
    fieldNames: {
      text: "label",
      value: "id",
    },
    pickerOption: {
      columns: [
        {
          label: "值1",
          id: "1",
        },
        {
          label: "值2",
          id: "2",
        },
      ],
    },
  },
  {
    type: "picker",
    label: "时间选择器",
    prop: "date",
    itemType: "datePicker",
    showPicker: false,
    split: "-",
    columnsType: ["year", "month"], //只选年月
  },
  {
    type: "cascader",
    label: "通用级联",
    prop: "common",
    itemType: "common",
    showPicker: false,
    // options: classification.value,
    options: [],
    fieldNames: {
      text: "label",
      value: "id",
      children: "children",
    },
    // onChangeFn: (option) => {
    //   // console.log("aa");
    // },
    // finishFn: (current, option) => {
    //   current.showPicker = false;
    // },
  },
  {
    type: "cascader",
    label: "城市",
    prop: "city",
    itemType: "city",
    showPicker: false,
  },
  {
    type: "upload",
    label: "上传qqq",
    prop: "fileList",
  },
  // {
  //   type: "slot",
  //   slotName: "测试",
  //   label: "1646",
  // },
]);
const rules = {
  name: [{ required: true, message: "请填写姓名" }],
  password: [{ required: true, message: "请填写密码" }],
  reamlke: [{ required: true, message: "请填写备注" }],
  checkbox: [{ required: true, message: "请选择" }],
  radio: [{ required: true, message: "请选择" }],
  select: [{ required: true, message: "请选择" }],
  date: [{ required: true, message: "请选择时间" }],
  common: [{ required: true, message: "请选择级联" }],
  // city: [{ required: true, message: "请选择城市" }],
};
const formData = reactive({
  data: {
    name: "scz",
    password: "123456789",
    reamlke: "beizhu回显",
    select: "1",
    date: "2022-01-09",
    common: "1651135364980989953",
    city: "22",
    cityName: "合肥",
    // fileList: [
    //   {
    //     url: "https://os.winfaster.cn/byteSailing/test/2023/04/25/2e13ecba1978472d9e97fcec6335c975.png",
    //     fileName: "board-2.png",
    //   },
    // ],
    list: [
      {
        name: "qqq",
        select: "1",
        date: "2022-01",
      },
      {
        name: "www",
        select: "2",
        date: "2023-01",
      },
    ],
  },
});
const onSubmit = () => {
  // 城市级联选择器和上传附件数据需手动赋值
  if (formData.data.fileList && formData.data.fileList.length > 0) {
    formData.data.fileList = formData.data.fileList.map((item) => ({
      id: item.id,
      fileName: item.fileName,
    }));
  } else {
    formData.data.fileList = [];
  }
  if (formData.data.cityObj) {
    formData.data.countryId =
      formData.data.cityObj.selectedOptions[0].value;
    formData.data.provinceId =
      formData.data.cityObj.tabIndex === 2
        ? formData.data.cityObj.selectedOptions[1].value
        : null;
    formData.data.cityId =
      formData.data.cityObj.tabIndex === 1
        ? formData.data.cityObj.selectedOptions[1].value
        : formData.data.cityObj.selectedOptions[2].value;
  }
  console.log(formData.data, "wssa");
};
// getList();

onMounted(() => {
  proxy
    .post("/productClassify/tree", { parentId: "", name: "", definition: "1" })
    .then((res) => {
      classification.value = res.data;
      const index = formConfig.findIndex(
        (x) => x.type == "cascader" && x.itemType == "common"
      );
      formConfig[index].options = classification.value;
      formDom.value.formDataInit(true);
    });
});
</script>

<style lang="scss" scoped>
.list {
  min-height: 70vh;
}
</style>