appsnbcbweicheng 1.2.25 → 1.2.27

package/public/ShelfRules.vue

@@ -1,400 +0,0 @@
-<template>
-  <div class="shelf-rules-container">
-    <!-- 筛选区域 -->
-    <el-card class="filter-card" shadow="never">
-      <el-form :inline="true" :model="queryParams" class="demo-form-inline" size="small">
-        <el-form-item label="规则名称">
-          <el-input
-            v-model="queryParams.ruleName"
-            placeholder="请输入规则名称"
-            clearable
-          ></el-input>
-        </el-form-item>
-        <el-form-item label="生效状态">
-          <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
-            <el-option label="已上架" value="1"></el-option>
-            <el-option label="已下架" value="0"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="handleSearch">查询</el-button>
-          <el-button @click="handleReset">重置</el-button>
-          <el-button type="success" @click="handleAdd" icon="el-icon-plus">新增</el-button>
-        </el-form-item>
-      </el-form>
-    </el-card>
-
-    <!-- 表格区域 -->
-    <el-card class="table-card" shadow="never">
-      <el-table :data="tableData" border style="width: 100%" v-loading="loading">
-        <el-table-column prop="ruleName" label="规则名称" min-width="150"></el-table-column>
-        <el-table-column prop="status" label="生效状态" width="120" align="center">
-          <template slot-scope="scope">
-            <el-button
-              size="mini"
-              :type="scope.row.status === '1' ? 'success' : 'info'"
-              plain
-              round
-            >
-              {{ scope.row.status === '1' ? '已上架' : '已下架' }}
-            </el-button>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" width="250" fixed="right">
-          <template slot-scope="scope">
-            <el-button type="text" size="small" @click="handleView(scope.row)">查看</el-button>
-            <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
-            <el-button
-              type="text"
-              size="small"
-              :style="{ color: scope.row.status === '1' ? '#F56C6C' : '#67C23A' }"
-              @click="handleToggleStatus(scope.row)"
-            >
-              {{ scope.row.status === '1' ? '停用' : '启用' }}
-            </el-button>
-            <el-button
-              type="text"
-              size="small"
-              style="color: #f56c6c"
-              @click="handleDelete(scope.row)"
-              >删除</el-button
-            >
-          </template>
-        </el-table-column>
-      </el-table>
-      <div class="pagination-container">
-        <el-pagination
-          background
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-          :current-page="pagination.currentPage"
-          :page-sizes="[10, 20, 50, 100]"
-          :page-size="pagination.pageSize"
-          layout="total, sizes, prev, pager, next, jumper"
-          :total="pagination.total"
-        >
-        </el-pagination>
-      </div>
-    </el-card>
-
-    <!-- 新增/修改弹窗 -->
-    <el-dialog
-      :title="dialogTitle"
-      :visible.sync="dialogVisible"
-      width="600px"
-      :close-on-click-modal="false"
-      @close="resetForm"
-    >
-      <el-form
-        :model="form"
-        :rules="rules"
-        ref="ruleForm"
-        label-width="100px"
-        :disabled="isViewMode"
-      >
-        <el-form-item label="规则名称" prop="ruleName">
-          <el-input
-            v-model="form.ruleName"
-            placeholder="请输入规则名称（最多20个字）"
-            maxlength="20"
-            show-word-limit
-          ></el-input>
-        </el-form-item>
-
-        <el-form-item label="产品类型" prop="productType">
-          <el-select v-model="form.productType" placeholder="请选择产品类型" style="width: 100%">
-            <el-option label="类型A" value="TypeA"></el-option>
-            <el-option label="类型B" value="TypeB"></el-option>
-          </el-select>
-        </el-form-item>
-
-        <el-form-item label="产品模板" prop="productTemplate">
-          <el-select
-            v-model="form.productTemplate"
-            multiple
-            placeholder="请选择产品模板"
-            style="width: 100%"
-          >
-            <el-option label="模板1" value="Template1"></el-option>
-            <el-option label="模板2" value="Template2"></el-option>
-            <el-option label="模板3" value="Template3"></el-option>
-          </el-select>
-        </el-form-item>
-
-        <el-form-item label="规则日期" prop="ruleDate">
-          <el-select v-model="form.ruleDate" placeholder="请选择规则日期" style="width: 100%">
-            <el-option label="T日" value="T"></el-option>
-            <el-option label="T+1日" value="T+1"></el-option>
-            <el-option label="成立日" value="setup_date"></el-option>
-          </el-select>
-        </el-form-item>
-
-        <el-form-item label="规则时间" prop="ruleTime">
-          <div class="time-rule-container">
-            <el-radio-group v-model="timeType" @change="handleTimeTypeChange">
-              <el-radio label="custom">自定义</el-radio>
-              <el-radio label="field">选择字段</el-radio>
-            </el-radio-group>
-
-            <div class="time-input-area" v-if="timeType === 'custom'">
-              <el-time-picker
-                v-model="form.ruleTime"
-                placeholder="任意时间点"
-                value-format="HH:mm:ss"
-                style="width: 100%"
-              >
-              </el-time-picker>
-            </div>
-            <div class="time-input-area" v-else>
-              <el-select v-model="form.ruleTime" placeholder="请选择时间字段" style="width: 100%">
-                <el-option label="创建时间" value="create_time"></el-option>
-                <el-option label="更新时间" value="update_time"></el-option>
-              </el-select>
-            </div>
-          </div>
-        </el-form-item>
-
-        <el-form-item label="操作" prop="operation">
-          <el-select v-model="form.operation" placeholder="请选择操作" style="width: 100%">
-            <el-option label="上架" value="1"></el-option>
-            <el-option label="下架" value="0"></el-option>
-          </el-select>
-        </el-form-item>
-      </el-form>
-      <span slot="footer" class="dialog-footer" v-if="!isViewMode">
-        <el-button @click="dialogVisible = false">取 消</el-button>
-        <el-button type="primary" @click="handleSubmit">确 定</el-button>
-      </span>
-      <span slot="footer" class="dialog-footer" v-else>
-        <el-button @click="dialogVisible = false">关 闭</el-button>
-      </span>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'ShelfRules',
-  data() {
-    return {
-      // 查询参数
-      queryParams: {
-        ruleName: '',
-        status: '',
-      },
-      // 表格加载状态
-      loading: false,
-      // 表格数据
-      tableData: [
-        {
-          id: 1,
-          ruleName: '示例规则1',
-          status: '1',
-          productType: 'TypeA',
-          productTemplate: ['Template1'],
-          ruleDate: 'T',
-          ruleTime: '09:00',
-          operation: '1',
-        },
-        {
-          id: 2,
-          ruleName: '示例规则2',
-          status: '0',
-          productType: 'TypeB',
-          productTemplate: ['Template2'],
-          ruleDate: 'setup_date',
-          ruleTime: 'create_time',
-          operation: '0',
-        },
-      ],
-      // 分页
-      pagination: {
-        currentPage: 1,
-        pageSize: 10,
-        total: 2,
-      },
-      // 弹窗控制
-      dialogVisible: false,
-      dialogTitle: '新增规则',
-      isViewMode: false,
-      // 时间规则类型
-      timeType: 'custom',
-      // 表单数据
-      form: {
-        id: undefined,
-        ruleName: '',
-        productType: '',
-        productTemplate: [],
-        ruleDate: '',
-        ruleTime: '',
-        operation: '',
-      },
-      // 校验规则
-      rules: {
-        ruleName: [
-          { required: true, message: '请输入规则名称', trigger: 'blur' },
-          { max: 20, message: '规则名称最多20个字', trigger: 'blur' },
-        ],
-        productType: [{ required: true, message: '请选择产品类型', trigger: 'change' }],
-        operation: [{ required: true, message: '请选择操作', trigger: 'change' }],
-      },
-    }
-  },
-  methods: {
-    // 搜索
-    handleSearch() {
-      this.loading = true
-      // 模拟查询
-      setTimeout(() => {
-        this.loading = false
-        this.$message.success('查询成功')
-      }, 500)
-    },
-    // 重置
-    handleReset() {
-      this.queryParams = {
-        ruleName: '',
-        status: '',
-      }
-      this.handleSearch()
-    },
-    // 新增
-    handleAdd() {
-      this.dialogTitle = '新增规则'
-      this.isViewMode = false
-      this.dialogVisible = true
-      this.timeType = 'custom'
-      this.$nextTick(() => {
-        this.$refs.ruleForm.resetFields()
-        this.form = {
-          id: undefined,
-          ruleName: '',
-          productType: '',
-          productTemplate: [],
-          ruleDate: '',
-          ruleTime: '',
-          operation: '',
-        }
-      })
-    },
-    // 查看
-    handleView(row) {
-      this.dialogTitle = '查看规则'
-      this.isViewMode = true
-      this.dialogVisible = true
-      this.fillForm(row)
-    },
-    // 编辑
-    handleEdit(row) {
-      this.dialogTitle = '编辑规则'
-      this.isViewMode = false
-      this.dialogVisible = true
-      this.fillForm(row)
-    },
-    // 填充表单
-    fillForm(row) {
-      this.$nextTick(() => {
-        // 判断 ruleTime 是时间格式还是字段
-        const isTimeFormat = /^([01]\d|2[0-3]):([0-5]\d)(:([0-5]\d))?$/.test(row.ruleTime)
-        this.timeType = isTimeFormat || !row.ruleTime ? 'custom' : 'field'
-
-        this.form = JSON.parse(JSON.stringify(row))
-        // operation 映射到 status 的逻辑根据业务可能不同，这里假设 operation 字段就是用来控制 status 的
-        // 或者 form 中 operation 字段就是对应 '操作（上架/下架）'
-      })
-    },
-    // 删除
-    handleDelete(row) {
-      this.$confirm('确认删除该规则吗?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning',
-      })
-        .then(() => {
-          this.$message.success('删除成功')
-          console.log(row, 'row')
-          // 实际业务中调用删除接口
-        })
-        .catch(() => {})
-    },
-    // 启用/停用
-    handleToggleStatus(row) {
-      const action = row.status === '1' ? '停用' : '启用'
-      this.$confirm(`确认${action}该规则吗?`, '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning',
-      })
-        .then(() => {
-          row.status = row.status === '1' ? '0' : '1'
-          this.$message.success(`${action}成功`)
-        })
-        .catch(() => {})
-    },
-    // 提交表单
-    handleSubmit() {
-      this.$refs.ruleForm.validate(valid => {
-        if (valid) {
-          // 提交逻辑
-          this.dialogVisible = false
-          this.$message.success(this.form.id ? '修改成功' : '新增成功')
-          // 更新列表...
-        } else {
-          return false
-        }
-      })
-    },
-    // 关闭弹窗重置
-    resetForm() {
-      this.$refs.ruleForm.clearValidate()
-    },
-    // 切换时间类型
-    handleTimeTypeChange() {
-      this.form.ruleTime = ''
-    },
-    // 分页
-    handleSizeChange(val) {
-      this.pagination.pageSize = val
-      this.handleSearch()
-    },
-    handleCurrentChange(val) {
-      this.pagination.currentPage = val
-      this.handleSearch()
-    },
-  },
-}
-</script>
-
-<style scoped lang="scss">
-.shelf-rules-container {
-  padding: 20px;
-  background-color: #f0f2f5;
-  min-height: 100%;
-
-  .filter-card {
-    margin-bottom: 20px;
-  }
-
-  .table-card {
-    margin-bottom: 20px;
-  }
-
-  .pagination-container {
-    margin-top: 20px;
-    text-align: right;
-  }
-
-  .time-rule-container {
-    display: flex;
-    flex-direction: column;
-
-    .el-radio-group {
-      margin-bottom: 10px;
-    }
-
-    .time-input-area {
-      width: 100%;
-    }
-  }
-}
-</style>