规则管理-事项规则模块提交

.env

@@ -1,2 +1,2 @@
-VUE_APP_NAME=凯德主数据平台
+VUE_APP_NAME=EAM设备管理系统
 VUE_APP_API_BASE_URL=/api

src/enum/dict.js

@@ -8,5 +8,7 @@ export default {
   生命周期: 'life_cycle',
   网络状态: 'network_status',
   金额单位: 'money_unit',
-  时间单位: 'time_unit'
+  时间单位: 'time_unit',
+  规则类型: 'rule_type',
+  规则状态: 'rule_status'
 };

src/styles/index.scss

@@ -1,5 +1,5 @@
 /** 全局样式 */
 $--ele-font-path: '~ele-admin/es/style/fonts';
-// @import '~ele-admin/es/style/themes/dynamic.scss';
-// @import '~ele-admin/es/style/index.scss';
+@import '~ele-admin/es/style/themes/dynamic.scss';
+@import '~ele-admin/es/style/index.scss';
 @import './transition/index.scss';

src/utils/index.js

@@ -0,0 +1,144 @@
+
+/**
+ * This is just a simple version of deep copy
+ * Has a lot of edge cases bug
+ * If you want to use a perfect deep copy, use lodash's _.cloneDeep
+ * @param {Object} source
+ * @returns {Object}
+ */
+export function deepClone (source) {
+  if (!source && typeof source !== 'object') {
+    throw new Error('error arguments', 'deepClone')
+  }
+  const targetObj = source.constructor === Array ? [] : {}
+  Object.keys(source).forEach(keys => {
+    if (source[keys] && typeof source[keys] === 'object') {
+      targetObj[keys] = deepClone(source[keys])
+    } else {
+      targetObj[keys] = source[keys]
+    }
+  })
+  return targetObj
+}
+
+/**
+ * @description:封装方法：获取今天、昨天、明天
+ * @param {*} dates  0 今天   -1   -2
+ * @returns
+ */
+export function getDay (dates) {
+  var dd = new Date()
+  var n = dates || 0
+  dd.setDate(dd.getDate() + n)
+  var y = dd.getFullYear()
+  var m = dd.getMonth() + 1
+  var d = dd.getDate()
+  m = m < 10 ? '0' + m : m
+  d = d < 10 ? '0' + d : d
+  var day = y + '-' + m + '-' + d
+  return day
+}
+
+/**
+ * @description: 获取某月的起始、结束日期
+ * @param {*} val 年月 2023-01
+ * @returns
+ */
+export function getMonday (val) {
+  let date = new Date(val)
+  let new_year = date.getFullYear() // 取当前的年份
+  let month = date.getMonth()
+  let new_month = month + 1 // 取当前的月份
+  let mon = ''
+  let day = ''
+  if (month > 12) {
+    new_month -= 12 // 月份减
+    new_year++ // 年份增
+  }
+  let firstDay = new Date(new_year, new_month, 1) // 取当年当月中的第一天
+  let lastDay = new Date(firstDay.getTime() - 1000 * 60 * 60 * 24).getDate() // 获取当月最后一天日期
+  if (firstDay.getMonth() < 10) {
+    mon = '0' + firstDay.getMonth()
+  } else {
+    mon = firstDay.getMonth()
+  }
+  if (lastDay < 10) {
+    day = '0' + lastDay
+  } else {
+    day = lastDay
+  }
+  let startDate =
+    firstDay.getFullYear() + '-' + mon + '-' + '0' + firstDay.getDate()
+  let endDate = firstDay.getFullYear() + '-' + mon + '-' + day
+  let dateRange = [startDate, endDate]
+  return dateRange
+}
+
+/**
+ * @description: 获取本周起始日期
+ * @param {*} type s 周开始  e周结束
+ * @param {*} dates  0 本周
+ * @returns
+ */
+export function getDate (type, dates = 0) {
+  var now = new Date()
+  var nowTime = now.getTime()
+  var day = now.getDay()
+  var longTime = 24 * 60 * 60 * 1000
+  var n = longTime * 7 * (dates || 0)
+  if (type == 's') {
+    var dd = nowTime - (day - 1) * longTime + n
+  }
+  if (type == 'e') {
+    var dd = nowTime + (7 - day) * longTime + n
+  }
+  dd = new Date(dd)
+  var y = dd.getFullYear()
+  var m = dd.getMonth() + 1
+  var d = dd.getDate()
+  m = m < 10 ? '0' + m : m
+  d = d < 10 ? '0' + d : d
+  var day = y + '-' + m + '-' + d
+  return day
+}
+
+/**
+ * @description 获取最近 7天日期
+ * @returns days
+ */
+export function getRecent7Days () {
+  let days = []
+  for (let i = 0; i <= 24 * 6; i += 24) {
+    // 使用当天时间戳减去以前的时间毫秒（小时 * 分 * 秒 * 毫秒）
+    let dateItem = new Date(Date.now() - i * 60 * 60 * 1000)
+    let y = dateItem.getFullYear()
+    let m = dateItem.getMonth() + 1
+    let d = dateItem.getDate()
+    m = addDate0(m)
+    d = addDate0(d)
+    let valueItem = y + '-' + m + '-' + d
+    days.push(valueItem)
+  }
+  return days
+}
+// 给日期拼接 0
+function addDate0 (time) {
+  if (time.toString().length === 1) {
+    time = '0' + time.toString()
+  }
+  return time
+}
+
+//补零 000
+export function pushZero (num) {
+  let count = 3 - String(num).length
+  if (count > 0) {
+    return new Array(count).fill('0').join('') + num
+  }
+  return num
+}
+
+//表格分页 序号连续
+export function tableIndex (index, page, size) {
+  return index + 1 + size * (page - 1)
+}

src/views/login/index.vue

@@ -123,7 +123,7 @@
         loading: false,
         // 表单数据
         form: {
-          loginName: 'aaa',
+          loginName: 'ema',
           loginPwd: '123456',
           remember: true
         },

