wans

src/views/workplace/publish/modules/Detail.vue

@@ -1,39 +1,85 @@
 <template>
-  <a-card :bordered="false" v-show="visible" class="card" :title="modalTitle">
-    <a-row :gutter="48" slot="extra">
-      <a-col :md="48" :sm="48">
-        <a-space class="table-page-search-submitButtons">
-          <a-button type="default" @click="handleCancel()">返回</a-button>
-        </a-space>
-      </a-col>
-    </a-row>
-    <title-divider title="业务信息" width="140px"></title-divider>
-    <a-descriptions :column="2" bordered>
-      <template v-for="item in descriptions">
-        <a-descriptions-item v-if="item.type==='dataSelect'" :key="item.value" :label="item.label">
-          {{ detail[item.attrs.connect[1].bind] }}
-        </a-descriptions-item>
-        <a-descriptions-item v-else :key="item.value" :label="item.label">
-          {{ detail[item.value] }}
-        </a-descriptions-item>
-      </template>
+  <a-card v-show="visible" title="详情" :bordered="false">
+    <div slot="extra">
+      <a-space class="table-page-search-submitButtons">
+        <a-button type="default" @click="handleCancel()">返回</a-button>
+      </a-space>
+    </div>
+    <div class="detail card">
+      <title-divider title="业务信息" width="140px"></title-divider>
+      <a-descriptions :column="2" bordered>
+        <template v-for="item in descriptions">
+          <a-descriptions-item v-if="item.type==='dataSelect'" :key="item.value" :label="item.label">
+            {{ detail[item.attrs.connect[1].bind] }}
+          </a-descriptions-item>
+          <a-descriptions-item v-else :key="item.value" :label="item.label">
+            {{ detail[item.value] }}
+          </a-descriptions-item>
+        </template>
+      </a-descriptions>
+      <title-divider title="审核进度" width="140px"></title-divider>
+      <a-list item-layout="vertical" :data-source="model.recordList">
+        <a-list-item slot="renderItem" key="item.title" slot-scope="item">
+          <a-list-item-meta>
+            <template #title>
+              <div style="width:100%;height:35px;display:flex;justify-content: space-between;align-items: center;font-size: 14px;">
+                <span>{{ item.createdUserName }} - {{ statusMap[item.handleStatus] }}</span> <span>{{ item.createdTime }}</span>
+              </div>
+            </template>
 
-    </a-descriptions>
-    <title-divider title="审批处理" width="140px"></title-divider>
+            <a-avatar :style="{ backgroundColor: colors[item.handleStatus%4], verticalAlign: 'middle' }" slot="avatar">
+              <my-icon v-if="icons[item.handleStatus].includes('icon-')" :type="icons[item.handleStatus]"></my-icon>
+              <a-icon v-else :type="icons[item.handleStatus]"></a-icon>
+            </a-avatar>
+          </a-list-item-meta>
+          <div>
+            <div style="font-size: 12px">{{ item.handleRemark }}</div>
+            <a-space>
+              <img v-for="file in item.imageList" :key="file.id" :src="file.url" :alt="file.name" width="80px" @click="$refs.imgView.base(file.url)" />
+            </a-space>
+            <br>
+            <a-space direction="vertical">
+              <a style="font-size: 12px" v-for="file in item.fileList" :key="file.id" target="_blank" :href="file.url"><a-icon type="file" />{{ file.name }}</a>
+            </a-space>
+          </div>
 
+        </a-list-item>
+      </a-list>
+    </div>
+    <ImgView ref="imgView" />
   </a-card>
 </template>
 
 <script>
 import { verifyWorkflow } from '@/api/workflow/publish'
+import UploadFile from '@/components/Upload/CUploadFile.vue'
+import UploadImg from '@/components/Upload/CUploadImg.vue'
+import ImgView from '@/components/viewImg/index.vue'
 export default {
   name: 'WorkflowTaskBomFieldDetail',
-  components: {},
+  components: { UploadFile, UploadImg, ImgView },
   data() {
     return {
+      colors: {
+        1: '#666',
+        2: '#1890ff',
+        3: '#52c41a',
+        4: '#f5222d',
+        5: '#faad14',
+        6: '#faad14',
+      },
+      icons: {
+        1: 'highlight',
+        2: 'icon-huojian',
+        3: 'check',
+        4: 'close',
+        5: 'exclamation',
+        6: 'exclamation',
+      },
       confirmLoading: false,
       modalTitle: null,
       visible: false,
+      form: this.$form.createForm(this),
       // 下拉框map
       statusMap: {},
       model: {},
@@ -52,13 +98,74 @@ export default {
       this.model = record
       this.detail = JSON.parse(record.data.jsonString)
       this.descriptions = JSON.parse(record.data.formJsonString).components
+      const {
+        form: { setFieldsValue },
+      } = this
+      // 日期处理
+      this.$nextTick(() => {
+        setFieldsValue({ taskBomId: this.model.id, taskId: this.model.taskId })
+      })
+    },
+    handleSelect(e) {
+      const {
+        form: { setFieldsValue },
+      } = this
+      // 日期处理
+      this.$nextTick(() => {
+        setFieldsValue({ handleRemark: this.statusMap[e.target.value] })
+      })
+    },
+    save() {
+      const {
+        form: { validateFieldsAndScroll },
+      } = this
+      this.confirmLoading = true
+      validateFieldsAndScroll((errors, values) => {
+        if (errors) {
+          this.confirmLoading = false
+          return
+        }
+        verifyWorkflow(values)
+          .then((res) => {
+            this.$message.success('提交成功！')
+            this.handleCancel()
+          })
+          .catch(() => {
+            this.confirmLoading = false
+          })
+      })
     },
-
     handleCancel() {
       this.visible = false
       this.confirmLoading = false
+      this.form.resetFields()
       this.$emit('ok')
     },
   },
 }
 </script>
+<style lang="less" scoped>
+.card {
+  min-height: calc(100vh - 210px);
+  max-height: calc(100vh - 210px);
+  background: #fff;
+  overflow-y: auto;
+  //隐藏滚动条
+  // &::-webkit-scrollbar {
+  //   display: none;
+  // }
+  //滚动条整体部分
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  //滚动条的轨道（里面装有Thumb）
+  &::-webkit-scrollbar-track {
+    background-color: #f1f1f1;
+  }
+  //滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
+  &::-webkit-scrollbar-thumb {
+    background-color: #c1c1c1;
+  }
+}
+</style>