From 9a0676e6aa41efc7158b6d3488e9da8f48f57bd1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E5=90=8C=E6=B5=B7?=
 <14166000+zhangtonghai@user.noreply.gitee.com>
Date: Tue, 9 Jul 2024 17:57:21 +0800
Subject: [PATCH] 07/09

---
 src/api/system/operationRule.ts               |  56 ++++
 .../baseinfo/formcopy/components/Modal.vue    | 109 ++-----
 .../operationRule/Condition/Operator.vue      |  63 ++++
 .../operationRule/Condition/Trigger.vue       |  23 ++
 .../system/operationRule/Condition/index.ts   |  20 ++
 .../system/operationRule/Condition/index.vue  | 286 ++++++++++++++++++
 src/views/system/operationRule/RoleModal.vue  | 145 +++++++++
 .../operationRule/RolePermissionModal.vue     | 151 +++++++++
 src/views/system/operationRule/columns.tsx    | 273 +++++++++++++++++
 src/views/system/operationRule/index.vue      | 145 +++++++++
 10 files changed, 1191 insertions(+), 80 deletions(-)
 create mode 100644 src/api/system/operationRule.ts
 create mode 100644 src/views/system/operationRule/Condition/Operator.vue
 create mode 100644 src/views/system/operationRule/Condition/Trigger.vue
 create mode 100644 src/views/system/operationRule/Condition/index.ts
 create mode 100644 src/views/system/operationRule/Condition/index.vue
 create mode 100644 src/views/system/operationRule/RoleModal.vue
 create mode 100644 src/views/system/operationRule/RolePermissionModal.vue
 create mode 100644 src/views/system/operationRule/columns.tsx
 create mode 100644 src/views/system/operationRule/index.vue