src/views/rulesManagement/matterRules/components/matter-add.vue

@@ -0,0 +1,490 @@
+<template>
+  <ele-modal
+    :title="dialogTitle"
+    :visible.sync="addMatterDialog"
+    :before-close="handleClose"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    width="80%"
+  >
+    <el-form
+      :model="formData"
+      v-loading="dialogLoading"
+      ref="contentConfigForm"
+      label-width="110px"
+      :show-message="false"
+      :rules="contentConfigFormRules"
+    >
+      <el-row>
+        <el-col :span="8">
+          <el-form-item label="规则名称" prop="name">
+            <el-input
+              v-model="formData.name"
+              placeholder="请输入"
+              size="small"
+              :disabled="isBindPlan"
+            ></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="规则类型" prop="ruleType">
+            <el-select
+              v-model="formData.ruleType"
+              size="small"
+              style="width: 100%"
+              :disabled="isBindPlan"
+            >
+              <el-option
+                v-for="item in ruleTypeList"
+                :key="item.code"
+                :value="item.code"
+                :label="item.label"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item label="状态" prop="status">
+            <el-switch
+              v-model="formData.status"
+              active-color="#157a2c"
+              inactive-color="#999"
+              active-text="开"
+              inactive-text="关"
+              :active-value="true"
+              :inactive-value="false"
+            >
+            </el-switch>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="周期" prop="cycleValue">
+            <rule-cycle
+              ref="cycleMultipleRef"
+              :formData="formData"
+              :pageType="pageType"
+              :isBindPlan="isBindPlan"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-table
+        ref="multipleTable"
+        v-if="formData.ruleType !== 'INVENTORY'"
+        :data="formData.ruleDetailList"
+        tooltip-effect="dark"
+        style="width: 95%; margin: auto"
+        border
+        :header-cell-style="{ background: '#F0F3F3' }"
+      >
+        <el-table-column type="index" width="100" align="center">
+          <template slot="header">
+            <el-button type="text" @click="addItem" icon="el-icon-plus" :disabled="isBindPlan"
+              >新增</el-button
+            >
+          </template>
+        </el-table-column>
+        <el-table-column prop="name" label="事项">
+          <template slot-scope="scope">
+            <el-form-item
+              :prop="'ruleDetailList.' + scope.$index + '.name'"
+              label-width="0"
+              :rules="contentConfigFormRules.name"
+            >
+              <span v-if="scope.row.readonly">{{ scope.row.name }}</span>
+              <el-input
+                v-if="!scope.row.readonly"
+                size="small"
+                placeholder="请输入"
+                v-model="scope.row.name"
+                :disabled="isBindPlan"
+              ></el-input>
+            </el-form-item>
+          </template>
+        </el-table-column>
+        <el-table-column prop="content" label="内容">
+          <template slot-scope="scope">
+            <el-form-item
+              :prop="'ruleDetailList.' + scope.$index + '.content'"
+              label-width="0"
+              :rules="contentConfigFormRules.content"
+            >
+              <span v-if="scope.row.readonly">{{ scope.row.content }}</span>
+              <el-input
+                v-if="!scope.row.readonly"
+                size="small"
+                placeholder="请输入"
+                v-model="scope.row.content"
+                :disabled="isBindPlan"
+              ></el-input>
+            </el-form-item>
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="norm" label="标准">
+          <template slot-scope="scope">
+            <el-form-item
+              :prop="'ruleDetailList.' + scope.$index + '.norm'"
+              label-width="0"
+              :rules="contentConfigFormRules.norm"
+            >
+              <span v-if="scope.row.readonly">{{ scope.row.norm }}</span>
+              <el-input
+                v-if="!scope.row.readonly"
+                size="small"
+                placeholder="请输入"
+                v-model="scope.row.norm"
+                :disabled="isBindPlan"
+              ></el-input>
+            </el-form-item>
+          </template>
+        </el-table-column>
+
+        <el-table-column width="200" label="操作">
+          <template slot-scope="scope">
+            <el-button type="text" @click="delItem(scope.$index)" size="small" :disabled="isBindPlan"
+              >删除</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>  
+    </el-form>
+	 <template v-slot:footer>
+	   <el-button @click="handleClose">取消</el-button>
+	   <el-button type="primary" @click="dataKeep">
+	     保存
+	   </el-button>
+	 </template>
+  </ele-modal>
+</template>
+<script>
+import RuleCycle from './rule-cycle'
+import { deepClone } from '@/utils/index'
+
+export default {
+  components: {  RuleCycle },
+  props: {
+    pageType: {
+      type: String,
+      default: ''
+    },
+    infoData: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    dialogTitle: {
+      type: String,
+      default: '新建规则'
+    },
+    dialogLoading: {
+      type: Boolean,
+      default: () => {
+        return false
+      }
+    }
+  },
+  watch: {
+    infoData (val) {
+      if (val && val.ruleType && this.addMatterDialog) {
+        // 编辑
+        this.formData = val
+        this.formData.ruleType = this.ruleTypeObj[val.ruleType.code]
+        if(this.pageType=='clone'){
+           this.isBindPlan = false
+           // this.$set(this.formData,'code',getRuleNo())
+           delete this.formData.id
+           delete this.formData.createUserId
+           delete this.formData.createTime
+           delete this.formData.createUserName
+           delete this.formData.isBindPlan
+           delete this.formData.isDelete
+           delete this.formData.updateTime
+           this.formData.ruleDetailList.map(item=>{
+               delete item.id
+               delete item.createTime
+               delete item.isDelete
+               delete item.updateTime
+               delete item.ruleId
+           })
+           this.formData.ruleCycleList.map(item=>{
+               delete item.id
+               delete item.createTime
+               delete item.isDelete
+               delete item.updateTime
+               delete item.ruleId
+           })
+        }else{
+          this.isBindPlan = val.isBindPlan
+        }
+      } else {
+        console.log('新增')
+        //  新增
+        this.isBindPlan = false
+        this.$refs.contentConfigForm.resetFields()
+        this.formData = {
+          // code: getRuleNo(),
+          name: '',
+          ruleType: 'PATROL',
+          status: true,
+          cycleValue: undefined,
+          cycleType: 1,
+          contentImage: [],
+          ruleCycleList: [], // 规则周期日期值
+          ruleDetailList: [
+            {
+              name: '', // 巡点检事项
+              content: '', // 巡点检内容
+              norm: '', // 巡点检标准
+              // readonly: false
+            }
+          ]
+        }
+      }
+    }
+  },
+  data () {
+    return {
+      addMatterDialog: false,
+      cycleValue: '',
+      uploadList: [],
+      formData: {
+        name: '',
+        ruleType: 'PATROL',
+        status: true,
+        cycleValue: undefined,
+        cycleType: 1,
+        contentImage: [],
+        ruleCycleList: [], // 规则周期日期值
+        ruleDetailList: [
+          {
+            name: '', // 巡点检事项
+            content: '', // 巡点检内容
+            norm: '', // 巡点检标准
+            // readonly: false
+          }
+        ]
+      },
+      contentConfigFormRules: {
+        name: [{ required: true, message: '请输入规则名称', trigger: 'blur' }],
+        ruleType: [
+          { required: true, message: '请选择规则类型', trigger: 'change' }
+        ],
+        cycleValue: [
+          { required: true, message: '请输入巡点检周期', trigger: 'blur' }
+        ],
+        contentImage: [
+          { required: false, message: '请上传图片', trigger: 'blur' }
+        ],
+        status: [{ required: true }],
+        name: [
+          { required: true, message: '请输入巡点检事项', trigger: 'blur' }
+        ],
+        content: [
+          { required: true, message: '请输入巡点检内容', trigger: 'blur' }
+        ],
+        norm: [{ required: true, message: '请输入巡点检标准', trigger: 'blur' }]
+      },
+      ruleTypeObj: {
+        1: 'PATROL',
+        2: 'MAINTAIN',
+        4: 'INVENTORY'
+      },
+      ruleTypeList: [
+        { code: 'PATROL', label: '巡点检规则' },
+        { code: 'MAINTAIN', label: '保养规则' },
+        { code: 'INVENTORY', label: '盘点规则' }
+      ],
+      isBindPlan:false
+    }
+  },
+  methods: {
+    handleClose () {
+      this.addMatterDialog = false
+      this.$emit('handleClose')
+    },
+    addItem () {
+      if (this.formData.ruleDetailList) {
+        this.formData.ruleDetailList.push({
+          name: '', // 巡点检事项
+          content: '', // 巡点检内容
+          norm: '', // 巡点检标准
+          readonly: false
+        })
+      } else {
+        this.formData.ruleDetailList = [
+          {
+            name: '', // 巡点检事项
+            content: '', // 巡点检内容
+            norm: '', // 巡点检标准
+            readonly: false
+          }
+        ]
+      }
+    },
+    saveItem (index, row) {
+      this.$nextTick(() => {
+        let flag = false
+        let name = row.name
+        let content = row.content
+        let norm = row.norm
+        flag = name && content && norm
+        this.$refs.contentConfigForm.validate(valid => {
+          if (valid || flag) {
+            this.$set(this.formData.ruleDetailList[index], 'readonly', true)
+          }
+        })
+      })
+    },
+    upload (data) {
+      if (data && data[0]?.accessUrl) {
+        this.formData.contentImage = data
+      } else {
+        this.formData.contentImage = []
+      }
+      this.$nextTick(() => {
+        this.$refs.contentConfigForm.validateField('contentImage')
+      })
+      console.log(this.formData.contentImage)
+    },
+    editItem (index) {
+      this.$nextTick(() => {
+        this.$set(this.formData.ruleDetailList[index], 'readonly', false)
+      })
+    },
+    delItem (index) {
+      this.formData.ruleDetailList.splice(index, 1)
+    },
+
+    // 保存
+    dataKeep () {
+      let form = deepClone(this.formData)
+      form.ruleCycleList = this.$refs.cycleMultipleRef.ruleCycleList
+      switch(form.cycleType){
+          case 1:
+              if(form.ruleCycleList[0].minute===''){
+                 this.$message.warning('周期信息需补充完整！')
+                 return;
+              }
+              break;
+          case 2:
+              if(form.ruleCycleList[0].hour===''||form.ruleCycleList[0].minute===''){
+                 this.$message.warning('周期信息需补充完整！')
+                 return;
+              }
+              break;
+          case 4:
+              if(form.ruleCycleList[0].day===''||form.ruleCycleList[0].hour===''||form.ruleCycleList[0].minute===''){
+                 this.$message.warning('周期信息需补充完整！')
+                 return;
+              }
+              break;
+          case 5:
+              if(form.ruleCycleList[0].month===''||form.ruleCycleList[0].day===''||form.ruleCycleList[0].hour===''||form.ruleCycleList[0].minute===''){
+                 this.$message.warning('周期信息需补充完整！')
+                 return;
+              }
+              break;
+          case 11:
+               let flg = false
+              form.ruleCycleList.map((item,index)=>{
+                  if(item.hour===''||item.minute===''){
+                     flg = true
+                  }
+              })
+              if(flg){
+                this.$message.warning('周期信息需补充完整！')
+                return;
+              }
+              break;
+          case 13:
+               let flag = false
+              form.ruleCycleList.map((item,index)=>{
+                  if(item.day===''||item.hour===''){
+                     flag = true
+                  }
+              })
+              if(flag){
+                this.$message.warning('周期信息需补充完整！')
+                return;
+              }
+              break;
+          case 14:
+               let fla = false
+              form.ruleCycleList.map((item,index)=>{
+                  if(item.month===''||item.day===''||item.hour===''){
+                     fla = true
+                  }
+              })
+              if(fla){
+                this.$message.warning('周期信息需补充完整！')
+                return;
+              }
+              break;
+      }
+      this.$refs.contentConfigForm.validate(async valid => {
+        if (valid) {
+          // let form = deepClone(this.formData)
+          // form.ruleCycleList = this.$refs.cycleMultipleRef.ruleCycleList
+          form.ruleDetailList.forEach(item => {
+            if (item.ruleType) {
+              item.ruleType = this.ruleTypeObj[item.ruleType.code]
+            }
+          })
+          let res = await patrol.saveOrUpdateNew(form)
+          if (res.success) {
+            this.$message.success('操作成功！')
+            this.handleClose()
+            this.$emit('handleList')
+          }
+        } else {
+          this.$message.warning('请将信息补充完整！')
+        }
+      })
+    },
+  }
+}
+</script>
+<style scoped lang="scss">
+.form-ipt {
+  width: 310px;
+}
+.details-div {
+  font-size: 14px;
+  padding-left: 40px;
+  .details-div-title {
+    display: flex;
+    justify-content: space-between;
+    span {
+      padding-top: 8px;
+    }
+  }
+}
+.zw-container {
+  height: 450px;
+}
+.page-footer-btn {
+  margin: 20px 0;
+  text-align: center;
+}
+// .app-container {
+::v-deep .el-form-item {
+  margin-bottom: 14px;
+}
+::v-deep .el-table__body-wrapper {
+  .el-form-item {
+    margin-bottom: 0;
+  }
+}
+::v-deep .el-form-item__error {
+  padding-top: 0;
+}
+.cycle_value {
+  ::v-deep .el-input__inner {
+    text-align: center;
+  }
+}
+// }
+</style>

