日常总结-vue3

表单套表格套表格

 <el-form :model="form" label-width="80px" :rules="rules" ref="ruleFormRef">
      <el-form-item prop="daytime" label="日期" class="display">
        <el-date-picker v-model="form.daytime" type="date" placeholder="请选择日期" format="YYYY-MM-DD"
          value-format="YYYY-MM-DD" style="width: 100%" :disabled="dayTimeBtn" />
      </el-form-item>
      <el-form-item prop="status" label="异常状况" class="display">
        <el-input v-model="form.status" type="textarea" placeholder="请输入异常状况" />
      </el-form-item>
      <el-form-item prop="think" label="精进想法" class="display">
        <el-input type="textarea" v-model="form.think" placeholder="请输入精进想法" />
      </el-form-item>
      <div style="
          width: 100%;
          border: 1px solid rgba(0, 0, 0, 0.1);
          border-radius: 5px;
          margin-bottom: 10px;
        ">
        <span
          style="display: inline-block;  text-align: center;  width: 100%;  margin-top: 5px;  font-size: 20px;">单据明细</span>
        <div>
          <el-form ref="data" label-width="auto" style="width: 98%; margin: 5px auto" class="mar-auto">
            <el-table border :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }"
              :data="studentData" ref="tableRef" style="width: 100%">
              <el-table-column width="40" label="操作">
                <template #default="scope">
                  <el-button @click="handleDeleteRow(studentData[scope.$index])" type="text" :icon="Delete"
                    size="large"></el-button>
                </template>
              </el-table-column>
              <el-table-column align="center" label="店号" width="85">
                <template #default="scope">
                  <el-form-item :prop="scope.$index + '.dept_num'">
                    <el-input v-model="studentData[scope.$index].dept_num" placeholder="请输入店号搜索"
                      :disabled="studentData[scope.$index].disabledDept" @input="handleDept(scope.$index, $event)" />
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column align="center" label="店名" width="160">
                <template #default="scope">
                  <el-form-item :prop="scope.$index + '.dept'">
                    <el-input v-model="studentData[scope.$index].dept" placeholder="请输入店名" disabled />
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column align="center" label="销售psd" width="160">
                <template #default="scope">
                  <el-form-item :prop="scope.$index + '.psd'">
                    <el-input v-model="studentData[scope.$index].psd"
                      @input="handleInputs(scope.$index, studentData[scope.$index].psd)" placeholder="请输入销售psd">
                      <template #append>元</template>
                    </el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column align="center" label="商品自编码" width="110">
                <template #default="scope">
                  <template v-for="product in studentData[scope.$index].mean" :key="product.id">
                    <el-form-item :prop="`${scope.$index}.mean.${studentData[scope.$index].mean.indexOf(product)}.zbm`"
                      class="el-form-item-only">
                      <el-input v-model="product.zbm" autocomplete="off" size="small"
                        @change="handlerPageNo(scope.$index, product.ids, $event)" maxlength="7"
                        placeholder="商品自编码"></el-input>
                    </el-form-item>
                  </template>
                </template>
              </el-table-column>
              <el-table-column align="center" label="商品名称" width="150">
                <template #default="scope">
                  <template v-for="product in studentData[scope.$index].mean" :key="product.id">
                    <el-form-item
                      :prop="`${scope.$index}.mean.${studentData[scope.$index].mean.indexOf(product)}.names`"
                      class="el-form-item-only">
                      <el-input v-model="product.names" autocomplete="off" size="small" placeholder="商品名称"
                        disabled></el-input>
                    </el-form-item>
                  </template>
                </template>
              </el-table-column>

              <el-table-column align="center" label="数量" width="60">
                <template #default="scope">
                  <template v-for="product in studentData[scope.$index].mean" :key="product.id">
                    <el-form-item
                      :prop="`${scope.$index}.mean.${studentData[scope.$index].mean.indexOf(product)}.number`"
                      class="el-form-item-only">
                      <el-input v-model="product.number" autocomplete="off" size="small" placeholder="数量"
                        @input="handleinput(scope.$index, product.number, product.ids)"></el-input>
                    </el-form-item>
                  </template>
                </template>
              </el-table-column>
              <el-table-column align="center" label="删除" width="40" class-name="tableStyle">
                <template #default="scope">
                  <template v-for="product in studentData[scope.$index].mean" :key="product.id">
                    <el-button @click="handleDeletes(scope.$index, product.ids)" type="text" :icon="Delete"
                      style="display: block;" size="large"></el-button>
                  </template>
                </template>
              </el-table-column>
              <el-table-column align="center" label="添加" width="40">
                <template #default="scope">
                  <el-button @click="handlAdds(scope.$index)" type="text" :icon="Plus" size="large"></el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form>
          <div style="width: 100%; text-align: center">
            <el-button type="primary" plain size="mini" @click="addRow()" :icon="Plus"
              style="margin-bottom: 5px">添加单据明细</el-button>
          </div>
        </div>
      </div>
    </el-form>