diff --git a/src/api/system/operationRule.ts b/src/api/system/operationRule.ts
new file mode 100644
index 00000000..415c7d3a
--- /dev/null
+++ b/src/api/system/operationRule.ts
@@ -0,0 +1,56 @@
+// @ts-ignore
+import { request } from '/@/utils/request'
+import { DataResult, PageRequest } from '/@/api/model/baseModel'
+enum Api {
+  list = '/mainApi/OperationRule/GetOperationRuleList',
+  EditDataRule = '/mainApi/OperationRule/EditOperationRule',
+  GetDataRuleInfo = '/mainApi/OperationRule/GetOperationRuleInfo',
+
+
+  getPermissionTree = '/mainApi/Role/GetClientRolePermissionTree',
+  getRolePermission = '/mainApi/Role/GetRolePermission',
+  updateRolePermission = '/mainApi/Role/UpdateRolePermission',
+}
+export function getDataRuleList(data: PageRequest) {
+  return request<DataResult>({
+    url: Api.list,
+    method: 'post',
+    data,
+  })
+}
+
+export function editDataRule(data: any) {
+  return request<DataResult>({
+    url: Api.EditDataRule,
+    method: 'post',
+    data,
+  })
+}
+
+export function getDataRuleInfo(query: { id: string }) {
+  return request<DataResult>({
+    url: Api.GetDataRuleInfo,
+    method: 'get',
+    params: query,
+  })
+}
+export function getRolePermission(query: { id: string }) {
+  return request<DataResult<string[]>>({
+    url: Api.getRolePermission,
+    method: 'get',
+    params: query,
+  })
+}
+export function getPermissionTree() {
+  return request<DataResult>({
+    url: Api.getPermissionTree,
+    method: 'get',
+  })
+}
+export function updateRolePermission(data: any) {
+  return request<DataResult>({
+    url: Api.updateRolePermission,
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/views/baseinfo/formcopy/components/Modal.vue b/src/views/baseinfo/formcopy/components/Modal.vue
index a87ac84a..8377a2aa 100644
--- a/src/views/baseinfo/formcopy/components/Modal.vue
+++ b/src/views/baseinfo/formcopy/components/Modal.vue
@@ -70,10 +70,7 @@
           <div class="title">
             <span class="left"></span>
             <span class="right"></span>
-            <span class="tip">
-              已复制表单，可<b>拖动</b>调整显示顺序
-              <template v-if="maxNum != 0">, 最多可选30条</template>
-            </span>
+            <span class="tip"> 已复制表单</span>
           </div>
           <div class="label-box">
             <draggable
@@ -84,12 +81,7 @@
             >
               <transition-group>
                 <template v-for="(item, index) in fromAllLabel">
-                  <div
-                    class="label"
-                    @click="handleAddSort(item)"
-                    :key="item.field"
-                    v-if="item.label"
-                  >
+                  <div class="label" :key="item.field" v-if="item.label">
                     <span>{{ item.label }}</span>
                     <i class="iconfont icon-guanbi" @click.stop="removeFrom(item, index)"></i>
                   </div>
@@ -102,48 +94,6 @@
             </div>
           </div>
         </div>
-        <!-- <div class="basic-from basic-from-show">
-          <div class="title">
-            <span class="left"></span>
-            <span class="right"></span>
-            <span class="tip"
-              >按顺序排序，可<b>拖动</b>调整排序顺序 <template v-if="maxNum != 0"></template
-            ></span>
-          </div>
-          <div class="label-box-sort">
-            <draggable v-model="sortList" animation="300" @start="onStart" @end="emitFromChange">
-              <transition-group>
-                <template v-for="(item, index) in sortList">
-                  <div
-                    class="label"
-                    style="background-color: #d1bc55"
-                    :key="index"
-                    v-if="!item.noDraggable"
-                  >
-                    <span>{{ item.title }}</span>
-                    <span class="sort">
-                      <a-icon
-                        :style="{ color: item.descSort == false ? '#409eff' : '' }"
-                        @click="handleSort(item, index, false)"
-                        type="caret-up"
-                      />
-                      <a-icon
-                        :style="{ color: item.descSort ? '#409eff' : '' }"
-                        @click="handleSort(item, index, true)"
-                        type="caret-down"
-                      />
-                    </span>
-                    <i class="iconfont icon-guanbi" @click="removeFromSort(item, index)"></i>
-                  </div>
-                </template>
-              </transition-group>
-            </draggable>
-            <div class="no-data" v-if="sortList.length == 0">
-              <i class="iconfont icon-wushuju"></i>
-              <div class="no-text">请添加数据列</div>
-            </div>
-          </div>
-        </div> -->
         <div class="basic-from basic-from-hide">
           <div class="title">
             <span class="left"></span>
@@ -217,7 +167,7 @@
   const loading = ref(false)
   const rowId = ref('')
   const form = ref()
-  const checkedList = ref()
+  // const checkedList = ref()
   const formData = reactive({
     id: '',
     templateName: '',
@@ -239,26 +189,6 @@
       permissionNameList.value = res.data
     })
   }
-  function ChangePermissionName(e) {
-    console.log(e)
-    // permissionNameList.value.forEach((item) => {
-    //   if (item.id == e) {
-    //     formData.permissionName = item.permissionName
-    //   }
-    // })
-    // let ApiData = {
-    //   permissionId: e,
-    // }
-    // getColumnsByClient(ApiData).then((res) => {
-    //   plainOptions.value.splice(0)
-    //   res.data.forEach((e) => {
-    //     plainOptions.value.push({
-    //       field: e.dbColumnName,
-    //       label: e.columnDescription,
-    //     })
-    //   })
-    // })
-  }
   const formLoading = ref(false)
   const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
     setModalProps({ confirmLoading: false, loading: true })
@@ -306,9 +236,9 @@
       formData.orderNo = res.data.orderNo
       formData.status = res.data.status
       formData.content = res.data.content
-      if (res.data.copyFields) {
-        checkedList.value = res.data.copyFields.split(',')
-      }
+      // if (res.data.copyFields) {
+      //   checkedList.value = res.data.copyFields.split(',')
+      // }
     }
     formLoading.value = false
     setModalProps({ loading: false })
@@ -318,9 +248,21 @@
     try {
       setModalProps({ confirmLoading: true, loading: true })
       // TODO custom api
-      if (checkedList.value && checkedList.value.length) {
-        formData.copyFields = String(checkedList.value)
-      }
+      // if (checkedList.value && checkedList.value.length) {
+      //   formData.copyFields = String(checkedList.value)
+      // }
+    if (fromAllLabel.value && fromAllLabel.value.length) {
+      formData.copyFields = ''
+
+      fromAllLabel.value.forEach((e) => {
+        if (formData.copyFields == '') {
+          formData.copyFields = e.field
+        } else {
+          formData.copyFields = `${formData.copyFields},${e.field}`
+        }
+      })
+      console.log(formData.copyFields)
+    }
       loading.value = true
       const res: API.DataResult = await EditFormCopy(formData)
       loading.value = false
@@ -336,7 +278,14 @@
       setModalProps({ confirmLoading: false, loading: false })
     }
   }
-  const maxNum = ref(0)
+  function addFrom(item, index) {
+    fromAllLabel.value.push(item)
+    plainOptions.value.splice(index, 1)
+  }
+  function removeFrom(item, index) {
+    plainOptions.value.push(item)
+    fromAllLabel.value.splice(index, 1)
+  }
 </script>
 
 <style lang="less">
