城市规则管理列表实现逻辑

这是index.vue文件，里面引入了Element UI 的<table-panel>、<el-form>、<el-form-item>、<el-table-column>组件来搭建基本的UI框架，引入各种API用来获取数据，引入组件用来实现页面功能。它的作用是渲染城市的规则数据，支持查询、重置、新增、上传、修改、删除功能，表单内部支持页面跳转。

1、渲染数据

• 表单数据来源：data() 里的 query，初始值来自 QUERY_INFO。
• 渲染方式：通过 el-form 的 :model 绑定和各表单项的 v-model 实现数据和页面的双向绑定。
• 数据流动：初始化、外部参数、用户输入都会影响 query，页面和数据始终保持同步。

2、动态渲染

页面是典型的数据驱动+事件驱动的动态渲染：

• 数据变化（如接口返回、表单输入）会自动更新页面内容。
• 事件触发（如按钮点击、表格操作）会动态改变数据或页面结构。
• 组件和内容的显示/隐藏、内容变化、交互行为都依赖于 Vue 的响应式和模板语法实现动态渲染。

 3、表单内的路由跳转

在 el-table-column 中使用 <template slot-scope="scope">（或 Vue 2.6+ 的 v-slot:default="scope"）可以实现自定义每一行的渲染内容，包括按钮、链接、图标等，并且可以结合事件实现如路由跳转等复杂交互。

<el-table-column
  label="客户设备清单"
  prop="customDevice"
>
  <template slot-scope="scope">
    <span v-if="scope.row.customDevice == '未上传'">未上传</span>
    <span
      class="cursor"
      @click="goToDevList(scope.row)"
      v-else
    >{{ scope.row.customDevice }}</span>
  </template>
</el-table-column>
//////////////////////////////////
methods: {
  goToDevList(row) {
    if (!row || !row.id) return;
    this.params.ruleId = row.id;
    let query = cloneDeep(this.params);
    this.$router.push({ path: '/customer', query });
  }
}

说明

• slot-scope="scope" 让你拿到当前行的数据对象（scope.row）。
• 你可以根据 scope.row 的内容动态渲染不同内容。
• 通过 @click="goToDevList(scope.row)"，点击时把当前行数据传递给方法，实现路由跳转或其他操作。
• 这样点击表格中某一行的“客户设备清单”内容时，就会跳转到对应页面，并带上当前行的参数。

用法总结

1. slot-scope="scope"
   让你在 <template> 里拿到当前行的数据（scope.row），实现自定义渲染。

2. 自定义内容
   可以渲染按钮、链接、图标等，并根据行数据动态显示不同内容。

3. 事件绑定
   可以在自定义内容上绑定事件（如 @click），并把当前行数据作为参数传递。

4. 路由跳转
   在事件方法中使用 this.$router.push 或 router.push，实现页面跳转并传递参数。

4、查询功能

<el-button
  type="primary" icon="el-icon-search" size="mini"
  @click="search"
>查询</el-button>

methods: {
  getList() {
    this.search();
  }
}
// search() 方法在 mixin 中定义如下：
search() {
  this.$refs[this.tablePanelName] &&
    this.$refs[this.tablePanelName].search(this.query);
}

实现步骤与逻辑

1. 用户点击“查询”按钮，触发 search 方法。
2. search 方法会读取表单（query）中的查询条件，向后端接口发起请求（如 getRuleList）。
3. 后端返回数据后，赋值给 ruleList，表格自动渲染新数据。
4. 查询条件包括地市、规则名称、状态等，全部由表单双向绑定到 query。

5、重置功能（防抖优化）

<el-button
  icon="el-icon-refresh"
  size="mini"
  @click="!resetState && resetQueryEvn('queryForm')"
>重置</el-button>

methods: {
  resetQueryEvn(tag) {
    if (this.resetState) return;
    this.resetState = true;
    setTimeout(() => {
      this.resetState = false;
    }, 800);

    if (this.dialogMode) {
      this.$emit("reset");
    } else {
      this.resetForm(tag);
    }
  },
  // resetForm(tag) 一般会调用 this.$refs[tag].resetFields() 重置表单
}

