提交right-toolbar组件事件调用计划运行模块

chengxiangling

2025-05-16 444ba76f4cca8a9df3faf61ab33ec631aec7fbba

 src/views/basicData/apsPlant/index.vue

@@ -40,35 +40,26 @@
          v-hasPermi="['plant:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
      <right-toolbar :search="false" 
        @refreshTable="getList"
      ></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="aps_plantList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="工厂名称" align="center" prop="plantName" />
      <el-table-column label="工厂编码" align="center" prop="plantCode" />
      <el-table-column label="启用状态" align="center" prop="status">
        <template #default="scope">
          <dict-tag :options="aps_plant_status" :value="scope.row.status"/>
        </template>
      </el-table-column>
      <el-table-column label="创建者" align="center" prop="createBy" />
      <el-table-column label="创建时间" align="center" prop="createTime" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['plant:edit']">修改</el-button>
<!--          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['aps_plant:aps_plant: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"
    />
    <HxlhTable
        style="width: 100%"
        :columns="columns"
        :data="aps_plantList"
        :loading="loading"
        :height="height"
        :page="page"
        @changePageNo="changePageNo"
        @changePageSize="changePageSize"
        @on-checkbox="handleCheckboxChange"
    >
      <template #buttons="{row}">
        <vxe-button mode="text" @click="handleUpdate(row)" v-hasPermi="['plant:edit']" >编辑</vxe-button>
      </template>
    </HxlhTable>

    <!-- 添加或修改工厂管理对话框 -->
    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
@@ -78,7 +69,7 @@
          <el-input v-model="form.plantName" placeholder="请输入工厂名称" />
        </el-form-item>
        <el-form-item label="工厂编码" prop="plantCode">
          <el-input v-model="form.plantCode" placeholder="请输入工厂编码"     :disabled=disabled />
          <el-input v-model="form.plantCode" placeholder="请输入工厂编码" :disabled=disabled />
        </el-form-item>
        <el-form-item label="启用状态" prop="status">
          <el-radio-group v-model="form.status">
@@ -102,10 +93,14 @@

<script setup name="Aps_plant">
import { listAps_plant, getAps_plant, delAps_plant, addAps_plant, updateAps_plant } from "@/api/basicData/plant";
import HxlhTable from '@/components/HxlhTable'

const { proxy } = getCurrentInstance();
const { aps_plant_status } = proxy.useDict('aps_plant_status');

const height = ref(document.documentElement.clientHeight - 160 + "px;");
const plantNameRules = ref(null);
const plantCodeRules = ref(null);
const dataForm = ref();
const aps_plantList = ref([]);
const open = ref(false);
const loading = ref(true);
@@ -113,7 +108,6 @@
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const disabled = ref(false);
const data = reactive({
@@ -128,9 +122,53 @@
  rules: {
    plantName: [
      { required: true, message: "工厂名称不能为空", trigger: "blur" },
      {
        validator: async (rule, value, callback) => {
          if (!value) {
            return callback();
          }
          try {
            if(value === plantNameRules.value){
              callback();
            }else{
              const isExists = await checkPlantNameExists(value);
              if (isExists) {
                return callback(new Error('该工厂名称已存在，请更换'));
              } else {
                callback();
              }
            }
          } catch (error) {
            return callback(new Error('校验用户名时发生错误，请稍后重试'));
          }
        },
        trigger: 'blur'
      }
    ],
    plantCode: [
      { required: true, message: "工厂编码不能为空", trigger: "blur" },
      {
        validator: async (rule, value, callback) => {
          if (!value) {
            return callback();
          }
          try {
            if(value === plantCodeRules.value){
              callback();
            }else{
              const isExists = await checkPlantCodeExists(value);
              if (isExists) {
                return callback(new Error('该工厂编码已存在，请更换'));
              } else {
                callback();
              }
            }
          } catch (error) {
            return callback(new Error('校验用户名时发生错误，请稍后重试'));
          }
        },
        trigger: 'blur'
      }
    ],
    status: [
      { required: true, message: "启用状态不能为空", trigger: "blur" },
@@ -140,12 +178,46 @@

const { queryParams, form, rules } = toRefs(data);

// 分页属性
const page = ref({
  total: 0,
  current: 1,
  size: 10
});

// 表格配置 
const columns = ref([
  { type: 'checkbox', width: 60, align:"center"},
  { type: 'seq', title: '序号', width: 60 },
  {
    title: '工厂名称',
    field: 'plantName',
  },
  {
    title: '工厂编码',
    field: 'plantCode',
  },
  {
    title: '启用状态',
    field: 'status',
  },
  {
    title: '创建者',
    field: 'createBy',
  },
  {
    title: '创建时间',
    field: 'createTime',
  },
  { title: '操作', width: 100, fixed:"right", slots: { default: 'buttons' } }
]);

/** 查询工厂管理列表 */
function getList() {
  loading.value = true;
  listAps_plant(queryParams.value).then(response => {
    aps_plantList.value = response.rows;
    total.value = response.total;
    page.value.total = response.total;
    loading.value = false;
  });
}
@@ -169,10 +241,13 @@
    updateTime: null
  };
  proxy.resetForm("aps_plantRef");
  plantNameRules.value = null;
  plantCodeRules.value = null;
}

/** 搜索按钮操作 */
function handleQuery() {
  page.value.current = 1;
  queryParams.value.pageNum = 1;
  getList();
}
@@ -204,15 +279,18 @@
  const _id = row.id || ids.value
  disabled.value = true;
  getAps_plant(_id).then(response => {
    dataForm.value = response.data;
    form.value = response.data;
    open.value = true;
    title.value = "修改工厂管理";
    plantNameRules.value = form.value.plantName;
    plantCodeRules.value = form.value.plantCode;
  });
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["aps_plantRef"].validate(valid => {
const submitForm = async () => {
  await proxy.$refs["aps_plantRef"].validate(valid => {
    if (valid) {
      if (form.value.id != null) {
        updateAps_plant(form.value).then(response => {
@@ -249,5 +327,57 @@
  }, `aps_plant_${new Date().getTime()}.xlsx`)
}

/** 检查工厂名字重复 */
const checkPlantNameExists = async (value) => {
  return new Promise((resolve) => {
    queryParams.value = {};
    queryParams.value.plantName = value;
    listAps_plant(queryParams.value).then(response => {
      if(response.total === 0){
        resolve(false);
      }else{
        resolve(true);
      }
    });
    queryParams.value = {};
  });
};

/** 检查工厂编码重复 */
const checkPlantCodeExists = async (value) => {
  return new Promise((resolve) => {
    queryParams.value = {};
    queryParams.value.plantCode = value;
    listAps_plant(queryParams.value).then(response => {
      if(response.total === 0){
        resolve(false);
      }else{
        resolve(true);
      }
    });
    queryParams.value = {};
  });
};

function changePageNo(currentPage) {
  queryParams.value.pageNum = currentPage;
  page.value.current = currentPage;
  getList();
}

function changePageSize(pageSize) {
  page.value.current = 1;
  queryParams.value.pageNum = 1;
  queryParams.value.pageSize = pageSize;
  getList();
}

// 多选框选中数据
const handleCheckboxChange = (data) => {
  ids.value = data.records.map(item => item.id);
  single.value = data.records.length != 1;
  multiple.value = !data.records.length;
};

getList();
</script>