vue3 弹窗 表格选择 回显插件

<template>
  <div class="app-container">
    <el-dialog :model-value="visiblechild"
               width="60%"
               :before-close="handleClose"
               title="适用商品类型">
      <el-row :gutter="24">
        <!--用户数据-->
        <el-col :span="24"
                :xs="24">
          <el-form ref="queryRef"
                   :inline="true"
                   label-width="68px">
            <el-form-item :label="params.name1"
                          prop="name">
              <el-input v-model="name"
                        :placeholder="'请输入'+params.name1"
                        clearable
                        size="small"
                        style="width: 240px"
                        @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item :label="params.name2"
                          prop="description">
              <el-input v-model="description"
                        :placeholder="'请输入'+params.name2"
                        clearable
                        size="small"
                        style="width: 240px"
                        @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary"
                         icon="Search"
                         size="mini"
                         @click="handleQuery">搜索</el-button>
              <el-button icon="Refresh"
                         size="mini"
                         @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>

          <el-table :data="params.list"
                    ref="asTable"
                    @select="handleSelect">
            <el-table-column type="selection"
                             width="50"
                             align="center" />
            <el-table-column :label="params.name1"
                             align="center"
                             prop="name" />
            <el-table-column :label="params.name2"
                             align="center"
                             prop="description" />
          </el-table>
          <pagination v-show="params.total>0"
                      v-model:total="params.total"
                      @current-change="handleCurrentChange"
                      v-model:page="page"
                      v-model:limit="limit"
                      @pagination="getList" />
        </el-col>
      </el-row>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary"
                     @click="submit">确 定</el-button>
          <el-button @click="handleClose">取 消</el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>

<script setup>

import { getCurrentInstance, nextTick } from "vue-demi";
const { proxy } = getCurrentInstance()
const props = defineProps({
  visiblechild: {
    type: Boolean,
    default: false,
  },
  page: {
    type: Number,
  },
  limit: {
    type: Number,
  },
  total: {
    type: Number,
  },
  name: {
    type: String
  },
  description: {
    type: String
  },
  params: {
    type: Object,
    default: { name1: '', name2: '', list: [], total: 0, allSelectValue: [] },
  },
  searchParams: {
    type: Array,
  }
})
const emit = defineEmits(['submitCallback', 'getChildList', "update:page", "update:limit", "update:name", "update:description"])
const multipleSelection = ref([]); //选中
const multipleSelectionName = ref([]); //选中
let allMultipleSelection = ref([])
const allMultipleSelectionName = ref([])
const asTable = ref(null)
const uniqueKey = ref("id")

function getList () {
  emit("update:page", proxy.page);
  emit("update:limit", proxy.limit);
  emit("getChildList")

  setTimeout(() => {
    setSelectedRow()
  }, 900)

}
/** 搜索按钮操作 */
function handleQuery () {
  emit("update:name", proxy.name);
  emit("update:description", proxy.description);
  emit("update:page", 1);
  emit("update:limit", proxy.limit);
  emit("getChildList")
}
/** 重置按钮操作 */
function resetQuery () {
  emit("update:name", undefined);
  emit("update:description", undefined);
  emit("update:page", 1);
  emit("update:limit", proxy.limit);
  emit("getChildList")
}

function handleSelect (selections, row) {

  var selected = selections.filter(item => {
    if (item.id == row.id) {
      return row
    }
  }).length > 0 ? true : false;
  if (selected) {
    allMultipleSelection.value = allMultipleSelection.value.concat(row);
  }
  else {
    for (let i in allMultipleSelection.value) {
      if (allMultipleSelection.value[i].id === row.id) {
        allMultipleSelection.value.splice(i, 1);
      }
    }
  }
}

function setSelectedRow () {
  // 设置当前页已选项
  //TODO: improve by filter
  var temp = allMultipleSelection.value.map(item => {
    return item.id;
  });

  proxy.params.list.forEach(item => {
    if (temp.includes(item[uniqueKey.value])) {
      nextTick(() => {
        asTable.value.toggleRowSelection(item, true)
      })
    }
  })
}

function handleCurrentChange () {
  getList()
}
function setSelections (data) {
  allMultipleSelection.value = data;
  setTimeout(() => {
    console.log('nextTick')
    setSelectedRow()
  }, 400)
}
function submit () {
  emit("update:visiblechild", false);
  emit('submitCallback', allMultipleSelection.value);
}
function handleClose () {
  emit("update:visiblechild", false);
}
onMounted(() => {
  getList()
})
defineExpose({ setSelections })
</script>