diff --git a/src/views/system/operationRule/Condition/Operator.vue b/src/views/system/operationRule/Condition/Operator.vue
new file mode 100644
index 00000000..4143b8a0
--- /dev/null
+++ b/src/views/system/operationRule/Condition/Operator.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+  import { useVModel } from '@vueuse/core'
+
+  const $props = defineProps<{
+    modelValue: string
+  }>()
+  const operatorOptions = [
+    {
+      value: 'equal',
+      label: '等于',
+    },
+    {
+      value: 'not_equal',
+      label: '不等于',
+    },
+    {
+      value: 'GreaterThan',
+      label: '大于',
+    },
+    {
+      value: 'GreaterThanOrEqual',
+      label: '大于等于',
+    },
+    {
+      value: 'LessThan',
+      label: '小于',
+    },
+    {
+      value: 'LessThanOrEqual',
+      label: '小于等于',
+    },
+    {
+      label: '包含',
+      value: 'contains',
+    },
+    {
+      label: '不包含',
+      value: 'not_contain',
+    },
+  ]
+  const $emits = defineEmits<{
+    (e: 'update:modelValue', modelValue: any): void
+  }>()
+  const data = useVModel($props, 'modelValue', $emits)
+</script>
+
+<template>
+  <el-select v-model="data" class="operator-container" filterable placeholder="筛选符">
+    <el-option
+      v-for="item in operatorOptions"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value"
+    />
+  </el-select>
+</template>
+
+<style scoped lang="scss">
+  .operator-container {
+    width: 100%;
+    flex-shrink: 0;
+  }
+</style>
diff --git a/src/views/system/operationRule/Condition/Trigger.vue b/src/views/system/operationRule/Condition/Trigger.vue
new file mode 100644
index 00000000..12c2d3cd
--- /dev/null
+++ b/src/views/system/operationRule/Condition/Trigger.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+  import { Field } from '/@/components/Render/interface'
+  import { FilterRules } from '/@/components/Condition/index'
+  import { useVModel } from '@vueuse/core'
+
+  const $props = defineProps<{
+    modelValue: any
+    options: Field[]
+    filterRules: FilterRules
+  }>()
+  const $emits = defineEmits<{
+    (e: 'update:modelValue', modelValue: string): void
+  }>()
+  const data = useVModel($props, 'modelValue', $emits)
+</script>
+
+<template>
+  <el-select v-model="data" class="trigger-container" filterable placeholder="选择字段">
+    <el-option v-for="item in $props.options" :key="item.id" :label="item.title" :value="item.id" />
+  </el-select>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/src/views/system/operationRule/Condition/index.ts b/src/views/system/operationRule/Condition/index.ts
new file mode 100644
index 00000000..0bc76394
--- /dev/null
+++ b/src/views/system/operationRule/Condition/index.ts
@@ -0,0 +1,20 @@
+/**
+ * 字段筛选结果
+ */
+export interface Condition {
+  // 筛选字段
+  field: string | null
+  // 条件运算符
+  operator: string
+  // 筛选值
+  value: any | null
+}
+
+/**
+ * 筛选规则
+ */
+export interface FilterRules {
+  logicalOperator: 'or' | 'and'
+  conditions: Condition[]
+  groups: FilterRules[]
+}
diff --git a/src/views/system/operationRule/Condition/index.vue b/src/views/system/operationRule/Condition/index.vue
new file mode 100644
index 00000000..0e40918a
--- /dev/null
+++ b/src/views/system/operationRule/Condition/index.vue
@@ -0,0 +1,286 @@
+<script setup lang="ts" name="ConditionFilter">
+  import { FilterRules } from '/@/components/Condition/index'
+  import { Field } from '/@/components/Render/interface'
+  import { useVModel } from '@vueuse/core'
+  import { Delete, CirclePlus, CircleClose } from '@element-plus/icons-vue'
+  import Trigger from './Trigger.vue'
+  import Operator from './Operator.vue'
+  import Render from '/@/components/Render/index'
+  import { ref } from 'vue'
+  interface RestaurantItem {
+    value: string
+    WebShow: string
+  }
+  const $props = defineProps<{
+    filterFields: Field[]
+    modelValue: FilterRules
+    disabled: boolean
+  }>()
+  const $emits = defineEmits<{
+    (e: 'update:modelValue', modelValue: FilterRules): void
+    (e: 'addCondition', index: number): void
+    (e: 'delCondition', index: number): void
+    (e: 'delGroup'): void
+  }>()
+  const filterRules = useVModel($props, 'modelValue', $emits)
+  /**
+   * 添加条件
+   */
+  const addRule = () => {
+    filterRules.value.conditions.push({
+      field: null,
+      operator: 'equal',
+      value: null,
+    })
+  }
+  /**
+   * 删除条件
+   * @param index
+   */
+  const handleDel = (index: number) => {
+    filterRules.value.conditions.splice(index, 1)
+    if (filterRules.value.conditions.length <= 0) {
+      $emits('delGroup')
+    }
+    $emits('delCondition', index)
+  }
+  /**
+   * 条件条件组
+   */
+  const addGroup = () => {
+    filterRules.value.groups.push({
+      logicalOperator: 'and',
+      conditions: [
+        {
+          field: null,
+          operator: '',
+          value: null,
+        },
+      ],
+      groups: [],
+    })
+  }
+  /**
+   * 删除条件组
+   * @param index
+   */
+  const delGroup = (index: number) => {
+    filterRules.value.groups.splice(index, 1)
+  }
+  const querySearch = (queryString: string, cb: any) => {
+    const results = [
+      {
+        WebShow: '{loginRole}',
+        value: '当前登录用户的角色',
+      },
+      {
+        WebShow: '{loginUser}',
+        value: '当前登录的用户',
+      },
+      {
+        WebShow: '{loginOrg}',
+        value: '机构',
+      },
+    ]
+    cb(results)
+  }
+  const handleSelect = (data: RestaurantItem, item) => {
+    console.log(data)
+    item.WebShow = data.value
+    item.value = data.WebShow
+  }
+</script>
+<!-- <el-col :xs="24" :sm="5" v-if="item.field">
+  <el-form-item :prop="'conditions.' + index + '.operator'" style="width: 100%">
+    <operator ref="operatorRef" v-model="item.operator" />
+  </el-form-item>
+</el-col> -->
+<template>
+  <div class="filter-container">
+    <div class="logical-operator">
+      <div class="logical-operator__line"></div>
+      <el-switch
+        v-model="filterRules.logicalOperator"
+        inline-prompt
+        style="--el-switch-on-color: #409eff; --el-switch-off-color: #67c23a"
+        active-value="and"
+        inactive-value="or"
+        active-text="且"
+        inactive-text="或"
+        :disabled="$props.disabled"
+      />
+    </div>
+    <div class="filter-option-content">
+      <el-form :label-width="0" :inline="true" :model="filterRules" :disabled="$props.disabled">
+        <el-row
+          v-for="(item, index) in filterRules.conditions"
+          :key="`${item.field}-${index}`"
+          :gutter="5"
+          class="filter-item-rule"
+        >
+          <el-col :xs="24" :sm="7">
+            <el-form-item :prop="'conditions.' + index + '.field'" style="width: 100%">
+              <trigger
+                ref="triggerRef"
+                v-model="item.field"
+                :options="$props.filterFields.filter((e) => e.value !== undefined)"
+                :filter-rules="filterRules"
+              />
+            </el-form-item>
+          </el-col>
+
+          <el-col v-if="item.field" :xs="24" :sm="5">
+            <el-form-item :prop="'conditions.' + index + '.operator'" style="width: 100%">
+              <operator ref="operatorRef" v-model="item.operator" />
+            </el-form-item>
+          </el-col>
+
+          <el-col v-if="item.field" :xs="24" :sm="6">
+            <el-form-item :prop="'conditions.' + index + '.value'" style="width: 100%">
+              <el-autocomplete
+                v-if="item.field == 'CreateBy'"
+                v-model="item.WebShow"
+                :fetch-suggestions="querySearch"
+                clearable
+                @select="
+                  (e) => {
+                    handleSelect(e, item)
+                  }
+                "
+              />
+              <el-input v-else v-model="item.value"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col
+            :xs="24"
+            :sm="2"
+            style="display: flex; align-items: center; flex-direction: row-reverse"
+          >
+            <el-button plain circle type="danger" :icon="Delete" @click="handleDel(index)" />
+          </el-col>
+        </el-row>
+        <ConditionFilter
+          v-for="(item, index) in filterRules.groups"
+          :key="index"
+          v-model="filterRules.groups[index]"
+          :filter-fields="filterFields"
+          @delGroup="delGroup(index)"
+        >
+          <el-button :icon="CircleClose" class="filter-filter-item__add" @click="delGroup(index)">
+            删除条件组
+          </el-button>
+        </ConditionFilter>
+        <div
+          v-if="filterRules.groups.length === 0 && filterRules.conditions.length === 0"
+          class="filter-item-rule"
+        />
+      </el-form>
+      <div class="filter-item-rule">
+        <el-button
+          :icon="CirclePlus"
+          class="filter-filter-item__add"
+          :disabled="$props.disabled"
+          @click="addRule"
+        >
+          添加条件
+        </el-button>
+        <el-button
+          :icon="CirclePlus"
+          class="filter-filter-item__add"
+          :disabled="$props.disabled"
+          @click="addGroup"
+        >
+          添加条件组
+        </el-button>
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+<!-- <el-col :xs="24" :sm="7" v-if="item.tables">
+  <el-form-item :prop="'conditions.' + index + '.field'" style="width: 100%">
+    <Render
+      :field="$props.filterFields.find((e) => e.id === item.tables)"
+      v-model="item.field"
+    />
+  </el-form-item>
+</el-col> -->
+<style scoped lang="scss">
+  :deep(.el-form-item) {
+    margin-right: 0;
+    margin-bottom: 0;
+  }
+
+  .filter-container {
+    background-color: var(--el-fill-color-blank);
+    border-radius: 3px;
+    display: flex;
+
+    .logical-operator {
+      position: relative;
+      display: flex;
+      align-items: center;
+      overflow: hidden;
+      min-width: 60px;
+      padding-right: 5px;
+
+      .logical-operator__line {
+        position: absolute;
+        left: calc(32% - 1px);
+        width: 30px;
+        border-width: 1px 0 1px 1px;
+        border-top-style: solid;
+        border-bottom-style: solid;
+        border-left-style: solid;
+        border-top-color: var(--el-border-color);
+        border-bottom-color: var(--el-border-color);
+        border-left-color: var(--el-border-color);
+        border-image: initial;
+        border-right-style: initial;
+        border-right-color: initial;
+        border-radius: 5px 0 0 5px;
+        height: calc(100% - 48px);
+
+        &::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          right: 0;
+          transform: translateX(100%) translateY(-50%);
+          width: 6px;
+          height: 6px;
+          border: var(--el-border);
+          border-radius: 50%;
+        }
+
+        &::after {
+          content: '';
+          position: absolute;
+          bottom: 0;
+          right: 0;
+          transform: translateX(100%) translateY(50%);
+          width: 6px;
+          height: 6px;
+          border: var(--el-border);
+          border-radius: 50%;
+        }
+      }
+    }
+
+    .filter-option-content {
+      position: relative;
+      width: 100%;
+
+      .filter-item-rule {
+        display: flex;
+        align-items: center;
+        min-height: 48px;
+      }
+
+      .filter-filter-item__add {
+        border-style: dashed;
+        width: 100%;
+      }
+    }
+  }
+</style>
diff --git a/src/views/system/operationRule/RoleModal.vue b/src/views/system/operationRule/RoleModal.vue
new file mode 100644
index 00000000..5b1a933a
--- /dev/null
+++ b/src/views/system/operationRule/RoleModal.vue
@@ -0,0 +1,145 @@
+<template>
+  <BasicModal
+    v-bind="$attrs"
+    :use-wrapper="true"
+    :title="getTitle"
+    width="50%"
+    @register="registerModal"
+    @ok="handleSave"
+  >
+    <BasicForm @register="registerForm"> </BasicForm>
+    <!--右下角按钮-->
+    <template #footer>
+      <a-button
+        pre-icon="ant-design:close-outlined"
+        type="warning"
+        :loading="loading"
+        ghost
+        style="margin-right: 0.8rem"
+        @click="closeModal"
+        >取消</a-button
+      >
+      <a-button
+        type="success"
+        :loading="loading"
+        pre-icon="ant-design:check-outlined"
+        style="margin-right: 0.8rem"
+        @click="handleSave(false)"
+        >仅保存</a-button
+      >
+      <a-button
+        pre-icon="ant-design:check-circle-outlined"
+        type="primary"
+        :loading="loading"
+        @click="handleSave(true)"
+        >保存并关闭</a-button
+      >
+    </template>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, computed, unref, h } from 'vue'
+  import { BasicModal, useModalInner } from '/@/components/Modal'
+  import { BasicForm, useForm } from '/@/components/Form/index'
+  import { formSchema } from './columns'
+  import { editDataRule, getDataRuleInfo } from '/@/api/system/operationRule'
+  import { useUserStore } from '/@/store/modules/user'
+  import { useMessage } from '/@/hooks/web/useMessage'
+  import { Field } from '/@/components/Render/interface'
+  // 声明Emits
+  const emit = defineEmits(['success', 'register'])
+  const isUpdate = ref(true)
+  const loading = ref(false)
+  const rowId = ref('')
+  const conditions = ref('')
+  const fields = ref<Field[]>([])
+
+  const { createMessage } = useMessage()
+  const [registerForm, { resetFields, setFieldsValue, validate, updateSchema, getFieldsValue }] =
+    useForm({
+      labelWidth: 110,
+      schemas: formSchema,
+      showActionButtonGroup: false,
+    })
+
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    resetFields()
+    // GetTable()
+    setModalProps({ confirmLoading: false, loading: true })
+    isUpdate.value = !!data?.isUpdate
+    if (unref(isUpdate)) {
+      // setModalProps({ confirmLoading: true });
+      rowId.value = data.record.id
+      const res: API.DataResult = await getDataRuleInfo({ id: unref(rowId) })
+      if (res.succeeded) {
+        setFieldsValue({
+          ...res.data,
+          field1: JSON.parse(res.data.dataRules),
+        })
+        // console.log('返回数据Form', getFieldsValue());
+        // setFieldsValue({ trainId: unref(res.data.trainId) });
+      }
+      // setModalProps({ confirmLoading: false });
+    } else {
+    }
+    setModalProps({ loading: false })
+  })
+
+  const getTitle = computed(() => (!unref(isUpdate) ? '新增操作权限' : '编辑操作权限'))
+
+  async function handleSave(exit) {
+    try {
+      const values = await validate()
+      setModalProps({ confirmLoading: true, loading: true })
+      // TODO custom api
+
+      values.dataRules = JSON.stringify(values.field1)
+      console.log(values)
+      loading.value = true
+      const res: API.DataResult = await editDataRule({
+        columnView: values.columnView,
+        dataRules: values.dataRules,
+        description: values.description,
+        id: values.id,
+        note: values.note,
+        orderNo: values.orderNo,
+        permissionEntity: values.permissionEntity,
+        permissionId: values.permissionId,
+        status: values.status,
+      })
+      console.log(res)
+      if (res.succeeded) {
+        createMessage.success(res.message)
+        emit('success')
+        //刷新页面
+        if (!exit) {
+          if (unref(isUpdate)) {
+            await refresh()
+          } else {
+            rowId.value = res.data
+            isUpdate.value = true
+            await refresh()
+          }
+        }
+        loading.value = false
+      } else {
+        createMessage.error(res.message)
+        loading.value = false
+        setModalProps({ confirmLoading: false, loading: false })
+      }
+
+      exit && closeModal()
+    } finally {
+      loading.value = false
+      setModalProps({ confirmLoading: false, loading: false })
+    }
+  }
+  async function refresh() {
+    const res: API.DataResult = await getDataRuleInfo({ id: unref(rowId) })
+    if (res.succeeded) {
+      await setFieldsValue({
+        ...res.data,
+      })
+    }
+  }
+</script>
diff --git a/src/views/system/operationRule/RolePermissionModal.vue b/src/views/system/operationRule/RolePermissionModal.vue
new file mode 100644
index 00000000..fc7d12ef
--- /dev/null
+++ b/src/views/system/operationRule/RolePermissionModal.vue
@@ -0,0 +1,151 @@
+<template>
+  <BasicModal
+    v-bind="$attrs"
+    title="操作权限配置"
+    width="650px"
+    @register="registerModal"
+    @ok="handleSubmit"
+  >
+    <BasicTree
+      ref="treeRef"
+      title="所拥有的的权限"
+      :tree-data="treeData"
+      :checkable="true"
+      :checked-keys="checkedKeys"
+      :selected-keys="selectedKeys"
+      default-expand-all
+      @check="onCheck"
+    />
+    <!--    <BasicTree-->
+    <!--      ref="treeRef"-->
+    <!--      checkable-->
+    <!--      toolbar-->
+    <!--      :treeData="treeData"-->
+    <!--      :checkedKeys="checkedKeys"-->
+    <!--      :expandedKeys="allTreeKeys"-->
+    <!--      :selectedKeys="selectedKeys"-->
+    <!--      :fieldNames="{ key: 'key', title: 'title' }"-->
+    <!--      :checkStrictly="true"-->
+    <!--      :clickRowToExpand="false"-->
+    <!--      title="所拥有的的权限"-->
+    <!--      @check="onCheck"-->
+    <!--      @select="onTreeNodeSelect"-->
+    <!--    >-->
+    <!--      <template #title="{ slotTitle, ruleFlag }">-->
+    <!--        {{ slotTitle }}-->
+    <!--        <Icon-->
+    <!--          v-if="ruleFlag"-->
+    <!--          icon="ant-design:align-left-outlined"-->
+    <!--          style="margin-left: 5px; color: red"-->
+    <!--        />-->
+    <!--      </template>-->
+    <!--    </BasicTree>-->
+    <!--右下角按钮-->
+    <template #footer>
+      <PopConfirmButton
+        title="确定放弃编辑？"
+        ok-text="确定"
+        cancel-text="取消"
+        @confirm="closeModal"
+        >取消</PopConfirmButton
+      >
+      <a-button
+        type="primary"
+        pre-icon="ant-design:save-outlined"
+        :loading="loading"
+        ghost
+        style="margin-right: 0.8rem"
+        @click="handleSubmit(false)"
+        >仅保存</a-button
+      >
+      <a-button type="primary" :loading="loading" @click="handleSubmit(true)">保存并关闭</a-button>
+    </template>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, computed, unref, onMounted } from 'vue'
+  import { BasicModal, useModalInner } from '/@/components/Modal'
+  import { BasicTree, TreeItem } from '/@/components/Tree'
+  import { PopConfirmButton } from '/@/components/Button'
+  // import { queryTreeListForRole, queryRolePermission, saveRolePermission } from '../role.api';
+  import { getPermissionTree, getRolePermission, updateRolePermission } from '/@/api/system/role'
+  // const emit = defineEmits(['register']);
+  //树的信息
+  const treeData = ref<TreeItem[]>([])
+  //树的全部节点信息
+  const allTreeKeys = ref([])
+  //树的选择节点信息
+  const checkedKeys = ref([])
+  const defaultCheckedKeys = ref([])
+  //树的选中的节点信息
+  const selectedKeys = ref([])
+  const roleId = ref('')
+  //树的实例
+  const treeRef = ref(null)
+  const loading = ref(false)
+
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    await reset()
+    setModalProps({ confirmLoading: false, loading: true })
+    roleId.value = data.record.id
+    //初始化数据
+    const res = await getPermissionTree()
+    treeData.value = res.data.treeData
+    allTreeKeys.value = res.data.ids
+    //初始化角色菜单数据
+    const permResult = await getRolePermission({ id: unref(roleId) })
+    checkedKeys.value = permResult.data
+    defaultCheckedKeys.value = permResult.data
+    setModalProps({ loading: false })
+  })
+  /**
+   * 点击选中
+   */
+  function onCheck(o) {
+    checkedKeys.value = o.checked ? o.checked : o
+  }
+
+  /**
+   * 数据重置
+   */
+  function reset() {
+    treeData.value = []
+    allTreeKeys.value = []
+    checkedKeys.value = []
+    defaultCheckedKeys.value = []
+    selectedKeys.value = []
+    roleId.value = ''
+  }
+  /**
+   * 获取tree实例
+   */
+  function getTree() {
+    const tree = unref(treeRef)
+    if (!tree) {
+      throw new Error('tree is null!')
+    }
+    return tree
+  }
+  /**
+   * 提交
+   */
+  async function handleSubmit(exit) {
+    let params = {
+      roleId: unref(roleId),
+      permissionIds: unref(getTree().getCheckedKeys()).join(',').split(','),
+      // lastpermissionIds: unref(defaultCheckedKeys).join(','),
+    }
+    loading.value = true
+    await updateRolePermission(params)
+    loading.value = false
+    exit && closeModal()
+  }
+</script>
+
+<style lang="less" scoped>
+  /** 固定操作按钮 */
+  .jeecg-basic-tree {
+    position: absolute;
+    width: 618px;
+  }
+</style>
diff --git a/src/views/system/operationRule/columns.tsx b/src/views/system/operationRule/columns.tsx
new file mode 100644
index 00000000..2caa2fd5
--- /dev/null
+++ b/src/views/system/operationRule/columns.tsx
@@ -0,0 +1,273 @@
+import { BasicColumn, FormSchema } from '/@/components/Table'
+import { getTables, getColumns, getClientPermissionList } from '/@/api/system/role'
+import { h, ref } from 'vue'
+import ConditionFilter from './Condition/index.vue'
+import { Field } from '/@/components/Render/interface'
+import { Tag } from 'ant-design-vue'
+const columnViewData = []
+const res: API.DataResult = await getTables()
+if (res.succeeded) {
+  res.data.forEach((item) => {
+    columnViewData.push({
+      label: item.description,
+      value: item.name,
+    })
+  })
+}
+const ClientPermissionData = []
+let ClientPermissionList = []
+const res2: API.DataResult = await getClientPermissionList()
+if (res2.succeeded) {
+  console.log(res2)
+  ClientPermissionList = res2.data
+  res2.data.forEach((item) => {
+    ClientPermissionData.push({
+      label: item.permissionName,
+      value: item.id,
+    })
+  })
+}
+const fields = ref<Field[]>([])
+export const columns: BasicColumn[] = [
+  {
+    title: '权限模块名称',
+    dataIndex: 'permissionName',
+    sorter: true,
+    width: 150,
+  },
+  {
+    title: '权限实体',
+    dataIndex: 'permissionEntity',
+    sorter: true,
+    width: 150,
+  },
+  {
+    title: '操作权限描述',
+    dataIndex: 'description',
+    sorter: true,
+    width: 200,
+  },
+  {
+    title: '排序号',
+    dataIndex: 'orderNo',
+    sorter: true,
+    width: 150,
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    sorter: true,
+    width: 100,
+    customRender: ({ text }) => {
+      if (text === 0) {
+        return <Tag color="success">启用</Tag>
+      } else if (text === 1) {
+        return <Tag color="red">禁用</Tag>
+      }
+      return text
+    },
+  },
+  {
+    title: '备注',
+    dataIndex: 'note',
+    sorter: true,
+    width: 150,
+  },
+]
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'Description',
+    label: '操作权限描述',
+    component: 'Input',
+    colProps: { span: 6 },
+  },
+  {
+    field: 'PermissionName',
+    label: '权限模块名称',
+    component: 'Input',
+    colProps: { span: 6 },
+  },
+]
+export const formSchema: FormSchema[] = [
+  {
+    field: 'divider-selects',
+    component: 'Divider',
+    label: '基本信息',
+    colProps: { span: 24 },
+  },
+  {
+    label: '',
+    field: 'id',
+    component: 'Input',
+    defaultValue: '',
+    show: false,
+  },
+  // {
+  //   field: 'dataRules',
+  //   label: '权限规则',
+  //   component: 'Input',
+  //   defaultValue: 0,
+  //   colProps: { span: 12 },
+  // },
+  {
+    field: 'columnView',
+    label: '中文视图名',
+    component: 'Select',
+    required: true,
+    colProps: { span: 12 },
+    componentProps: ({ formModel }) => {
+      return {
+        options: columnViewData,
+        onChange: async (e: ChangeEvent, a) => {
+          console.log(e, a)
+          const res: API.DataResult = await getColumns({ tableViewName: e })
+          fields.value = []
+          if (res.succeeded) {
+            console.log(res)
+            const Arr = [
+              {
+                dbColumnName: '{loginRole}',
+                columnDescription: '当前登录用户的角色',
+              },
+              {
+                dbColumnName: '{loginUser}',
+                columnDescription: '当前登录的用户',
+              },
+              {
+                dbColumnName: '{loginOrg}',
+                columnDescription: '机构',
+              },
+            ]
+            res.data = [...res.data, ...Arr]
+            res.data.forEach((item) => {
+              // if (item.name == tableViewName) {
+              fields.value.push({
+                id: item.dbColumnName,
+                title: item.columnDescription,
+                name: 'Select',
+                value: null,
+                props: {
+                  disabled: false,
+                  multiple: false,
+                  // placeholder: '请选择请假事由',
+                  options: [],
+                },
+                style: {
+                  width: '100%',
+                },
+              })
+              // }
+            })
+            if (a) {
+              formModel.field1 = {
+                groups: [],
+                conditions: [],
+              }
+            }
+
+            console.log(fields.value, 'fields.value')
+          }
+        },
+      }
+    },
+  },
+  {
+    label: '权限实体',
+    field: 'permissionEntity',
+    component: 'Input',
+    defaultValue: '',
+    show: false,
+  },
+  {
+    field: 'permissionId',
+    label: '资源标识',
+    component: 'Select',
+    colProps: { span: 12 },
+    required: true,
+    componentProps: ({ formModel }) => {
+      return {
+        options: ClientPermissionData,
+        // xxxx props
+        onChange: (e) => {
+          console.log(e)
+          ClientPermissionList.forEach((item) => {
+            if (item.id == e) {
+              console.log(item)
+              formModel.permissionEntity = item.permissionEntity
+            }
+          })
+        },
+      }
+    },
+  },
+  {
+    field: 'status',
+    label: '是否启用',
+    component: 'RadioButtonGroup',
+    defaultValue: 0,
+    colProps: { span: 12 },
+    componentProps: {
+      options: [
+        { label: '是', value: 0 },
+        { label: '否', value: 1 },
+      ],
+    },
+  },
+  {
+    field: 'orderNo',
+    label: '排序号',
+    component: 'InputNumber',
+    defaultValue: 0,
+    colProps: { span: 12 },
+  },
+  {
+    field: 'description',
+    label: '权限描述',
+    required: true,
+    component: 'InputTextArea',
+    colProps: { span: 12 },
+    componentProps: {
+      rows: 4,
+    },
+  },
+  {
+    field: 'note',
+    label: '备注',
+    component: 'InputTextArea',
+    colProps: { span: 12 },
+    componentProps: {
+      rows: 4,
+    },
+  },
+  {
+    field: 'divider-selects',
+    component: 'Divider',
+    label: '权限规则',
+    colProps: { span: 24 },
+    ifShow: ({ values }) => {
+      return !!values.columnView
+    },
+  },
+  {
+    field: 'field1',
+    component: 'Input',
+    colProps: {
+      span: 24,
+    },
+    defaultValue: {
+      groups: [],
+      conditions: [],
+    },
+    ifShow: ({ values }) => {
+      return !!values.columnView
+    },
+    // 通过函数渲染一个 Input
+    render: ({ model, field }) => {
+      return h(ConditionFilter, {
+        modelValue: model[field],
+        filterFields: fields.value,
+      })
+    },
+  },
+]
diff --git a/src/views/system/operationRule/index.vue b/src/views/system/operationRule/index.vue
new file mode 100644
index 00000000..3cc997ca
--- /dev/null
+++ b/src/views/system/operationRule/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <div>
+    <BasicTable class="ds-table" @register="registerTable">
+      <template #tableTitle>
+        <a-button
+          type="link"
+          @click="handleCreate"
+          :disabled="checkPermissions('op:operationRule:add')"
+        >
+          <span class="iconfont icon-new_document"></span>
+          新增操作权限
+        </a-button>
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'roleName'">
+          <span style="color: #0d84ff" @click="handleEdit(record)">{{ record.roleName }}</span>
+        </template>
+        <template v-if="column.key === 'action'">
+          <TableAction
+            :actions="[
+              {
+                icon: 'clarity:note-edit-line',
+                tooltip: '编辑',
+                onClick: handleEdit.bind(null, record),
+                disabled: checkPermissions('op:operationRule:edit'),
+              },
+            ]"
+          />
+        </template>
+      </template>
+    </BasicTable>
+    <RoleModal @register="registerModal" @success="handleSuccess" />
+    <RolePermissionModal @register="registerPermissionModal" @success="handleSuccess" />
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref } from 'vue'
+  import { checkPermissions } from '/@/hooks/Permissions/index'
+  import { BasicTable, useTable, TableAction } from '/@/components/Table'
+  import { getDataRuleList } from '/@/api/system/operationRule'
+  import { useModal } from '/@/components/Modal'
+  import RoleModal from './RoleModal.vue'
+  import RolePermissionModal from './RolePermissionModal.vue'
+  import { columns, searchFormSchema } from './columns'
+  const [registerModal, { openModal }] = useModal()
+  const [registerPermissionModal] = useModal()
+  const [registerTable, { reload, getForm }] = useTable({
+    title: '',
+    // api: getSysDictTypeList,
+    api: async (p) => {
+      const res: API.DataResult = await getDataRuleList(p)
+      // console.log(items);
+      return new Promise((resolve) => {
+        resolve({ data: [...res.data], total: res.count })
+      })
+    },
+    beforeFetch: (p) => {
+      var data = getForm().getFieldsValue()
+      const postParam: API.PageRequest = {
+        queryCondition: '',
+        pageCondition: {
+          pageIndex: p.current,
+          pageSize: p.pageSize,
+          sortConditions: [],
+        },
+      }
+      if (p.field) {
+        postParam.pageCondition.sortConditions = [
+          {
+            sortField: p.field,
+            listSortDirection: p.order == 'ascend' ? 0 : 1,
+          },
+        ]
+      } else {
+        postParam.pageCondition.sortConditions = []
+      }
+      let condition: API.ConditionItem[] = []
+      if (!!data.Description) {
+        condition.push({
+          FieldName: 'Description',
+          FieldValue: data.Description,
+          ConditionalType: 1,
+        })
+      }
+      if (!!data.Description) {
+        condition.push({
+          FieldName: 'Description',
+          FieldValue: data.Description,
+          ConditionalType: 1,
+        })
+      }
+      if (!!data.PermissionName) {
+        condition.push({
+          FieldName: 'PermissionName',
+          FieldValue: data.PermissionName,
+          ConditionalType: 1,
+        })
+      }
+      postParam.queryCondition = JSON.stringify(condition)
+      // console.log(postParam);
+      return postParam
+    },
+    columns,
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+    },
+    isTreeTable: false,
+    pagination: true,
+    striped: true,
+    useSearchForm: true,
+    showTableSetting: true,
+    bordered: true,
+    showIndexColumn: true,
+    indexColumnProps: {
+      width: 60,
+    },
+    canResize: true,
+    resizeHeightOffset: 35,
+    immediate: true,
+    actionColumn: {
+      width: 80,
+      title: '操作',
+      dataIndex: 'action',
+      fixed: 'right',
+    },
+  })
+
+  function handleCreate() {
+    openModal(true, {
+      isParent: false,
+      isUpdate: false,
+    })
+  }
+
+  function handleEdit(record: Recordable) {
+    openModal(true, {
+      record,
+      isUpdate: true,
+    })
+  }
+  function handleSuccess() {
+    reload()
+  }
+</script>