|
@@ -7,7 +7,8 @@
|
|
|
<div class="top-box">
|
|
|
<div class="box-title">流程审批进度历史</div>
|
|
|
<div class="box-content">
|
|
|
- <a-table size="small" :dataSource="dataSource" :columns="columns" :scroll="{ y: 730 }" :pagination="pagination" />
|
|
|
+ <a-table size="small" :dataSource="dataSource" :columns="columns" :scroll="{ y: 730 }"
|
|
|
+ :pagination="pagination" />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="bottom-box">
|
|
@@ -18,226 +19,221 @@
|
|
|
</div>
|
|
|
<!-- 审批通过弹窗 -->
|
|
|
<a-modal v-model:visible="visibleTg" centered :width="600" title="审批通过" @ok="handleTgOk" @cancel="handleTgCancel">
|
|
|
- <a-textarea
|
|
|
- v-model:value="passDes"
|
|
|
- placeholder="请输入通过原因..."
|
|
|
- :rows="4"
|
|
|
- style="width: 96%; margin: 10px; background-color: transparent; color: #fff"
|
|
|
- />
|
|
|
+ <a-textarea v-model:value="passDes" placeholder="请输入通过原因..." :rows="4"
|
|
|
+ style="width: 96%; margin: 10px; background-color: transparent; color: #fff" />
|
|
|
</a-modal>
|
|
|
<!-- 审批驳回弹窗 -->
|
|
|
<a-modal v-model:visible="visibleBh" centered :width="600" title="审批驳回" @ok="handleBhOk" @cancel="handleBhCancel">
|
|
|
- <a-textarea
|
|
|
- v-model:value="rejectDes"
|
|
|
- placeholder="请输入驳回原因..."
|
|
|
- :rows="4"
|
|
|
- style="width: 96%; margin: 10px; background-color: transparent; color: #fff"
|
|
|
- />
|
|
|
+ <a-textarea v-model:value="rejectDes" placeholder="请输入驳回原因..." :rows="4"
|
|
|
+ style="width: 96%; margin: 10px; background-color: transparent; color: #fff" />
|
|
|
</a-modal>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
- import { ref, reactive, defineProps, watch } from 'vue';
|
|
|
- import { columns } from './comment.data';
|
|
|
- import { pass, back } from './comment.api';
|
|
|
- import { message } from 'ant-design-vue';
|
|
|
- import errorImg from '../../../../assets/images/errorImg.png';
|
|
|
- let props = defineProps({
|
|
|
- historySpList: {
|
|
|
- type: Array,
|
|
|
- default: () => {
|
|
|
- return [];
|
|
|
- },
|
|
|
+import { ref, reactive, defineProps, watch } from 'vue';
|
|
|
+import { columns } from './comment.data';
|
|
|
+import { pass, back } from './comment.api';
|
|
|
+import { message } from 'ant-design-vue';
|
|
|
+import errorImg from '../../../../assets/images/errorImg.png';
|
|
|
+let props = defineProps({
|
|
|
+ historySpList: {
|
|
|
+ type: Array,
|
|
|
+ default: () => {
|
|
|
+ return [];
|
|
|
},
|
|
|
- imgSrc: {
|
|
|
- type: String,
|
|
|
- default: '',
|
|
|
- },
|
|
|
- isShow: {
|
|
|
- type: Boolean,
|
|
|
- default: true,
|
|
|
- },
|
|
|
- spInfo: {
|
|
|
- type: Object,
|
|
|
- default: () => {
|
|
|
- return {};
|
|
|
- },
|
|
|
+ },
|
|
|
+ imgSrc: {
|
|
|
+ type: String,
|
|
|
+ default: '',
|
|
|
+ },
|
|
|
+ isShow: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true,
|
|
|
+ },
|
|
|
+ spInfo: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {
|
|
|
+ return {};
|
|
|
},
|
|
|
+ },
|
|
|
+});
|
|
|
+//数据列表
|
|
|
+let dataSource = ref<any[]>([]);
|
|
|
+//分页参数配置
|
|
|
+let pagination = reactive({
|
|
|
+ current: 1, // 当前页码
|
|
|
+ pageSize: 10, // 每页显示条数
|
|
|
+ total: 0, // 总条目数,后端返回
|
|
|
+ // showTotal: (total, range) => `${range[0]}-${range[1]} 条,总共 ${total} 条`, // 分页右下角显示信息
|
|
|
+ showSizeChanger: true, // 是否可改变每页显示条数
|
|
|
+ pageSizeOptions: ['10', '20', '50'], // 可选的每页显示条数
|
|
|
+});
|
|
|
+
|
|
|
+//审批通过驳回参数信息
|
|
|
+let spInfos = reactive({
|
|
|
+ id: '',
|
|
|
+ priority: '',
|
|
|
+ procInstId: '',
|
|
|
+});
|
|
|
+//审批通过
|
|
|
+let visibleTg = ref(false);
|
|
|
+let passDes = ref('');
|
|
|
+//审批驳回
|
|
|
+let visibleBh = ref(false);
|
|
|
+let rejectDes = ref('');
|
|
|
+
|
|
|
+let imgSrcs = ref('');
|
|
|
+
|
|
|
+let emit = defineEmits(['spClose']);
|
|
|
+
|
|
|
+function showerrimg() {
|
|
|
+ imgSrcs.value = errorImg;
|
|
|
+}
|
|
|
+
|
|
|
+//审批通过
|
|
|
+function getPass() {
|
|
|
+ visibleTg.value = true;
|
|
|
+}
|
|
|
+//审批通过-确认
|
|
|
+async function handleTgOk() {
|
|
|
+ let res = await pass({
|
|
|
+ comment: passDes.value,
|
|
|
+ id: spInfos.id,
|
|
|
+ priority: spInfos.priority,
|
|
|
+ procInstId: spInfos.procInstId,
|
|
|
+ sendEmail: false,
|
|
|
+ sendMessage: true,
|
|
|
+ sendSms: false,
|
|
|
});
|
|
|
- //数据列表
|
|
|
- let dataSource = ref<any[]>([]);
|
|
|
- //分页参数配置
|
|
|
- let pagination = reactive({
|
|
|
- current: 1, // 当前页码
|
|
|
- pageSize: 10, // 每页显示条数
|
|
|
- total: 0, // 总条目数,后端返回
|
|
|
- // showTotal: (total, range) => `${range[0]}-${range[1]} 条,总共 ${total} 条`, // 分页右下角显示信息
|
|
|
- showSizeChanger: true, // 是否可改变每页显示条数
|
|
|
- pageSizeOptions: ['10', '20', '50'], // 可选的每页显示条数
|
|
|
+ visibleTg.value = false;
|
|
|
+ emit('spClose');
|
|
|
+ message.warning(res.message || res);
|
|
|
+}
|
|
|
+//审批通过-取消
|
|
|
+function handleTgCancel() {
|
|
|
+ passDes.value = '';
|
|
|
+ visibleTg.value = false;
|
|
|
+}
|
|
|
+//审批驳回
|
|
|
+function getReject() {
|
|
|
+ visibleBh.value = true;
|
|
|
+}
|
|
|
+//确定驳回
|
|
|
+async function handleBhOk() {
|
|
|
+ let res = await back({
|
|
|
+ comment: rejectDes.value,
|
|
|
+ id: spInfos.id,
|
|
|
+ procInstId: spInfos.procInstId,
|
|
|
+ sendEmail: false,
|
|
|
+ sendMessage: true,
|
|
|
+ sendSms: false,
|
|
|
});
|
|
|
-
|
|
|
- //审批通过驳回参数信息
|
|
|
- let spInfos = reactive({
|
|
|
- id: '',
|
|
|
- priority: '',
|
|
|
- procInstId: '',
|
|
|
- });
|
|
|
- //审批通过
|
|
|
- let visibleTg = ref(false);
|
|
|
- let passDes = ref('');
|
|
|
- //审批驳回
|
|
|
- let visibleBh = ref(false);
|
|
|
- let rejectDes = ref('');
|
|
|
-
|
|
|
- let imgSrcs = ref('');
|
|
|
-
|
|
|
- let emit = defineEmits(['spClose']);
|
|
|
-
|
|
|
- function showerrimg() {
|
|
|
- imgSrcs.value = errorImg;
|
|
|
- }
|
|
|
-
|
|
|
- //审批通过
|
|
|
- function getPass() {
|
|
|
- visibleTg.value = true;
|
|
|
- }
|
|
|
- //审批通过-确认
|
|
|
- async function handleTgOk() {
|
|
|
- let res = await pass({
|
|
|
- comment: passDes.value,
|
|
|
- id: spInfos.id,
|
|
|
- priority: spInfos.priority,
|
|
|
- procInstId: spInfos.procInstId,
|
|
|
- sendEmail: false,
|
|
|
- sendMessage: true,
|
|
|
- sendSms: false,
|
|
|
- });
|
|
|
- visibleTg.value = false;
|
|
|
- emit('spClose');
|
|
|
- message.warning(res.message || res);
|
|
|
- }
|
|
|
- //审批通过-取消
|
|
|
- function handleTgCancel() {
|
|
|
- passDes.value = '';
|
|
|
- visibleTg.value = false;
|
|
|
- }
|
|
|
- //审批驳回
|
|
|
- function getReject() {
|
|
|
- visibleBh.value = true;
|
|
|
- }
|
|
|
- //确定驳回
|
|
|
- async function handleBhOk() {
|
|
|
- let res = await back({
|
|
|
- comment: rejectDes.value,
|
|
|
- id: spInfos.id,
|
|
|
- procInstId: spInfos.procInstId,
|
|
|
- sendEmail: false,
|
|
|
- sendMessage: true,
|
|
|
- sendSms: false,
|
|
|
- });
|
|
|
- visibleBh.value = false;
|
|
|
- emit('spClose');
|
|
|
- message.warning(res.message || res);
|
|
|
- }
|
|
|
- //取消驳回
|
|
|
- function handleBhCancel() {
|
|
|
- rejectDes.value = '';
|
|
|
- visibleBh.value = false;
|
|
|
+ visibleBh.value = false;
|
|
|
+ emit('spClose');
|
|
|
+ message.warning(res.message || res);
|
|
|
+}
|
|
|
+//取消驳回
|
|
|
+function handleBhCancel() {
|
|
|
+ rejectDes.value = '';
|
|
|
+ visibleBh.value = false;
|
|
|
+}
|
|
|
+watch(
|
|
|
+ () => props.historySpList,
|
|
|
+ (newV, oldV) => {
|
|
|
+ if (newV.length != 0) {
|
|
|
+ dataSource.value = newV;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ immediate: true,
|
|
|
+ deep: true,
|
|
|
}
|
|
|
- watch(
|
|
|
- () => props.historySpList,
|
|
|
- (newV, oldV) => {
|
|
|
- if (newV.length != 0) {
|
|
|
- dataSource.value = newV;
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- immediate: true,
|
|
|
- deep: true,
|
|
|
+);
|
|
|
+watch(
|
|
|
+ () => props.spInfo,
|
|
|
+ (newV, oldV) => {
|
|
|
+ console.log(newV, '0009999=====')
|
|
|
+ if (newV.id) {
|
|
|
+ spInfos.id = newV.id;
|
|
|
+ spInfos.priority = newV.priority;
|
|
|
+ spInfos.procInstId = newV.procInstId;
|
|
|
}
|
|
|
- );
|
|
|
- watch(
|
|
|
- () => props.spInfo,
|
|
|
- (newV, oldV) => {
|
|
|
- spInfos.id = newV.result.id;
|
|
|
- spInfos.priority = newV.result.priority;
|
|
|
- spInfos.procInstId = newV.result.procInstId;
|
|
|
- },
|
|
|
- { deep: true }
|
|
|
- );
|
|
|
-
|
|
|
- watch(
|
|
|
- () => props.imgSrc,
|
|
|
- (newV, oldV) => {
|
|
|
- imgSrcs.value = newV;
|
|
|
- },
|
|
|
- { immediate: true, deep: true }
|
|
|
- );
|
|
|
+ },
|
|
|
+ { deep: true }
|
|
|
+);
|
|
|
+
|
|
|
+watch(
|
|
|
+ () => props.imgSrc,
|
|
|
+ (newV, oldV) => {
|
|
|
+ imgSrcs.value = newV;
|
|
|
+ },
|
|
|
+ { immediate: true, deep: true }
|
|
|
+);
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
- .HistorySp {
|
|
|
- position: relative;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
-
|
|
|
- .btn-box {
|
|
|
- width: 98%;
|
|
|
- padding: 15px 11px 0px 11px;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
+.HistorySp {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .btn-box {
|
|
|
+ width: 98%;
|
|
|
+ padding: 15px 11px 0px 11px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
|
|
|
- .top-box {
|
|
|
- width: 98%;
|
|
|
- height: 400px;
|
|
|
- margin: 15px auto;
|
|
|
- box-shadow: 0 0 20px rgba(68, 180, 255, 0.2) inset;
|
|
|
- border-radius: 2px;
|
|
|
- border: 1px solid rgba(68, 211, 255, 0.4392156863) !important;
|
|
|
- padding: 10px;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- .box-content {
|
|
|
- height: calc(100% - 30px);
|
|
|
- }
|
|
|
- }
|
|
|
+ .top-box {
|
|
|
+ width: 98%;
|
|
|
+ height: 400px;
|
|
|
+ margin: 15px auto;
|
|
|
+ box-shadow: 0 0 20px rgba(68, 180, 255, 0.2) inset;
|
|
|
+ border-radius: 2px;
|
|
|
+ border: 1px solid rgba(68, 211, 255, 0.4392156863) !important;
|
|
|
+ padding: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
|
- .bottom-box {
|
|
|
- width: 98%;
|
|
|
- height: 200px;
|
|
|
- margin: 15px auto;
|
|
|
- box-shadow: 0 0 20px rgba(68, 180, 255, 0.2) inset;
|
|
|
- border-radius: 2px;
|
|
|
- border: 1px solid rgba(68, 211, 255, 0.4392156863) !important;
|
|
|
- padding: 10px;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- .box-content {
|
|
|
- position: relative;
|
|
|
- height: calc(100% - 30px);
|
|
|
-
|
|
|
- img {
|
|
|
- width: 408px;
|
|
|
- height: 95px;
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- top: 26px;
|
|
|
- transform: translate(-56%, 0);
|
|
|
- }
|
|
|
- }
|
|
|
+ .box-content {
|
|
|
+ height: calc(100% - 30px);
|
|
|
}
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom-box {
|
|
|
+ width: 98%;
|
|
|
+ height: 200px;
|
|
|
+ margin: 15px auto;
|
|
|
+ box-shadow: 0 0 20px rgba(68, 180, 255, 0.2) inset;
|
|
|
+ border-radius: 2px;
|
|
|
+ border: 1px solid rgba(68, 211, 255, 0.4392156863) !important;
|
|
|
+ padding: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
|
- .box-title {
|
|
|
- font-size: 14px;
|
|
|
- height: 30px;
|
|
|
- line-height: 30px;
|
|
|
- color: #fff;
|
|
|
+ .box-content {
|
|
|
+ position: relative;
|
|
|
+ height: calc(100% - 30px);
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 408px;
|
|
|
+ height: 95px;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 26px;
|
|
|
+ transform: translate(-56%, 0);
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .zxm-modal .zxm-modal-body {
|
|
|
- padding: 15px !important;
|
|
|
- box-sizing: border-box;
|
|
|
+ .box-title {
|
|
|
+ font-size: 14px;
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ color: #fff;
|
|
|
}
|
|
|
+}
|
|
|
+
|
|
|
+.zxm-modal .zxm-modal-body {
|
|
|
+ padding: 15px !important;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
</style>
|