<template>
  <div class="app-container">
    <el-row :gutter="10"
            class="mb8">
      <el-col :span="1.5">
        <el-button type="primary"
                   plain
                   icon="Plus"
                   size="mini"
                   @click="handleAdd"
                   v-hasPermi="['system:productType:add']">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success"
                   plain
                   icon="Edit"
                   size="mini"
                   :disabled="single"
                   @click="handleUpdate"
                   v-hasPermi="['system:productType:edit']">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger"
                   plain
                   icon="Delete"
                   size="mini"
                   :disabled="multiple"
                   @click="handleDelete"
                   v-hasPermi="['system:productType:remove']">删除</el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch"
                     @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading"
              :data="productTypeList"
              @selection-change="handleSelectionChange">
      <el-table-column type="selection"
                       width="55"
                       align="center" />
      <el-table-column label="活动名称"
                       align="center"
                       prop="activityName"
                       :show-overflow-tooltip="true" />
      <el-table-column label="产品名称"
                       align="center"
                       :show-overflow-tooltip="true">
        <template #default="scope">
          <span v-for="item in scope.row.itemInPromotions">
            {{item.name}}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="每人限购"
                       align="center"
                       prop="limit"
                       :show-overflow-tooltip="true" />
      <el-table-column label="开始时间"
                       align="center"
                       prop="startTime"
                       :show-overflow-tooltip="true" />
      <el-table-column label="结束时间"
                       align="center"
                       prop="endTime"
                       :show-overflow-tooltip="true" />
      <el-table-column label="活动类型"
                       align="center"
                       prop="model"
                       :show-overflow-tooltip="true" />
      <el-table-column label="狀态"
                       align="center"
                       prop="status"
                       :show-overflow-tooltip="true" />
      <el-table-column label="创建时间"
                       align="center"
                       prop="createdDate"
                       :show-overflow-tooltip="true" />
      <el-table-column label="操作"
                       align="center"
                       class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button size="mini"
                     type="text"
                     icon="Edit"
                     @click="handleUpdate(scope.row)"
                     v-hasPermi="['system:productType:edit']">修改</el-button>
          <el-button size="mini"
                     type="text"
                     icon="Delete"
                     @click="handleDelete(scope.row)"
                     v-hasPermi="['system:productType:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0"
                :total="total"
                v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize"
                @pagination="getList" />

    <!-- 添加或修改公告对话框 -->
    <el-dialog :title="title"
               v-model="open"
               width="780px"
               append-to-body>
      <el-form ref="productTypeRef"
               :model="form"
               :rules="rules"
               label-width="120px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="活动名称"
                          prop="activityName">
              <el-input v-model="form.activityName"
                        placeholder="请输入活动名称" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="活动內容"
                          prop="content">
              <el-input v-model="form.content"
                        placeholder="请输入活动內容" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="活动类型">
              <el-radio-group v-model="form.promotionType">
                <el-radio :label="0">价格优惠</el-radio>
                <el-radio :label="1">折扣优惠</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <span v-if="form.promotionType==1">
              <el-form-item label="活动折扣"
                            prop="ratio">
                <el-input v-model="form.ratio"
                          placeholder="请输入活动折扣" />
              </el-form-item>
            </span>
          </el-col>
          <el-col :span="24">
            <span v-if="form.promotionType==0">
              <el-form-item label="活动价格"
                            prop="fixedAmount">
                <el-input v-model="form.fixedAmount"
                          placeholder="请输入活动价格" />
              </el-form-item>
            </span>
          </el-col>
          <el-col :span="24">
            <el-form-item label="每人限购"
                          prop="limit">
              <el-input v-model="form.limit"
                        placeholder="请输入每人限购数量" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <span v-if="modelId==104">
              <el-form-item label="成团人数"
                            prop="groupNum">
                <el-input v-model="form.groupNum"
                          placeholder="请输入成团人数" />
              </el-form-item>
            </span>

          </el-col>
          <el-col :span="24">
            <span v-if="modelId==104">
              <el-form-item label="成团后送优币"
                            prop="groupCommission">
                <el-input v-model="form.groupCommission"
                          placeholder="请输入成团后送优币数量" />
              </el-form-item>
            </span>

          </el-col>
          <el-col :span="24">
            <el-form-item label="活动产品数量"
                          prop="quantity">
              <el-input v-model="form.quantity"
                        placeholder="请输入活动产品数量" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="开始时间">
              <el-date-picker v-model="form.startTime"
                              type="datetime"
                              format="YYYY-MM-DD HH:mm:ss"
                              value-format="YYYY-MM-DD HH:mm:ss"
                              placeholder="请选择开始时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="结束时间">
              <el-date-picker v-model="form.endTime"
                              type="datetime"
                              format="YYYY-MM-DD HH:mm:ss"
                              value-format="YYYY-MM-DD HH:mm:ss"
                              placeholder="请选择结束时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <div class="onlyBox"
                 @click="openDialog()">
              <el-form-item label="活动商品">
                <el-input v-model="productNames"
                          type="textarea"
                          placeholder="请点击选择" />
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="24">
            <el-form-item label="用户可参与范围">
              <el-radio-group v-model="form.typeId">
                <el-radio :label="'仅限会员'">仅限会员</el-radio>
                <el-radio :label="'所有用户'">所有用户</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <span v-show="form.typeId=='仅限会员'">
              <el-form-item label="用户可参与角色">
                <el-select v-model="form.threshold"
                           multiple
                           placeholder="请选择">
                  <el-option v-for="item in roleOptions"
                             :key="item.id"
                             :label="item.name"
                             :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </span>

          </el-col>
        </el-row>
      </el-form>
      <searchDialog ref="sonRef"
                    :params="childParams"
                    :searchParams="searchParams"
                    v-model:limit="childqueryParams.pageSize"
                    v-model:description="childqueryParams.description"
                    v-model:name="childqueryParams.name"
                    v-model:page="childqueryParams.pageIndex"
                    v-model:visiblechild="childDialogvisible"
                    @getChildList="getChildrenList"
                    @submitCallback="submitCallback">
      </searchDialog>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary"
                     @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="ProductType">