// mixins里的resetForm方法
resetForm(refName) {
      if (this.$refs[refName]) {
        this.$refs[refName].resetFields();
      }
      this.search();
    }

实现步骤与逻辑

1. 用户点击“重置”按钮，先判断 resetState，防止短时间内多次点击（防抖）。
2. 调用 resetQueryEvn('queryForm')，如果不是弹窗模式，则重置表单（如 this.$refs.queryForm.resetFields()）。
3. 查询条件恢复初始状态（QUERY_INFO），页面表单内容清空。
4. 通常重置后会自动重新查询，刷新表格数据。

6、修改功能

<el-button type="success" size="mini" plain @click="handleModify(scope.row)">修改</el-button>

methods: {
  handleModify(row) {
    this.dialogDate = row;
    this.openAddDialog = true;
  }
}
// 弹窗组件
<AddModifyDialog v-if="openAddDialog" :visible.sync="openAddDialog" :data="dialogDate" @onAddModified="getList"/>

实现步骤与逻辑

1. 用户点击“修改”按钮，调用 handleModify(scope.row)，把当前行数据赋值给 dialogDate，并打开弹窗。
2. 弹窗组件 AddModifyDialog 通过 props.data 接收要编辑的数据，自动回显到表单。
3. 用户在弹窗中修改内容，点击“确定”后，弹窗组件会调用 updateRule 接口提交修改。
4. 修改成功后，弹窗关闭，并通过 @onAddModified 通知父组件刷新列表（调用 getList()）。

7、删除功能

<el-button type="danger" size="mini" plain @click="handleDelete(scope.row)" @mouseup.native="resetButtonState($event)">删除</el-button>

methods: {
  handleDelete(row) {
    this.$confirm('确认删除该规则吗?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      deleteRule(row.id).then(response => {
        this.$modal.msgSuccess("删除成功");
        this.search(); // 删除成功后刷新列表
      });
    }).catch(() => {
      this.$message.info('已取消删除');
    });
  }
}

//删除规则接口
export function deleteRule(id) {
  return request({
    url: '/zx/ruleConfig/delete/'+id,
    method: 'delete',
  })
}

实现步骤与逻辑

1. 用户点击“删除”按钮，弹出确认框。
2. 用户确认后，调用 deleteRule(row.id) 接口删除该条数据。
3. 删除成功后，弹出“删除成功”提示，并刷新表格数据（调用 search()）。
4. 如果取消删除，弹出“已取消删除”提示。

8、子组件 add-modify.vue

这个 add-modify.vue 组件是一个规则新增/修改弹窗表单，用于在规则管理页面中进行规则的创建和编辑。下面详细总结其用法和功能：

1. 组件用途

• 用于弹窗形式新增或修改规则（如规则名称、运行周期、离线阈值、地市、派单路径等）。
• 支持表单校验、数据回显、周期表达式的编码与解析。

2. 主要功能点

（1）弹窗显示与隐藏

• 通过 :visible.sync="openAddDialog" 控制弹窗的显示与隐藏。
• 关闭弹窗时会自动触发 update:visible 事件通知父组件。

（2）表单数据绑定与校验

• 表单数据通过 form 对象双向绑定。
• 校验规则通过 rules 对象定义，支持必填校验等。

（3）新增与修改模式自动切换

• 通过 props.data 判断是“新增”还是“修改”：
  • 新增：data 为空，表单为空白。
  • 修改：data 有值，通过接口 getRuleById 拉取详情并回显到表单。

（4）表单提交

• 点击“确定”按钮时，先校验表单，再根据是新增还是修改调用不同的接口（addRule 或 updateRule）。
• 成功后弹窗关闭，并通过 onAddModified 事件通知父组件刷新列表。

 3. 组件使用方法（父组件示例）

<add-modify
  :visible.sync="openAddDialog"
  :data="dialogDate"
  @onAddModified="getList"
/>
// 懒加载
 components: {
    add-modify: () => import("./components/add-modify"),
  }

• visible.sync：控制弹窗显示/隐藏。
• data：传递当前要编辑的数据对象，新增时传 null。
• @onAddModified：监听新增/修改完成事件，通常用于刷新父组件的数据列表。