src/views/rulesManagement/matterRules/components/matter-search.vue

@@ -0,0 +1,105 @@
+<!-- 搜索表单 -->
+<template>
+  <el-form
+    label-width="80px"
+    class="ele-form-search"
+    @keyup.enter.native="search"
+    @submit.native.prevent
+  >
+    <el-row :gutter="15">
+      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
+        <el-form-item label="规则名称:">
+          <el-input clearable v-model="where.code" placeholder="请输入" />
+        </el-form-item>
+		<el-form-item label="规则状态:">
+		  <DictSelection dictName="规则状态" clearable v-model="where.staus">
+		  </DictSelection>
+		</el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
+        <el-form-item label="规则编码:">
+          <el-input clearable v-model="where.name" placeholder="请输入" />
+        </el-form-item>
+        <el-form-item label="创建时间:">
+            <el-date-picker
+                v-model="where.time"
+                type="daterange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+        		value-format="yyyy-MM-dd HH:mm:ss"
+        		:default-time="['00:00:00', '23:59:59']"
+        	>
+            </el-date-picker>
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
+        <el-form-item label="规则类型:">
+          <DictSelection dictName="规则类型" clearable v-model="where.type">
+          </DictSelection>
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
+        <el-form-item label="创建人:">
+          <el-input clearable v-model="where.texture" placeholder="请输入" />
+        </el-form-item>
+		<div class="ele-form-actions">
+		  <el-button
+		    type="primary"
+		    icon="el-icon-search"
+		    class="ele-btn-icon"
+		    @click="search"
+		    size="small"
+		  >
+		    查询
+		  </el-button>
+		   <el-button @click="reset"
+		     icon="el-icon-refresh-left"
+		     size="small"
+		     type="primary"
+		   >重置</el-button>
+		</div>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+
+<script>
+  import { login } from '@/api/login';
+  export default {
+    data() {
+      // 默认表单数据
+      const defaultWhere = {
+        name: '',
+        code: '',
+        fixCode:'',
+        ownershipGroupId:''
+      };
+      return {
+        // 表单数据
+        where: { ...defaultWhere },
+        treeData:[]
+      };
+    },
+    computed: {
+      // 是否开启响应式布局
+      styleResponsive() {
+        return this.$store.state.theme.styleResponsive;
+      }
+    },
+    created(){
+    },
+    methods: {
+      /* 搜索 */
+      search() {
+        console.log(this.where);
+        this.$emit('search', this.where);
+      },
+      /*  重置 */
+      reset() {
+        this.where = { ...this.defaultWhere };
+        this.search();
+      }
+    }
+  };
+</script>