import { listPromotion, getPromotion, addPromotion, updatePromotion, delPromotion } from "@/api/system/promotion/promotion";
import { listRole } from "@/api/system/member/role"
import { listProductSpecification } from "@/api/system/product/productSpecification";
import searchDialog from '@/components/searchDialog/index.vue'; // 导入子组件
import { nextTick } from "vue-demi";
const { proxy } = getCurrentInstance();
const props = defineProps({
  modelId: {
    type: Number,
  },
  queryParams: {
    type: Object,
  }
})

const productTypeList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const roleOptions = ref([]);

const sonRef = ref(null)
const childDialogvisible = ref(false)
const productNames = ref([])
const data = reactive({
  form: {},
  childParams: {
    list: [],
    total: 0,
    name1: "产品名称",
    name2: "规格名称",
  },
  searchParams: [{ name: '产品名称', value: "name" }, { name: '规格名称', value: "description" }],
  childqueryParams: {
    pageIndex: 1,
    pageSize: 10,
    description: undefined,
    name: undefined,
  },
  rules: {
  },
});

let { form, childParams, searchParams, childqueryParams, rules } = toRefs(data);

function getOptions () {
  listRole().then(response => {
    console.log(response)
    roleOptions.value = response.content
    // options.value = response.content.map((item) => {
    //   return { value: item.id, label: item.name }
    // });
  });
}

/** 查询公告列表 */
function getList () {
  loading.value = true;
  proxy.queryParams.pageIndex = proxy.queryParams.pageIndex - 1;
  listPromotion(proxy.queryParams).then(response => {
    proxy.queryParams.pageIndex = proxy.queryParams.pageIndex + 1;
    let data = response.content
    productTypeList.value = data
    total.value = response.totalElements;
    loading.value = false;
  });
}
/** 取消按钮 */
function cancel () {
  open.value = false;
  reset();
}
/** 表单重置 */
function reset () {
  form.value = {
    activityName: undefined,
    promotionType: 0,
    content: undefined,
    fixedAmount: undefined,
    ratio: undefined,
    limit: undefined,
    groupNum: undefined,
    groupCommission: undefined,
    quantity: undefined,
    startTime: undefined,
    endTime: undefined,
    typeId: undefined,
  };
  proxy.resetForm("productTypeRef");
}
/** 搜索按钮操作 */
function handleQuery () {
  proxy.queryParams.pageNum = 0;
  getList();
}
/** 重置按钮操作 */
function resetQuery () {
  proxy.resetForm("queryRef");
  handleQuery();
}
/** 多选框选中数据 */
function handleSelectionChange (selection) {
  ids.value = selection.map(item => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

/** 新增按钮操作 */
function handleAdd () {
  reset();
  open.value = true;
  title.value = "添加";
}
/**修改按钮操作 */
function handleUpdate (row) {
  reset();
  const productTypeId = row.id || ids.value;
  getPromotion(productTypeId).then(response => {
    delete (response["model"]);
    response.promotionType = response.ratio ? 1 : 0;
    let arr = []
    for (let i of response.itemInPromotions) {
      arr.push(i.item.name)
    }
    productNames.value = arr.toString()
    response.itemInPromotions = response.itemInPromotions.map(i => {
      return { id: i.item.id, name: i.item.name, quality: 1 }
    })
    form.value = response;
    open.value = true;
    title.value = "修改";
  });
}
/** 提交按钮 */
function submitForm () {
  proxy.$refs["productTypeRef"].validate(valid => {
    if (valid) {
      if (form.value.id != undefined) {
        updatePromotion(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
      } else {
        addPromotion(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
      }
    }
  });
}
/** 删除按钮操作 */
function handleDelete (row) {
  const productTypeIds = row.id || ids.value
  //proxy.$modal.confirm('是否确认删除为"' + productTypeIds + '"的数据项？').then(function() {
  proxy.$modal.confirm('是否确认删除').then(function () {
    return delPromotion(productTypeIds);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => { });
}
//打开组件弹窗
function openDialog () {
  getChildrenList()
  childDialogvisible.value = true
  nextTick(() => {
    sonRef.value.setSelections(form.value.itemInPromotions)
  })

}
//请求组件数据
function getChildrenList () {
  childqueryParams.value.pageIndex = childqueryParams.value.pageIndex - 1;
  listProductSpecification(childqueryParams.value).then(res => {
    childqueryParams.value.pageIndex = childqueryParams.value.pageIndex + 1;
    childParams.value.list = res.content
    childParams.value.total = res.totalElements;
  })
}
//子组件传来的值
function submitCallback (selections) {
  productNames.value = selections.map(item => {
    return item.name;
  }).join(", ")
  form.value.itemInPromotions = selections;
}
getOptions();
getList();
</script>