widget.qw 1.0.83 → 1.0.85

package/src/components/AuditBar.vue

@@ -1,397 +1,397 @@
-<template>
-  <div class="widget">
-    <van-field v-if="canPass || canRefuse" v-model="data.memo" class="memo" label="审批意见" placeholder="请输入审批意见" />
-
-    <van-popover v-if="canRefuse" placement="top-start" v-model:show="data.isShowPop" :actions="formatPrevSteps"
-      actions-direction="vertical" @select="onSelectRefuse">
-      <template #reference>
-        <van-button class="refuse-btn" type="danger" @click="onRefuse">驳回</van-button>
-      </template>
-    </van-popover>
-
-    <van-button v-if="canPass" class="pass-btn" type="primary" native-type="submit" @click="onPass">提交</van-button>
-
-    <van-button class="apply-btn" v-if="canApply" type="primary" native-type="submit"
-      @click="onApply">申请</van-button>
-
-    <div class="audit-title" v-if="data.process && data.process.id">{{ formatProcessTitle }}</div>
-
-    <van-steps class="task-list" direction="vertical" :active="data.process.startedTaskIndex"
-      v-if="data.process && data.process.id">
-      <van-step v-for="(task, i) in data.process.tasks" :key="i">
-        <div class="task-title">{{ formatTitle(task) }}</div>
-        <div class="task-user" v-if="task.executors" v-for="(executor, j) in task.executors" :key="j">
-          {{ formatExecutor(executor, task) }}
-        </div>
-      </van-step>
-    </van-steps>
-  </div>
-</template>
-
-<script setup>
-import { ref, reactive, computed, onMounted, defineProps, defineEmits, watch } from "vue"
-import util from '../util'
-import lodash from 'lodash'
-
-const props = defineProps({
-  processId: {
-    type: Number,
-    default: 0
-  },
-  mouldId: {
-    type: Number,
-    default: 0
-  },
-  userId: {
-    type: String,
-    default: ''
-  },
-  form: {
-    type: Object,
-    default: null
-  },
-  process_detail: {
-    type: Function,
-    default: null
-  }
-})
-const emit = defineEmits(['pass', 'refuse', 'apply', 'auth'])
-const data = reactive({
-  isShowPop: false,
-  process: {},
-  memo: '',
-  stepAuth: {},
-  canApply: false
-})
-const formatPrevSteps = computed(() => {
-  if (!data.process || !data.process.prevSteps || data.process.prevSteps.length < 1) {
-    return []
-  }
-
-  return data.process.prevSteps.map((item) => {
-    return {
-      stepId: item.id,
-      text: item.title
-    }
-  })
-})
-
-const canApply = computed(()=>{
-  return !data.process.id && data.canApply
-})
-
-const canPass = computed(() => {
-  return data.process && data.process.id && data.process.canPass
-})
-const canRefuse = computed(() => {
-  return data.process && data.process.id && data.process.canRefuse
-})
-
-onMounted(() => {
-
-})
-
-const onPass = () => {
-  // 1秒节流
-  lodash.throttle(() => {
-    emit('pass', {
-      memo: data.memo
-    })
-  }, 5000)()
-}
-const onRefuse = () => {
-
-}
-const onSelectRefuse = (action) => {
-  emit('refuse',
-    {
-      memo: data.memo,
-      action: action
-    }
-  )
-}
-
-const onApply = () => {
-  // 1秒节流
-  lodash.throttle(() => {
-    emit('apply', {
-      memo: data.memo
-    })
-  }, 5000)()
-}
-
-const queryDetail = async () => {
-  if (!props.processId)
-    return
-  const params = {
-    id: props.processId
-  }
-
-  if (!util.process_detail)
-    return
-
-  const res = await util.process_detail(params)
-  if (res.code != 200)
-    return
-
-  //防止网络请求先发后返回
-  //参数变化时,扔掉返回
-  if (params.id != props.processId && props.processId && !params.id)
-    return
-
-  data.process = res.data
-}
-
-const queryStepAuth = async () => {
-  if (!props.processId && !props.mouldId)
-    return
-
-  const params = {
-    processId: props.processId,
-    mouldId: props.mouldId,
-    userId: props.userId,
-    form: props.form
-  }
-  const res = await util.process_step_auth(params)
-  if (res.code != 200)
-    return
-
-  //防止网络请求先发后返回
-  //参数变化时,扔掉返回
-  if (params.processId != props.processId && props.processId && !params.processId)
-    return
-
-  if (params.mouldId != props.mouldId && props.mouldId && !params.mouldId)
-    return
-
-  if (params.userId != props.userId && props.user && !params.userId)
-    return
-
-  data.stepAuth = res.data
-
-  updateAuth()
-}
-
-const updateAuth = () => {
-  let res = {}
-  for (const key in data.stepAuth) {
-    const fieldAuth = data.stepAuth[key]
-    let authValue = getAuth(fieldAuth)
-    res[key] = authValue
-  }
-
-  emit('auth', res)
-}
-
-// 根据条件列表获取权限
-const getAuth = (fieldAuth) => {
-  console.log('+++ getAuth +++++++++++++', fieldAuth)
-  // 默认权限: 只读
-  let defaultCondition = 'readonly'
-
-  if (!fieldAuth) {
-    return defaultCondition
-  }
-
-  const conditions = fieldAuth.conditions
-  if (!conditions || conditions.length < 1) {
-    return defaultCondition
-  }
-
-  for (const i in conditions) {
-    const condition = conditions[i]
-    // 有条件的权限，根据条件表达式计算匹配的权限
-    if (condition.condition) {
-      const result = util.executeExpress(condition.condition, props.form)
-      if (result === true) {
-        return condition.value
-      }
-    } else {
-      // 无条件的权限
-      defaultCondition = condition.value
-    }
-  }
-
-  return defaultCondition
-}
-
-const updateCanApply = async () => {
-  if (props.processId) {
-    data.canApply = false
-    return
-  }
-
-  let params = {
-    mouldId: props.mouldId,
-    userId: props.userId,
-    form: props.form
-  }
-  let res = await util.process_can_apply(params)
-  if (res.code != 200)
-    return
-
-  //防止网络请求先发后返回
-  //参数变化时,扔掉返回
-  if (params.mouldId != props.mouldId && props.mouldId && !params.mouldId)
-    return
-
-  if (params.userId != props.userId && props.userId && !params.userId)
-    return
-
-  data.canApply = res.data
-}
-
-const formatTitle = (task) => {
-  let title = task.title
-  if (task.category == 'start') {
-    if (task.state == 'pass') {
-      title = title + ' / ' + '已申请'
-    } else if (task.state == 'refuse') {
-      title = title + ' / ' + '已驳回'
-    } else {
-      title = title + ' / ' + '申请中'
-    }
-  } else if (task.category == 'audit') {
-    if (task.auditMethod == 'or') {
-      title = title + '(或签)'
-    } else {
-      title = title + '(会签)'
-    }
-    if (task.state == 'pass') {
-      title = title + ' / ' + '已审核'
-    } else if (task.state == 'refuse') {
-      title = title + ' / ' + '已驳回'
-    } else if (task.state == 'started') {
-      title = title + ' / ' + '审核中'
-    } else {
-      title = title + ''
-    }
-  } else if (task.category == 'notify') {
-    if (task.state == 'pass') {
-      title = title + ' / ' + '已抄送'
-    } else {
-      title = title + ''
-    }
-  }
-  return title
-}
-
-const formatExecutor = (executor, task) => {
-  let action = ''
-  let username = ''
-  let memo = executor.memo
-  if (executor.state == 'pass') {
-    if (task.category == 'notify')
-      action = `已抄送 ${executor.updatedAt}`
-    else
-      action = `已审核 ${executor.updatedAt}`
-  } else if (executor.state == 'refuse') {
-    action = `已驳回 ${executor.updatedAt}`
-  }
-
-  if (executor.user.name != executor.submiterName && executor.submiterName)
-    username = `${executor.user.name}/${executor.submiterName}`
-  else
-    username = `${executor.user.name}`
-
-  return `${username}  ${action}  ${memo}`
-}
-
-const formatProcessTitle = computed(() => {
-  if (data.process.state == 'started') {
-    return '审批流程: 审核中'
-  } else if (data.process.state == 'finish_pass') {
-    return '审批流程: 审批通过'
-  } else if (data.process.state == 'finish_refuse') {
-    return '审批流程: 已撤销'
-  } else {
-    return '审批流程:'
-  }
-})
-
-const refresh = async() => {
-  await queryDetail()
-  queryStepAuth()
-  updateCanApply()
-}
-
-watch(() => props.userId, async () => {
-  if (!props.userId)
-    return
-
-  await refresh()
-}, { immediate: true })
-
-watch(() => props.processId, async () => {
-  await refresh()
-}, { immediate: true })
-
-watch(() => props.mouldId, async () => {
-  if (!props.processId && !props.mouldId)
-    return
-  await refresh()
-}, { immediate: true })
-
-watch(() => JSON.stringify(props.form), async () => {
-  if (!data.stepAuth)
-    return
-
-  await refresh()
-}, { immediate: true })
-</script>
-
-<style lang="scss" scoped>
-.widget {
-  text-align: center;
-  padding: 15px 15px;
-}
-
-.memo {
-  margin-bottom: 15px;
-}
-
-.refuse-btn {
-  width: 120px;
-  margin-right: 15px;
-}
-
-.pass-btn {
-  width: 120px;
-}
-
-.apply-btn {
-  width: 60vw;
-}
-
-.task-list {
-  margin-top: 15px;
-}
-
-.task-title {
-  font-size: 14px;
-  font-weight: bold;
-  color: #333;
-  text-align: left;
-}
-
-.task-user {
-  font-size: 13px;
-  color: #666;
-  text-align: left;
-  margin-top: 5px;
-}
-
-.audit-title {
-  padding: 25px 15px 0 15px;
-  font-size: 16px;
-  font-weight: bold;
-  color: #666;
-  text-align: left;
-}
-</style>
-
-<style>
-:root:root {
-  --van-popover-action-width: 70vw;
-}
+<template>
+  <div class="widget">
+    <van-field v-if="canPass || canRefuse" v-model="data.memo" class="memo" label="审批意见" placeholder="请输入审批意见" />
+
+    <van-popover v-if="canRefuse" placement="top-start" v-model:show="data.isShowPop" :actions="formatPrevSteps"
+      actions-direction="vertical" @select="onSelectRefuse">
+      <template #reference>
+        <van-button class="refuse-btn" type="danger" @click="onRefuse">驳回</van-button>
+      </template>
+    </van-popover>
+
+    <van-button v-if="canPass" class="pass-btn" type="primary" native-type="submit" @click="onPass">提交</van-button>
+
+    <van-button class="apply-btn" v-if="canApply" type="primary" native-type="submit"
+      @click="onApply">申请</van-button>
+
+    <div class="audit-title" v-if="data.process && data.process.id">{{ formatProcessTitle }}</div>
+
+    <van-steps class="task-list" direction="vertical" :active="data.process.startedTaskIndex"
+      v-if="data.process && data.process.id">
+      <van-step v-for="(task, i) in data.process.tasks" :key="i">
+        <div class="task-title">{{ formatTitle(task) }}</div>
+        <div class="task-user" v-if="task.executors" v-for="(executor, j) in task.executors" :key="j">
+          {{ formatExecutor(executor, task) }}
+        </div>
+      </van-step>
+    </van-steps>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, computed, onMounted, defineProps, defineEmits, watch } from "vue"
+import util from '../util'
+import lodash from 'lodash'
+
+const props = defineProps({
+  processId: {
+    type: Number,
+    default: 0
+  },
+  mouldId: {
+    type: Number,
+    default: 0
+  },
+  userId: {
+    type: String,
+    default: ''
+  },
+  form: {
+    type: Object,
+    default: null
+  },
+  process_detail: {
+    type: Function,
+    default: null
+  }
+})
+const emit = defineEmits(['pass', 'refuse', 'apply', 'auth'])
+const data = reactive({
+  isShowPop: false,
+  process: {},
+  memo: '',
+  stepAuth: {},
+  canApply: false
+})
+const formatPrevSteps = computed(() => {
+  if (!data.process || !data.process.prevSteps || data.process.prevSteps.length < 1) {
+    return []
+  }
+
+  return data.process.prevSteps.map((item) => {
+    return {
+      stepId: item.id,
+      text: item.title
+    }
+  })
+})
+
+const canApply = computed(()=>{
+  return !data.process.id && data.canApply
+})
+
+const canPass = computed(() => {
+  return data.process && data.process.id && data.process.canPass
+})
+const canRefuse = computed(() => {
+  return data.process && data.process.id && data.process.canRefuse
+})
+
+onMounted(() => {
+
+})
+
+const onPass = () => {
+  // 1秒节流
+  lodash.throttle(() => {
+    emit('pass', {
+      memo: data.memo
+    })
+  }, 5000)()
+}
+const onRefuse = () => {
+
+}
+const onSelectRefuse = (action) => {
+  emit('refuse',
+    {
+      memo: data.memo,
+      action: action
+    }
+  )
+}
+
+const onApply = () => {
+  // 1秒节流
+  lodash.throttle(() => {
+    emit('apply', {
+      memo: data.memo
+    })
+  }, 5000)()
+}
+
+const queryDetail = async () => {
+  if (!props.processId)
+    return
+  const params = {
+    id: props.processId
+  }
+
+  if (!util.process_detail)
+    return
+
+  const res = await util.process_detail(params)
+  if (res.code != 200)
+    return
+
+  //防止网络请求先发后返回
+  //参数变化时,扔掉返回
+  if (params.id != props.processId && props.processId && !params.id)
+    return
+
+  data.process = res.data
+}
+
+const queryStepAuth = async () => {
+  if (!props.processId && !props.mouldId)
+    return
+
+  const params = {
+    processId: props.processId,
+    mouldId: props.mouldId,
+    userId: props.userId,
+    form: props.form
+  }
+  const res = await util.process_step_auth(params)
+  if (res.code != 200)
+    return
+
+  //防止网络请求先发后返回
+  //参数变化时,扔掉返回
+  if (params.processId != props.processId && props.processId && !params.processId)
+    return
+
+  if (params.mouldId != props.mouldId && props.mouldId && !params.mouldId)
+    return
+
+  if (params.userId != props.userId && props.user && !params.userId)
+    return
+
+  data.stepAuth = res.data
+
+  updateAuth()
+}
+
+const updateAuth = () => {
+  let res = {}
+  for (const key in data.stepAuth) {
+    const fieldAuth = data.stepAuth[key]
+    let authValue = getAuth(fieldAuth)
+    res[key] = authValue
+  }
+
+  emit('auth', res)
+}
+
+// 根据条件列表获取权限
+const getAuth = (fieldAuth) => {
+  console.log('+++ getAuth +++++++++++++', fieldAuth)
+  // 默认权限: 只读
+  let defaultCondition = 'readonly'
+
+  if (!fieldAuth) {
+    return defaultCondition
+  }
+
+  const conditions = fieldAuth.conditions
+  if (!conditions || conditions.length < 1) {
+    return defaultCondition
+  }
+
+  for (const i in conditions) {
+    const condition = conditions[i]
+    // 有条件的权限，根据条件表达式计算匹配的权限
+    if (condition.condition) {
+      const result = util.executeExpress(condition.condition, props.form)
+      if (result === true) {
+        return condition.value
+      }
+    } else {
+      // 无条件的权限
+      defaultCondition = condition.value
+    }
+  }
+
+  return defaultCondition
+}
+
+const updateCanApply = async () => {
+  if (props.processId) {
+    data.canApply = false
+    return
+  }
+
+  let params = {
+    mouldId: props.mouldId,
+    userId: props.userId,
+    form: props.form
+  }
+  let res = await util.process_can_apply(params)
+  if (res.code != 200)
+    return
+
+  //防止网络请求先发后返回
+  //参数变化时,扔掉返回
+  if (params.mouldId != props.mouldId && props.mouldId && !params.mouldId)
+    return
+
+  if (params.userId != props.userId && props.userId && !params.userId)
+    return
+
+  data.canApply = res.data
+}
+
+const formatTitle = (task) => {
+  let title = task.title
+  if (task.category == 'start') {
+    if (task.state == 'pass') {
+      title = title + ' / ' + '已申请'
+    } else if (task.state == 'refuse') {
+      title = title + ' / ' + '已驳回'
+    } else {
+      title = title + ' / ' + '申请中'
+    }
+  } else if (task.category == 'audit') {
+    if (task.auditMethod == 'or') {
+      title = title + '(或签)'
+    } else {
+      title = title + '(会签)'
+    }
+    if (task.state == 'pass') {
+      title = title + ' / ' + '已审核'
+    } else if (task.state == 'refuse') {
+      title = title + ' / ' + '已驳回'
+    } else if (task.state == 'started') {
+      title = title + ' / ' + '审核中'
+    } else {
+      title = title + ''
+    }
+  } else if (task.category == 'notify') {
+    if (task.state == 'pass') {
+      title = title + ' / ' + '已抄送'
+    } else {
+      title = title + ''
+    }
+  }
+  return title
+}
+
+const formatExecutor = (executor, task) => {
+  let action = ''
+  let username = ''
+  let memo = executor.memo
+  if (executor.state == 'pass') {
+    if (task.category == 'notify')
+      action = `已抄送 ${executor.updatedAt}`
+    else
+      action = `已审核 ${executor.updatedAt}`
+  } else if (executor.state == 'refuse') {
+    action = `已驳回 ${executor.updatedAt}`
+  }
+
+  if (executor.user.name != executor.submiterName && executor.submiterName)
+    username = `${executor.user.name}/${executor.submiterName}`
+  else
+    username = `${executor.user.name}`
+
+  return `${username}  ${action}  ${memo}`
+}
+
+const formatProcessTitle = computed(() => {
+  if (data.process.state == 'started') {
+    return '审批流程: 审核中'
+  } else if (data.process.state == 'finish_pass') {
+    return '审批流程: 审批通过'
+  } else if (data.process.state == 'finish_refuse') {
+    return '审批流程: 已撤销'
+  } else {
+    return '审批流程:'
+  }
+})
+
+const refresh = async() => {
+  await queryDetail()
+  queryStepAuth()
+  updateCanApply()
+}
+
+watch(() => props.userId, async () => {
+  if (!props.userId)
+    return
+
+  await refresh()
+}, { immediate: true })
+
+watch(() => props.processId, async () => {
+  await refresh()
+}, { immediate: true })
+
+watch(() => props.mouldId, async () => {
+  if (!props.processId && !props.mouldId)
+    return
+  await refresh()
+}, { immediate: true })
+
+watch(() => JSON.stringify(props.form), async () => {
+  if (!data.stepAuth)
+    return
+
+  await refresh()
+}, { immediate: true })
+</script>
+
+<style lang="scss" scoped>
+.widget {
+  text-align: center;
+  padding: 15px 15px;
+}
+
+.memo {
+  margin-bottom: 15px;
+}
+
+.refuse-btn {
+  width: 120px;
+  margin-right: 15px;
+}
+
+.pass-btn {
+  width: 120px;
+}
+
+.apply-btn {
+  width: 60vw;
+}
+
+.task-list {
+  margin-top: 15px;
+}
+
+.task-title {
+  font-size: 14px;
+  font-weight: bold;
+  color: #333;
+  text-align: left;
+}
+
+.task-user {
+  font-size: 13px;
+  color: #666;
+  text-align: left;
+  margin-top: 5px;
+}
+
+.audit-title {
+  padding: 25px 15px 0 15px;
+  font-size: 16px;
+  font-weight: bold;
+  color: #666;
+  text-align: left;
+}
+</style>
+
+<style>
+:root:root {
+  --van-popover-action-width: 70vw;
+}
 </style>