const form = ref<RuleForm>({
  psd: "",
  daytime: "",
  status: "",
  think: "",
  mean: "",
});
// 表单数据
const studentData = reactive([
  {
    key: 0,
    mean: [{ ids: 0, zbm: "", names: "", number: "" }],
    dept: "",
    dept_num: "",
    psd: "",
    disabledDept: false
  },
])
// 新增行
const addRow = () => {
  let index = studentData.length;
  studentData.push({
    key: index,
    mean: [{ ids: 0, zbm: "", names: "", number: "" }],
    dept: "",
    dept_num: "",
    psd: "",
    disabledDept: false
  });
}
// 删除行
const handleDeleteRow = (row: any) => {
  let datas = studentData;
  for (var i = 0; i < datas.length; i++) {
    if (datas[i].key == row.key) {
      datas.splice(i, 1);
    }
  }
}
// 删除商品自编码
const handleDeletes = (rowIndex: number, productIndex: number) => {
  // 直接对 studentData 中指定索引的 mean 数组进行过滤
  studentData[rowIndex].mean = studentData[rowIndex].mean.filter(item => item.ids !== productIndex);
};
// 添加商品自编码
const handlAdds = (index: any) => {
  let indexs = studentData[index].mean.length
  const randomCount = Math.floor(Math.random() * 1) + 1;
  for (let i = 0; i < randomCount; i++) {
    const newProduct = {
      ids: indexs,
      zbm: '',
      names: '',
      number: ''
    };
    studentData[index].mean.push(newProduct);
  }
}

表头下拉搜索

<div v-if="search_tag_s_h" style="font-size: 14px;margin-top: 10px">
      已搜索：
      <el-tag v-for="(tag, key, i) in form" :key="key" closable size="default" type="success"
        :disable-transitions="false" @close="search_Close(tag, key)" style="margin: 0 5px 0 0">
        {{ search_tag[i] }}：{{ tag }}
      </el-tag>
      <el-button @click="resetForm('search_form')">重置</el-button>
    </div>
<el-table ref="tableRef" :data="tableData"  highlight-current-row border  style="width: 100%">
    <el-table-column width="35" align="center" type="index" label="序" fixed>
      <template #default="scope"> 
        <span> {{ getIndex(scope.$index) }} </span>
      </template>
    </el-table-column>
	<el-table-column width="90" prop="daytime" align="center" label="日期" sortable="custom">
      <template #header>
        <span>
          日期
          <el-popover ref="popover_daytime" placement="bottom" :width="120" trigger="click" @hide="handleSearch">
            <template #reference>
              <el-icon style="top: 3px; cursor: pointer" @click.stop>
                <ArrowDown />
              </el-icon>
            </template>
            <template #default>
              <el-date-picker v-model="form.daytime" type="date" placeholder="请选择日期" format="YYYY-MM-DD"
                value-format="YYYY-MM-DD" @change="handleSearch" style="width: 100%;" />
            </template>
          </el-popover>
        </span>
      </template>
    </el-table-column>
 <el-table/>

const getList = () => {
  transformedData.value = []
  var form_val = form.value;
  console.log(form.value, form_val.daytime, 111);
  // 主表
  if (form_val.daytime == "") {
    form.value.daytime = updateTime()
  }
  for (let key in form_val) {
    if (form_val[key] == "" || form_val[key] == null) {
      delete form_val[key];
    }
  }
  if (JSON.stringify(form_val) == "{}") {
    search_tag_s_h.value = false;
  } else {
    search_tag_s_h.value = true;
    search_tag.value = [];
    for (let key in form_val) {
      console.log(key)
      if (key == "daytime") {
        search_tag.value.push("日期");
      } else if (key == "people") {
        search_tag.value.push("值守人");
      } else if (key == "dept") {
        search_tag.value.push("店名");
      } else {
        search_tag.value.push("店号");
      }
    }
  } 
  var params = {
    pageNumber: pageNumber.value,
    pageSize: pageSize.value,
    sortName: sortName.value,
  } 
  API({
    url: "******",
    method: "get",
    params: params,
    headers: {
      "content-type": "multipart/form-data",
    },
  }).then(res => {
    if (res.data.code == 200) {
      res.data.data.forEach((item: any) => {
        if (item.info.length === 0) {
          transformedData.value.push({ ...item, info: undefined });
        } else {
          item.info.forEach((infoItem: any) => {
            const newItem = { ...item, ...infoItem, info: undefined };
            transformedData.value.push(newItem);
          });
        }
      });
      tableData.value = transformedData.value;
      total.value = res.data.count
      // 合并单元格
      spanArr.value = [];
      for (let i = 0; i < tableData.value.length; i++) {
        if (i === 0) {
          spanArr.value.push(1);
          pos.value = 0;
        } else {
          if (tableData.value[i].daytime === tableData.value[i - 1].daytime && tableData.value[i].people === tableData.value[i - 1].people) {
            spanArr.value[pos.value]++;
            spanArr.value.push(0)
          } else {
            spanArr.value.push(1);
            pos.value = i;
          }
        }
      }
      // 强制刷新表单
      nextTick(() => {
        if (tableRef.value) {
          tableRef.value.doLayout();
        }
      });
    }
  })
}
// 获取正确的序号
const getIndex = (index: number) => {
  if (spanArr.value[index] > 0) {
    let count = 0;
    for (let i = 0; i < index; i++) {
      if (spanArr.value[i] > 0) {
        count++;
      }
    }
    // 加上当前页码和每页数量的影响
    return (pageNumber.value - 1) * pageSize.value + count + 1;
  }
  return '';
};
const search_Close = (tag, key) => {
  form.value[key] = ""; getList();
};