src/views/rulesManagement/matterRules/components/rule-cycle.vue

@@ -0,0 +1,457 @@
+<template>
+  <div>
+    <el-row :gutter="8" v-if="pageType">
+      <el-col :span="2">
+        <el-input
+          @input="
+            value => (formData.cycleValue = value.replace(/^(0+)|[^\d]+/g, ''))
+          "
+          class="cycle_value"
+          size="small"
+          v-model.number="formData.cycleValue"
+          @change="cycleValueChange"
+          placeholder="请输入"
+          :disabled="isBindPlan"
+        ></el-input>
+      </el-col>
+      <el-col :span="3">
+        <el-select
+          v-model="formData.cycleType"
+          size="small"
+          @change="handleCycleTypeChange"
+          :disabled="isBindPlan"
+        >
+          <el-option
+            v-for="item in cycleOpt"
+            :key="item.code"
+            :label="item.label"
+            :value="item.code"
+          ></el-option>
+        </el-select>
+      </el-col>
+
+      <el-col :span="8" v-if="[1, 2, 4, 5].includes(formData.cycleType)">
+        <div
+          v-for="(item, index) in ruleCycleList"
+          :key="index"
+          class="cycle01_box"
+        >
+          <el-input
+            v-model.number="item.month"
+            size="small"
+            oninput="value = value.replace(/^(0+)|[^\d]+/g,'')"
+            @input="e => inputMonth(e, index)"
+            v-if="[5].includes(formData.cycleType)"
+            :disabled="isBindPlan"
+          >
+            <template #suffix>月</template>
+          </el-input>
+
+          <el-input
+            v-model.number="item.day"
+            size="small"
+            oninput="value = value.replace(/^(0+)|[^\d]+/g,'')"
+            @input="e => inputDay(e, index)"
+            v-if="[4, 5].includes(formData.cycleType)"
+            :disabled="isBindPlan"
+          >
+            <template #suffix>日</template>
+          </el-input>
+
+          <el-input
+            v-model.number="item.hour"
+            size="small"
+            oninput="value = value.replace(/^0+(\d)|[^\d]+/g,'')"
+            @input="e => inputHour(e, index)"
+            v-if="[2, 4, 5].includes(formData.cycleType)"
+            :disabled="isBindPlan"
+          >
+            <template #suffix>时</template>
+          </el-input>
+
+          <el-input
+            v-model.number="item.minute"
+            size="small"
+            oninput="value = value.replace(/^0+(\d)|[^\d]+/g,'')"
+            @input="e => inputMinute(e, index)"
+            :disabled="isBindPlan"
+          >
+            <template #suffix>分</template>
+          </el-input>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row v-else>
+      <el-col :span="24" class="cycle_time_column">
+        <span style="margin-right: 20px"
+          >{{ formData.cycleValue }}{{ cycleOptObj[formData.cycleType] }}</span
+        >
+        <div v-if="[1, 2, 4, 5].includes(formData.cycleType)">
+          <span v-if="[5].includes(formData.cycleType)"
+            >{{ ruleCycleList[0].month }}月</span
+          >
+          <span v-if="[4, 5].includes(formData.cycleType)"
+            >{{ ruleCycleList[0].day }}日</span
+          >
+          <span v-if="[2, 4, 5].includes(formData.cycleType)"
+            >{{ ruleCycleList[0].hour }}时</span
+          >
+          <span>{{ ruleCycleList[0].minute }}分</span>
+        </div>
+      </el-col>
+    </el-row>
+
+    <!-- 根据周期类型展示时间组件 11,12,13,14 -->
+    <div>
+      <!-- 次/天 -->
+      <el-row :gutter="20" v-if="formData.cycleType === 11">
+        <el-col
+          v-for="(item, index) in ruleCycleList"
+          :key="index"
+          :span="6"
+          class="cycle_item"
+        >
+          <span>第{{ index + 1 }}次</span>
+          <div class="cycle_sub_item" v-if="pageType">
+            <el-input
+              v-model.number="item.hour"
+              size="small"
+              placeholder="时"
+              oninput="value = value.replace(/^0+(\d)|[^\d]+/g,'')"
+              @input="e => inputHour(e, index)"
+              :disabled="isBindPlan"
+            >
+              <template #suffix>时</template>
+            </el-input>
+          </div>
+          <div v-else>{{ item.hour }}时</div>
+          <div class="cycle_sub_item" v-if="pageType">
+            <el-input
+              v-model.number="item.minute"
+              size="small"
+              oninput="value = value.replace(/^0+(\d)|[^\d]+/g,'')"
+              @input="e => inputMinute(e, index)"
+              placeholder="分"
+              :disabled="isBindPlan"
+            >
+              <template #suffix>分</template>
+            </el-input>
+          </div>
+          <div v-else>
+            {{ item.minute > 9 ? item.minute : '0' + item.minute }}分
+          </div>
+        </el-col>
+      </el-row>
+      <!-- 次/周 -->
+      <el-row :gutter="20" v-else-if="formData.cycleType === 12">
+        <el-col
+          v-for="(item, index) in ruleCycleList"
+          :key="index"
+          :span="6"
+          class="cycle_item"
+        >
+          <span>第{{ index + 1 }}次</span>
+          <div class="cycle_sub_item" v-if="pageType">
+            <el-select v-model.number="item.week" size="small" placeholder="周" :disabled="isBindPlan">
+              <el-option
+                v-for="item in weekList"
+                :key="item.value"
+                :value="item.value"
+                :label="item.label"
+              ></el-option> </el-select
+            >周
+          </div>
+          <div v-else>{{ item.week }}</div>
+          <div class="cycle_sub_item" v-if="pageType">
+            <el-input
+              v-model.number="item.hour"
+              size="small"
+              placeholder="时"
+              oninput="value = value.replace(/^0+(\d)|[^\d]+/g,'')"
+              @input="e => inputHour(e, index)"
+              :disabled="isBindPlan"
+            >
+              <template #suffix>时</template>
+            </el-input>
+          </div>
+          <div v-else>{{ item.hour }}时</div>
+        </el-col>
+      </el-row>
+      <!-- 次/月 -->
+      <el-row :gutter="20" v-else-if="formData.cycleType === 13">
+        <el-col
+          v-for="(item, index) in ruleCycleList"
+          :key="index"
+          :span="6"
+          class="cycle_item"
+        >
+          <span>第{{ index + 1 }}次</span>
+          <div class="cycle_sub_item" v-if="pageType">
+            <el-input
+              v-model.number="item.day"
+              size="small"
+              placeholder="日"
+              oninput="value = value.replace(/^(0+)|[^\d]+/g,'')"
+              @input="e => inputDay(e, index)"
+              :disabled="isBindPlan"
+            >
+              <template #suffix>日</template>
+            </el-input>
+          </div>
+          <div v-else>{{ item.day }}日</div>
+          <div class="cycle_sub_item" v-if="pageType">
+            <el-input
+              v-model.number="item.hour"
+              size="small"
+              placeholder="时"
+              oninput="value = value.replace(/^0+(\d)|[^\d]+/g,'')"
+              @input="e => inputHour(e, index)"
+              :disabled="isBindPlan"
+            >
+              <template #suffix>时</template>
+            </el-input>
+          </div>
+          <div v-else>{{ item.hour }}</div>
+        </el-col>
+      </el-row>
+      <!-- 次/年 -->
+      <el-row :gutter="20" v-else-if="formData.cycleType === 14">
+        <el-col
+          v-for="(item, index) in ruleCycleList"
+          :key="index"
+          :span="6"
+          class="cycle_item"
+        >
+          <span>第{{ index + 1 }}次</span>
+          <div class="cycle_sub_item" v-if="pageType">
+            <el-input
+              v-model.number="item.month"
+              size="small"
+              placeholder="月"
+              oninput="value = value.replace(/^(0+)|[^\d]+/g,'')"
+              @input="e => inputMonth(e, index)"
+              :disabled="isBindPlan"
+            >
+              <template #suffix>月</template>
+            </el-input>
+          </div>
+          <div v-else>{{ item.month }}月</div>
+          <div class="cycle_sub_item" v-if="pageType">
+            <el-input
+              v-model.number="item.day"
+              size="small"
+              placeholder="日"
+              oninput="value = value.replace(/^(0+)|[^\d]+/g,'')"
+              @input="e => inputDay(e, index)"
+              :disabled="isBindPlan"
+            >
+              <template #suffix>日</template>
+            </el-input>
+          </div>
+          <div v-else>{{ item.day }}日</div>
+          <div class="cycle_sub_item" v-if="pageType">
+            <el-input
+              v-model.number="item.hour"
+              size="small"
+              placeholder="时"
+              oninput="value = value.replace(/^0+(\d)|[^\d]+/g,'')"
+              @input="e => inputHour(e, index)"
+              :disabled="isBindPlan"
+            >
+              <template #suffix>时</template>
+            </el-input>
+          </div>
+          <div v-else>{{ item.hour }}时</div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    formData: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    // 编辑edit和新增add
+    pageType: {
+      type: String,
+      default: ''
+    },
+
+    isBindPlan:{
+      type: Boolean,
+      default: () => {
+        return false
+      }
+    }
+  },
+  data () {
+    return {
+      ruleCycleList: [
+        // {
+        //   year: '', // 周期年
+        //   month: '', // 周期月
+        //   week: '', // 周期周
+        //   day: '', // 周期日
+        //   hour: '', // 周期时
+        //   minute: '', // 周期分
+        //   second: '' // 周期秒
+        // }
+      ],
+      weekList: [
+        { value: 1, label: '周一' },
+        { value: 2, label: '周二' },
+        { value: 3, label: '周三' },
+        { value: 4, label: '周四' },
+        { value: 5, label: '周五' },
+        { value: 6, label: '周六' },
+        { value: 7, label: '周日' }
+      ],
+      cycleOptObj: {
+        1: '时/次',
+        2: '天/次',
+        //3: '周/次',
+        4: '月/次',
+        5: '年/次',
+        11: '次/天',
+        //12: '次/周',
+        13: '次/月',
+        14: '次/年'
+      },
+      cycleOpt: [
+        { code: 1, label: '时/次' },
+        { code: 2, label: '天/次' },
+        //{ code: 3, label: '周/次' },
+        { code: 4, label: '月/次' },
+        { code: 5, label: '年/次' },
+        { code: 11, label: '次/天' },
+        //{ code: 12, label: '次/周' },
+        { code: 13, label: '次/月' },
+        { code: 14, label: '次/年' }
+      ]
+    }
+  },
+  watch: {
+    formData (val) {
+      this.ruleCycleList = val.ruleCycleList
+    }
+  },
+  methods: {
+    // 巡点检周期输入数量
+    cycleValueChange (val) {
+      console.log(val)
+      const cycleType01 = [1, 2, 4, 5]
+      const cycleType02 = [11, 13, 14]
+      this.ruleCycleList = []
+
+      // 次在后
+      if (cycleType01.includes(this.formData.cycleType)) {
+        this.ruleCycleList.push({
+          month: 1, // 周期月
+          day: 1, // 周期日
+          hour: 0, // 周期时
+          minute: 0 // 周期分
+        })
+      }
+
+      // 次在前
+      if (cycleType02.includes(this.formData.cycleType)) {
+        for (let i = 0; i < val; i++) {
+          this.ruleCycleList.push({
+            month: 1, // 周期月
+            day: 1, // 周期日
+            hour: 0, // 周期时
+            minute: 0 // 周期分
+          })
+        }
+      }
+
+      // 时/次
+      if (this.formData.cycleType === 1) {
+        this.ruleCycleList.forEach(item => {
+          delete item.month
+          delete item.day
+          delete item.hour
+        })
+      }
+      // 天/次、次/天
+      if ([2, 11].includes(this.formData.cycleType)) {
+        this.ruleCycleList.forEach(item => {
+          delete item.month
+          delete item.day
+        })
+      }
+      // 月/次、次/月
+      if ([4, 13].includes(this.formData.cycleType)) {
+        this.ruleCycleList.forEach(item => {
+          delete item.month
+        })
+      }
+    },
+
+    // 周期类型选择
+    handleCycleTypeChange () {
+      this.cycleValueChange(this.formData.cycleValue)
+    },
+
+    // 输入月
+    inputMonth (e, index) {
+      if (e > 12) {
+        this.ruleCycleList[index].month = 1
+        return this.$message.warning('月份最大值为12月')
+      }
+    },
+    // 输入日
+    inputDay (e, index) {
+      if (e > 31) {
+        this.ruleCycleList[index].day = 1
+        return this.$message.warning('日期最大值为31日')
+      }
+    },
+    // 输入时
+    inputHour (e, index) {
+      if (e > 23) {
+        this.ruleCycleList[index].hour = 0
+        return this.$message.warning('时间最大值为23时')
+      }
+    },
+    // 输入时
+    inputMinute (e, index) {
+      if (e > 59) {
+        this.ruleCycleList[index].minute = 0
+        return this.$message.warning('分钟最大值为59分')
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.cycle_item {
+  display: flex;
+  align-items: center;
+  color: #666;
+  > span {
+    width: 50px;
+  }
+  .cycle_sub_item {
+    flex: 1;
+    display: flex;
+    align-items: center;
+  }
+}
+.cycle01_box {
+  display: flex;
+  ::v-deep .el-input {
+    width: 80px;
+  }
+}
+.cycle_time_column {
+  display: flex;
+}
+</style>

src/views/rulesManagement/matterRules/details.vue

@@ -0,0 +1,268 @@
+<template>
+  <div class="page">
+    <el-form label-width="140px">
+      <div class="content-detail">
+        <div class="basic-details">
+          <div class="basic-details-title">
+            <span class="border-span">基本信息</span>
+          </div>
+          <el-row>
+            <el-col :span="6">
+              <el-form-item label="规则编码">
+                <span> {{ infoData.code }} </span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="规则名称">
+                <span> {{ infoData.name }} </span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="规则类型">
+                <span>
+                  {{
+                    infoData.ruleType ? ruleTypeObj[infoData.ruleType.code] : ''
+                  }}</span
+                >
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="状态">
+                <span class="primary-text" v-if="infoData.status">生效</span>
+                <span class="danger-text" v-else-if="!infoData.status"
+                  >失效</span
+                >
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="创建人">
+                <span> {{ infoData.createUserName }} </span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="创建时间">
+                <span> {{ infoData.createTime }} </span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="巡点检周期">
+                <!-- <cycleMultiple :formData="infoData" /> -->
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="操作方式/注意事项">
+                <el-link
+                  v-for="item in infoData.contentImage"
+                  @click="$fileSystemDownload(item)"
+                  :key="item.docId"
+                  >{{ item.name }}</el-link
+                >
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </div>
+        <template v-if="!(infoData.ruleType && infoData.ruleType.code == 4)">
+          <div class="basic-details-title">
+            <span class="border-span">内容配置</span>
+          </div>
+          <el-table
+            ref="multipleTable"
+            :data="tableData"
+            tooltip-effect="dark"
+            style="width: 100%"
+            border
+            :header-cell-style="{ background: '#F0F3F3' }"
+          >
+            <el-table-column type="index" label="序号" width="60"/>
+            <el-table-column prop="name" label="检测事项" />
+            <el-table-column prop="content" label="检测内容" />
+            <el-table-column prop="norm" label="检测标准" />
+          </el-table>
+        </template>
+      </div>
+
+      <div class="content-detail" v-show="num == 2"></div>
+    </el-form>
+  </div>
+</template>
+<script>
+// import selectUpload from '@/components/selectUpload'
+// import selectTree from '@/components/selectTree'
+// import contentConfig from '@/api/maintenance/patrol/ruleConfig'
+// import cycleMultiple from '@/components/ruleCycleMultiple'
+
+export default {
+  // components: { selectUpload, selectTree, cycleMultiple },
+  data () {
+    return {
+      num: 1,
+      dialogVisible: false,
+      infoData: {},
+      form: {},
+      type: [],
+      tableData: [],
+      ruleTypeObj: {
+        1: '巡点检规则',
+        2: '保养规则',
+        4: '盘点规则'
+      }
+    }
+  },
+  async created () {
+    // this.getInfo()
+  },
+  methods: {
+    delete () {},
+    // 点击切换事件
+    tab (index) {
+      this.num = index
+    },
+
+    // 表格数据
+    async getInfo () {
+      let res = await contentConfig.getInfoNew(this.$route.query.id)
+      if (res.success) {
+        this.tableData = res.data.ruleDetailList
+        this.infoData = res.data
+        console.log(this.infoData)
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.page {
+  padding: 10px;
+}
+.page-title {
+  background: #fff;
+  font-size: 18px;
+  padding: 6px 20px;
+  font-weight: 500;
+  .page-title-div {
+    margin: 5px 0;
+    height: 30px;
+    line-height: 30px;
+    border-bottom: 1px solid #eaeefb;
+    .title-div-no {
+      margin-left: 10px;
+      font-weight: 400;
+      color: #909090;
+      font-size: 14px;
+    }
+  }
+}
+.page-data {
+  padding-top: 10px;
+}
+.content-detail {
+  background: #fff;
+  padding: 20px;
+}
+.flows {
+  .flow-left {
+    width: 156px;
+    height: 70px;
+    border: 1px dashed #ccc;
+    padding: 10px;
+  }
+  .row {
+    margin-top: 13px;
+  }
+}
+.basic-details-title {
+  margin-bottom: 12px;
+  margin-top: 20px;
+  border-bottom: 1px solid #1890ff;
+  padding-bottom: 8px;
+  display: flex;
+  justify-content: space-between;
+}
+.basic-details-title .border-span {
+  height: 18px;
+  font-size: 16px;
+  border-left: 4px solid #1890ff;
+  padding-left: 8px;
+
+  font-weight: 500;
+}
+.heade-right {
+  // float: right;
+  .heade-right-content {
+    margin-right: 12px;
+    font-size: 14px;
+    display: inline-block;
+    .content-key {
+      color: #3e3e3e;
+      margin-right: 12px;
+      font-weight: 500;
+    }
+    .content-value {
+      color: #000;
+    }
+  }
+}
+.list-title {
+  font-size: 14px;
+  color: #3e3e3e;
+  margin: 10px 0px;
+}
+.goods {
+  background: #a30014;
+  border: 1px solid #a30014;
+}
+.details-title {
+  display: inline-block;
+  color: #6e6e6e;
+  font-size: 14px;
+  font-weight: bold;
+  margin-right: 13px;
+  width: 70px;
+  text-align: right;
+}
+.details-con {
+  color: #3e3e3e;
+  font-size: 14px;
+}
+.detailed-tab {
+  margin-left: 10px;
+  margin-top: 10px;
+}
+::v-deep .el-form-item--medium .el-form-item__label {
+  color: #6e6e6e;
+  font-size: 14px;
+  font-weight: bold;
+}
+.warehouse {
+  display: block;
+  border-bottom: 1px solid #eaeefb;
+  padding: 10px 0;
+}
+.box-card {
+  .store-box {
+    width: 80%;
+    .store-box-span {
+      display: inline-block;
+      font-size: 14px;
+      height: 50px;
+      width: 50px;
+      text-align: center;
+      line-height: 50px;
+      color: #fff;
+      margin: 2px;
+    }
+  }
+}
+.vacant {
+  background: #3196fb;
+}
+.inUse {
+  background: #157a2c;
+}
+.invalid {
+  background: #cccccc;
+}
+.full {
+  background: #cc3300;
+}
+</style>

src/views/rulesManagement/matterRules/index.vue

@@ -0,0 +1,224 @@
+<template>
+  <div class="ele-body">
+     <el-card shadow="never" v-loading="loading">
+	   <matter-search @search="reload">
+	   </matter-search>
+	   <!-- 数据表格 -->
+	   <ele-pro-table
+	     ref="table"
+	     :columns="columns"
+	     :datasource="datasource"
+	     cache-key="systemRoleTable"
+	   >
+	     <!-- 表头工具栏 -->
+	     <template v-slot:toolbar>
+	       <el-button
+	         size="small"
+	         type="primary"
+	         icon="el-icon-plus"
+	         class="ele-btn-icon"
+	         @click="openEdit()"
+	       >
+	         新建
+	       </el-button>
+<!-- 		   <el-button
+		     size="small"
+		     type="primary"
+		     class="ele-btn-icon"
+		     @click="goDetail()"
+		   >
+		     详情
+		   </el-button> -->
+	     </template>
+<!-- 	     <template v-slot:enable="{ row }">
+	       <el-switch
+	         v-model="row.enable"
+	         active-color="#13ce66"
+	         inactive-color="#ff4949"
+	         :active-value="1"
+	         :inactive-value="0"
+	         @change="changeEnable(row)"
+	       >
+	       </el-switch>
+	     </template> -->
+	     <!-- 操作列 -->
+	     <template v-slot:action="{ row }">
+		   <el-link
+		     type="primary"
+		     :underline="false"
+		     icon="el-icon-finished"
+		     @click="openAuth(row)"
+		   >
+		     克隆
+		   </el-link>
+	       <el-link
+	         type="primary"
+	         :underline="false"
+	         icon="el-icon-edit"
+	         @click="openEdit(row)"
+	       >
+	         修改
+	       </el-link>
+	       <el-popconfirm
+	         class="ele-action"
+	         title="确定要删除此角色吗？"
+	         @confirm="remove(row)"
+	       >
+	         <template v-slot:reference>
+	           <el-link type="danger" :underline="false" icon="el-icon-delete">
+	             删除
+	           </el-link>
+	         </template>
+	       </el-popconfirm>
+	     </template>
+	   </ele-pro-table>
+     </el-card>
+	 
+	 <!-- 新建或编辑弹窗 -->
+	 <matter-add
+	   ref="addMatterRulesRef"
+	   :pageType="pageType"
+	   :dialogTitle="dialogTitle"
+	   @done="reload"
+	 />
+  </div>
+</template>
+
+<script>
+
+  import MatterSearch from './components/matter-search.vue';
+  import MatterAdd from './components/matter-add.vue';
+  import { pageRoles } from '@/api/system/role'; 
+  export default {
+    components: {
+      MatterSearch,
+	  MatterAdd
+    },
+    data () {
+      return {
+		// 表格列配置
+		columns: [
+		  {
+		    columnKey: 'index',
+		    label: '序号',
+		    type: 'index',
+		    width: 55,
+		    align: 'center',
+		    showOverflowTooltip: true,
+		    fixed: 'left'
+		  },
+		  {
+		    prop: 'code',
+		    label: '规则编码',
+		    align: 'center',	
+		    showOverflowTooltip: true,
+		    minWidth: 110
+		  },
+		  {
+		    prop: 'groupId',
+		    label: '状态',
+		    align: 'center',
+		    showOverflowTooltip: true,
+		    minWidth: 110
+		  },
+		  {
+		    prop: 'enable',
+		    label: '规则类型',
+		    align: 'center',	
+		    showOverflowTooltip: true,
+		    slot: 'enable',
+		    minWidth: 110
+		  },
+		  {
+		    prop: 'name',
+		    label: '规则名称',
+		    align: 'center',	
+		    showOverflowTooltip: true,
+		    minWidth: 110
+		  },
+		  {
+		    prop: 'cycle',
+		    label: '周期',
+		    align: 'center',	
+		    showOverflowTooltip: true,
+		    minWidth: 110
+		  },
+		  {
+		    prop: 'creater',
+		    label: '创建人',
+		    align: 'center',	
+		    showOverflowTooltip: true,
+		    minWidth: 110
+		  },
+		  {
+		    prop: 'createTime',
+		    label: '创建时间',
+		    align: 'center',
+		    showOverflowTooltip: true,
+		    minWidth: 110,
+		    formatter: (_row, _column, cellValue) => {
+		      return this.$util.toDateString(cellValue);
+		    }
+		  },
+		  {
+		    columnKey: 'action',
+		    label: '操作',
+		    width: 230,
+		    align: 'center',
+		    resizable: false,
+		    slot: 'action',
+		    showOverflowTooltip: true
+		  }
+		],
+        // 加载状态
+        loading: false,
+        pageType: 'add',
+        dialogTitle: '',
+      };
+    },
+    computed: {
+
+    },
+    methods: {
+      /* 表格数据源 */
+      datasource({ page, limit, where, order }) {
+        return pageRoles({ pageNum: page, size: limit, ...where });
+      },
+      async changeEnable(row) {
+        const res = await putRoles(row);
+        if (res.code == 0) {
+          this.$message({
+            type: 'success',
+            message: '修改成功',
+            customClass: 'ele-message-border'
+          });
+          this.reload();
+        }
+      },
+      /* 刷新表格 */
+      reload(where) {
+        this.$refs.table.reload({ page: 1, where });
+      },
+	  
+	  openEdit(row){
+		  this.pageType = 'add'
+		  this.dialogTitle = '新建规则'
+		  this.$refs.addMatterRulesRef.addMatterDialog = true
+	  },
+	  
+	  goDetail(){
+		  this.$router.push({
+		    path: '/rulesManagement/matterRules/details',
+		    // query: {
+		    //   id
+		    // }
+		  })
+	  }
+	  
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+
+</style>