vue2-client 1.15.107 → 1.15.110

package/src/pages/WorkflowDetail/WorkflowPageDetail/WorkFlowBaseInformation.vue

@@ -1,415 +1,415 @@
-<template>
-  <div id="ApplyBaseInformation">
-    <a-card :loading="loading" :bordered="false" class="info-card-container">
-      <div class="info-cards-wrapper">
-        <!--  正在进行  -->
-        <div class="info-card">
-          <div class="info-icon" :class="details.f_state === 1 ? 'status-completed' : 'status-progress'">
-            <a-icon type="appstore" theme="filled" />
-          </div>
-          <div class="info-content">
-            <div v-if="showProjectPerson" class="info-title">
-              {{ details.f_entry_name }}
-              <a-popover placement="bottom">
-                <template slot="content">
-                  <div v-if="details.person.f_projectadmin">项目经理：{{ details.person.f_projectadmin }}</div>
-                  <div v-if="details.person.f_shangwuren">客户经理：{{ details.person.f_shangwuren }}</div>
-                  <div v-if="details.person.f_salemanager">销售经理：{{ details.person.f_salemanager }}</div>
-                  <div v-if="details.person.f_egionaladministrator">大区经理：{{ details.person.f_egionaladministrator }}</div>
-                </template>
-                <a-icon type="info-circle" class="info-icon-small" />
-              </a-popover>
-            </div>
-            <div v-else class="info-title">{{ details.f_task_name }}</div>
-            <div class="info-label" :class="details.f_state === 1 ? 'status-completed-text' : 'status-progress-text'">
-              {{ details.f_state === 1 ? '完工' : '正在进行' }}
-            </div>
-          </div>
-        </div>
-
-        <!--  流程信息  -->
-        <div v-show="details.f_state !== 1" class="info-card">
-          <div class="info-icon workflow-icon">
-            <a-icon type="profile" theme="filled" />
-          </div>
-          <div class="info-content">
-            <div class="info-title">{{ details.f_workflow_define_name }}</div>
-            <div class="info-label">{{ details.f_sub_state }}</div>
-          </div>
-        </div>
-
-        <!--  创建日期  -->
-        <div class="info-card">
-          <div class="info-icon date-icon">
-            <a-icon type="carry-out" theme="filled" />
-          </div>
-          <div class="info-content">
-            <div class="info-title">{{ format(details.f_workflow_date, 'yyyy-MM-dd') }}</div>
-            <div class="info-label">创建日期</div>
-          </div>
-        </div>
-
-        <!--  截止时间  -->
-        <div class="info-card" title="若要修改完成时间，请通知部门领导进行修改！">
-          <div class="info-icon time-icon">
-            <a-icon type="clock-circle" theme="filled" />
-            <a-dropdown>
-              <a-icon type="down" class="dropdown-icon" />
-              <a-menu slot="overlay">
-                <a-menu-item @click="showChangeRecord">修改记录</a-menu-item>
-              </a-menu>
-            </a-dropdown>
-          </div>
-          <div class="info-content">
-            <div class="info-title">
-              {{ format(details.f_complete_time, 'yyyy-MM-dd') }}
-              <!--  修改任务时间  -->
-              <a-popover v-if="isCreatedBy" v-model="openCompleteTime" title="修改任务时间" trigger="click">
-                <template slot="content">
-                  <a-form-item label="任务整体完成时间" :label-col="{ span: 10 }" :wrapper-col="{ span: 14 }">
-                    <a-date-picker
-                      v-model="completeTime"
-                      :disabled-date="disabledDate"
-                      :show-today="false"
-                      :allow-clear="false"
-                      value-format="YYYY-MM-DD HH:mm:ss"
-                    >
-                    </a-date-picker>
-                  </a-form-item>
-                  <a-form-item label="当前环节截止时间" :label-col="{ span: 10 }" :wrapper-col="{ span: 14 }">
-                    <a-date-picker
-                      v-model="overdueTime"
-                      :disabled-date="disabledDate"
-                      :show-today="false"
-                      value-format="YYYY-MM-DD 17:00:00"
-                    >
-                    </a-date-picker>
-                  </a-form-item>
-                  <a-form-item label="修改原因" :label-col="{ span: 10 }" :wrapper-col="{ span: 14 }">
-                    <a-textarea
-                      v-model="note"
-                      :auto-size="{ minRows: 3, maxRows: 5 }"
-                      placeholder="修改原因"
-                    />
-                  </a-form-item>
-                  <div style="text-align: right">
-                    <a-button type="primary" size="small" @click="saveCompleteTime">确定</a-button>
-                  </div>
-                </template>
-                <a-icon type="edit" theme="filled" class="edit-icon" />
-              </a-popover>
-            </div>
-            <div class="info-label">截止时间</div>
-          </div>
-        </div>
-
-        <!--  第五个  -->
-        <div v-show="details.f_workflow_parentid" @click="ordRecord" class="info-card">
-          <div class="info-icon parent-icon">
-            <a-icon type="profile" theme="filled" />
-          </div>
-          <div class="info-content">
-            <div class="info-title">{{ details.f_workflow_parentid }}</div>
-            <div class="info-label">父级工单编号</div>
-          </div>
-        </div>
-      </div>
-    </a-card>
-
-    <!-- 完成时间修改记录 -->
-    <a-modal v-model="changeRecordVisible" title="完成时间修改记录" :footer="null" :z-index="1001" :width="1500">
-      <a-table row-key="id" :columns="changeRecordColumns" :data-source="changeRecordDataSource" :loading="changeRecordLoading"></a-table>
-    </a-modal>
-
-    <!-- 父级工单 -->
-    <a-modal v-model="masterWorkOrderVisible" title="主工单" :footer="null" :z-index="1001" :width="1500">
-      <work-order-parent-details :workflow-id="details.f_workflow_parentid"></work-order-parent-details>
-    </a-modal>
-  </div>
-</template>
-
-<script>
-import { mapState } from 'vuex'
-import { formatDate } from '@vue2-client/utils/util'
-import { postByServiceName } from '@vue2-client/services/api/restTools'
-import moment from 'moment'
-import { workFlowViewApi } from '@vue2-client/services/api/workFlow'
-import WorkOrderParentDetails from '@vue2-client/pages/WorkflowDetail/WorkflowPageDetail/WorkOrderParentDetails'
-
-export default {
-  name: 'WorkflowBaseInformation',
-  components: { WorkOrderParentDetails },
-  computed: {
-    ...mapState('account', { currUser: 'user' }),
-    ...mapState('setting', ['isMobile']),
-    showProjectPerson: function () {
-      if (!this.details.person) {
-        return false
-      }
-      return Object.keys(this.details.person).length !== 0
-    }
-  },
-  mounted () {
-    this.init()
-  },
-  data () {
-    return {
-      // 控制加载
-      loading: true,
-      // 是否显示日期编辑
-      openCompleteTime: false,
-      // 完成时间
-      completeTime: undefined,
-      // 当前环节截止时间
-      overdueTime: undefined,
-      // 修改原因
-      note: '',
-      // 当前用户是否为创建人
-      isCreatedBy: false,
-      // 是否显示完成时间修改记录
-      changeRecordVisible: false,
-      // 是否显示完成时间修改记录
-      masterWorkOrderVisible: false,
-      // 完成时间修改记录表格列
-      changeRecordColumns: [
-        { dataIndex: 'f_workflow_id', title: '任务id' },
-        { dataIndex: 'f_complete_oldtime', title: '原整体完成时间' },
-        { dataIndex: 'f_set_time', title: '修改后完成时间', customRender (text) { return formatDate(text, 'yyyy-MM-dd') } },
-        { dataIndex: 'f_name', title: '节点名称' },
-        { dataIndex: 'f_handler', title: '节点处理人' },
-        { dataIndex: 'f_deadline_old', title: '原节点截止时间' },
-        { dataIndex: 'f_deadline', title: '节点修改后时间' },
-        { dataIndex: 'f_operator', title: '修改人' },
-        { dataIndex: 'f_operation_time', title: '操作时间' },
-        { dataIndex: 'f_note', title: '修改原因' }
-      ],
-      // 完成时间修改记录
-      changeRecordDataSource: [],
-      // 完成时间修改记录加载状态
-      changeRecordLoading: false
-    }
-  },
-  props: {
-    visible: {
-      type: Boolean,
-      required: true
-    },
-    details: {
-      type: Object,
-      required: true
-    }
-  },
-  methods: {
-    init () {
-      this.loading = this.details.f_entry_name === undefined
-      // this.isCreatedBy = this.currUser.roles.includes('14524271')
-      this.completeTime = undefined
-      this.overdueTime = undefined
-    },
-    // 日期格式化
-    format (date, format) {
-      return formatDate(date, format)
-    },
-    disabledDate (date) {
-      return date.isBefore(moment(), 'day')
-    },
-    saveCompleteTime () {
-      if (!this.completeTime) {
-        this.$message.info('整体完成时间不能为空')
-        return
-      }
-      if (this.note == '') {
-        this.$message.info('修改原因不能为空！')
-        return
-      }
-      if (moment(this.completeTime).isBefore(this.overdueTime, 'day')) {
-        this.$message.info('当前环节截止时间不能晚于整体完成时间')
-        return
-      }
-      postByServiceName(workFlowViewApi.updateWorkFlowCompleteTime, {
-        workflowId: this.details.id,
-        completeTime: this.completeTime,
-        overdueTime: this.overdueTime,
-        name: this.currUser.name,
-        note: this.note
-      }).then(() => {
-        this.$message.success('修改成功')
-        this.details.f_complete_time = this.completeTime
-        this.openCompleteTime = false
-      })
-    },
-    showChangeRecord () {
-      this.changeRecordLoading = true
-      this.changeRecordVisible = true
-      postByServiceName(workFlowViewApi.getWorkFlowCompleteTimeChange, {
-        workflowId: this.details.id
-      }).then(res => {
-        this.changeRecordDataSource = res
-        this.changeRecordLoading = false
-      })
-    },
-    ordRecord () {
-      this.masterWorkOrderVisible = true
-    }
-  },
-  watch: {
-    visible (newVal) {
-      if (newVal) {
-        this.init()
-      }
-    }
-  }
-}
-</script>
-
-<style lang="less">
-#ApplyBaseInformation {
-  .info-card-container {
-    background: transparent;
-
-    .ant-card-body {
-      padding: 0;
-    }
-  }
-
-  .info-cards-wrapper {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 16px;
-
-    .info-card {
-      flex: 1;
-      min-width: 180px;
-      background-color: #fff;
-      border-radius: 8px;
-      padding: 16px;
-      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-      display: flex;
-      align-items: center;
-      transition: all 0.2s ease;
-      cursor: default;
-      border: 1px solid #eaedf2;
-
-      &:hover {
-        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
-      }
-
-      .info-icon {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 46px;
-        height: 46px;
-        border-radius: 8px;
-        font-size: 22px;
-        margin-right: 14px;
-        color: #fff;
-        flex-shrink: 0;
-        position: relative;
-
-        &.status-completed {
-          background-color: #ebad59;
-        }
-
-        &.status-progress {
-          background-color: #5B6B8F;
-        }
-
-        &.date-icon {
-          background-color: #4CAF50;
-        }
-
-        &.workflow-icon {
-          background-color: #FF9800;
-        }
-
-        &.time-icon {
-          background-color: #F44336;
-        }
-
-        &.parent-icon {
-          background-color: #2196F3;
-        }
-
-        .dropdown-icon {
-          position: absolute;
-          right: -8px;
-          bottom: -8px;
-          color: #8392a5;
-          font-size: 14px;
-          background: #fff;
-          border-radius: 50%;
-          width: 20px;
-          height: 20px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          border: 1px solid #eaedf2;
-          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-          cursor: pointer;
-
-          &:hover {
-            color: #5B6B8F;
-          }
-        }
-      }
-
-      .info-content {
-        flex: 1;
-        min-width: 0;
-
-        .info-title {
-          font-size: 20px;
-          font-weight: 600;
-          color: #2c3e50;
-          margin-bottom: 6px;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          display: flex;
-          align-items: center;
-          line-height: 1.3;
-
-          .info-icon-small {
-            margin-left: 6px;
-            color: #8392a5;
-            font-size: 16px;
-            cursor: pointer;
-
-            &:hover {
-              color: #5B6B8F;
-            }
-          }
-
-          .edit-icon {
-            margin-left: 6px;
-            color: #8392a5;
-            font-size: 16px;
-            cursor: pointer;
-
-            &:hover {
-              color: #5B6B8F;
-            }
-          }
-        }
-
-        .info-label {
-          font-size: 14px;
-          color: #8392a5;
-          line-height: 1.4;
-
-          &.status-completed-text {
-            color: #ebad59;
-            font-weight: 600;
-          }
-
-          &.status-progress-text {
-            color: #5B6B8F;
-            font-weight: 600;
-          }
-        }
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div id="ApplyBaseInformation">
+    <a-card :loading="loading" :bordered="false" class="info-card-container">
+      <div class="info-cards-wrapper">
+        <!--  正在进行  -->
+        <div class="info-card">
+          <div class="info-icon" :class="details.f_state === 1 ? 'status-completed' : 'status-progress'">
+            <a-icon type="appstore" theme="filled" />
+          </div>
+          <div class="info-content">
+            <div v-if="showProjectPerson" class="info-title">
+              {{ details.f_entry_name }}
+              <a-popover placement="bottom">
+                <template slot="content">
+                  <div v-if="details.person.f_projectadmin">项目经理：{{ details.person.f_projectadmin }}</div>
+                  <div v-if="details.person.f_shangwuren">客户经理：{{ details.person.f_shangwuren }}</div>
+                  <div v-if="details.person.f_salemanager">销售经理：{{ details.person.f_salemanager }}</div>
+                  <div v-if="details.person.f_egionaladministrator">大区经理：{{ details.person.f_egionaladministrator }}</div>
+                </template>
+                <a-icon type="info-circle" class="info-icon-small" />
+              </a-popover>
+            </div>
+            <div v-else class="info-title">{{ details.f_task_name }}</div>
+            <div class="info-label" :class="details.f_state === 1 ? 'status-completed-text' : 'status-progress-text'">
+              {{ details.f_state === 1 ? '完工' : '正在进行' }}
+            </div>
+          </div>
+        </div>
+
+        <!--  流程信息  -->
+        <div v-show="details.f_state !== 1" class="info-card">
+          <div class="info-icon workflow-icon">
+            <a-icon type="profile" theme="filled" />
+          </div>
+          <div class="info-content">
+            <div class="info-title">{{ details.f_workflow_define_name }}</div>
+            <div class="info-label">{{ details.f_sub_state }}</div>
+          </div>
+        </div>
+
+        <!--  创建日期  -->
+        <div class="info-card">
+          <div class="info-icon date-icon">
+            <a-icon type="carry-out" theme="filled" />
+          </div>
+          <div class="info-content">
+            <div class="info-title">{{ format(details.f_workflow_date, 'yyyy-MM-dd') }}</div>
+            <div class="info-label">创建日期</div>
+          </div>
+        </div>
+
+        <!--  截止时间  -->
+        <div class="info-card" title="若要修改完成时间，请通知部门领导进行修改！">
+          <div class="info-icon time-icon">
+            <a-icon type="clock-circle" theme="filled" />
+            <a-dropdown>
+              <a-icon type="down" class="dropdown-icon" />
+              <a-menu slot="overlay">
+                <a-menu-item @click="showChangeRecord">修改记录</a-menu-item>
+              </a-menu>
+            </a-dropdown>
+          </div>
+          <div class="info-content">
+            <div class="info-title">
+              {{ format(details.f_complete_time, 'yyyy-MM-dd') }}
+              <!--  修改任务时间  -->
+              <a-popover v-if="isCreatedBy" v-model="openCompleteTime" title="修改任务时间" trigger="click">
+                <template slot="content">
+                  <a-form-item label="任务整体完成时间" :label-col="{ span: 10 }" :wrapper-col="{ span: 14 }">
+                    <a-date-picker
+                      v-model="completeTime"
+                      :disabled-date="disabledDate"
+                      :show-today="false"
+                      :allow-clear="false"
+                      value-format="YYYY-MM-DD HH:mm:ss"
+                    >
+                    </a-date-picker>
+                  </a-form-item>
+                  <a-form-item label="当前环节截止时间" :label-col="{ span: 10 }" :wrapper-col="{ span: 14 }">
+                    <a-date-picker
+                      v-model="overdueTime"
+                      :disabled-date="disabledDate"
+                      :show-today="false"
+                      value-format="YYYY-MM-DD 17:00:00"
+                    >
+                    </a-date-picker>
+                  </a-form-item>
+                  <a-form-item label="修改原因" :label-col="{ span: 10 }" :wrapper-col="{ span: 14 }">
+                    <a-textarea
+                      v-model="note"
+                      :auto-size="{ minRows: 3, maxRows: 5 }"
+                      placeholder="修改原因"
+                    />
+                  </a-form-item>
+                  <div style="text-align: right">
+                    <a-button type="primary" size="small" @click="saveCompleteTime">确定</a-button>
+                  </div>
+                </template>
+                <a-icon type="edit" theme="filled" class="edit-icon" />
+              </a-popover>
+            </div>
+            <div class="info-label">截止时间</div>
+          </div>
+        </div>
+
+        <!--  第五个  -->
+        <div v-show="details.f_workflow_parentid" @click="ordRecord" class="info-card">
+          <div class="info-icon parent-icon">
+            <a-icon type="profile" theme="filled" />
+          </div>
+          <div class="info-content">
+            <div class="info-title">{{ details.f_workflow_parentid }}</div>
+            <div class="info-label">父级工单编号</div>
+          </div>
+        </div>
+      </div>
+    </a-card>
+
+    <!-- 完成时间修改记录 -->
+    <a-modal v-model="changeRecordVisible" title="完成时间修改记录" :footer="null" :z-index="1001" :width="1500">
+      <a-table row-key="id" :columns="changeRecordColumns" :data-source="changeRecordDataSource" :loading="changeRecordLoading"></a-table>
+    </a-modal>
+
+    <!-- 父级工单 -->
+    <a-modal v-model="masterWorkOrderVisible" title="主工单" :footer="null" :z-index="1001" :width="1500">
+      <work-order-parent-details :workflow-id="details.f_workflow_parentid"></work-order-parent-details>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import { formatDate } from '@vue2-client/utils/util'
+import { postByServiceName } from '@vue2-client/services/api/restTools'
+import moment from 'moment'
+import { workFlowViewApi } from '@vue2-client/services/api/workFlow'
+import WorkOrderParentDetails from '@vue2-client/pages/WorkflowDetail/WorkflowPageDetail/WorkOrderParentDetails'
+
+export default {
+  name: 'WorkflowBaseInformation',
+  components: { WorkOrderParentDetails },
+  computed: {
+    ...mapState('account', { currUser: 'user' }),
+    ...mapState('setting', ['isMobile']),
+    showProjectPerson: function () {
+      if (!this.details.person) {
+        return false
+      }
+      return Object.keys(this.details.person).length !== 0
+    }
+  },
+  mounted () {
+    this.init()
+  },
+  data () {
+    return {
+      // 控制加载
+      loading: true,
+      // 是否显示日期编辑
+      openCompleteTime: false,
+      // 完成时间
+      completeTime: undefined,
+      // 当前环节截止时间
+      overdueTime: undefined,
+      // 修改原因
+      note: '',
+      // 当前用户是否为创建人
+      isCreatedBy: false,
+      // 是否显示完成时间修改记录
+      changeRecordVisible: false,
+      // 是否显示完成时间修改记录
+      masterWorkOrderVisible: false,
+      // 完成时间修改记录表格列
+      changeRecordColumns: [
+        { dataIndex: 'f_workflow_id', title: '任务id' },
+        { dataIndex: 'f_complete_oldtime', title: '原整体完成时间' },
+        { dataIndex: 'f_set_time', title: '修改后完成时间', customRender (text) { return formatDate(text, 'yyyy-MM-dd') } },
+        { dataIndex: 'f_name', title: '节点名称' },
+        { dataIndex: 'f_handler', title: '节点处理人' },
+        { dataIndex: 'f_deadline_old', title: '原节点截止时间' },
+        { dataIndex: 'f_deadline', title: '节点修改后时间' },
+        { dataIndex: 'f_operator', title: '修改人' },
+        { dataIndex: 'f_operation_time', title: '操作时间' },
+        { dataIndex: 'f_note', title: '修改原因' }
+      ],
+      // 完成时间修改记录
+      changeRecordDataSource: [],
+      // 完成时间修改记录加载状态
+      changeRecordLoading: false
+    }
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      required: true
+    },
+    details: {
+      type: Object,
+      required: true
+    }
+  },
+  methods: {
+    init () {
+      this.loading = this.details.f_entry_name === undefined
+      // this.isCreatedBy = this.currUser.roles.includes('14524271')
+      this.completeTime = undefined
+      this.overdueTime = undefined
+    },
+    // 日期格式化
+    format (date, format) {
+      return formatDate(date, format)
+    },
+    disabledDate (date) {
+      return date.isBefore(moment(), 'day')
+    },
+    saveCompleteTime () {
+      if (!this.completeTime) {
+        this.$message.info('整体完成时间不能为空')
+        return
+      }
+      if (this.note == '') {
+        this.$message.info('修改原因不能为空！')
+        return
+      }
+      if (moment(this.completeTime).isBefore(this.overdueTime, 'day')) {
+        this.$message.info('当前环节截止时间不能晚于整体完成时间')
+        return
+      }
+      postByServiceName(workFlowViewApi.updateWorkFlowCompleteTime, {
+        workflowId: this.details.id,
+        completeTime: this.completeTime,
+        overdueTime: this.overdueTime,
+        name: this.currUser.name,
+        note: this.note
+      }).then(() => {
+        this.$message.success('修改成功')
+        this.details.f_complete_time = this.completeTime
+        this.openCompleteTime = false
+      })
+    },
+    showChangeRecord () {
+      this.changeRecordLoading = true
+      this.changeRecordVisible = true
+      postByServiceName(workFlowViewApi.getWorkFlowCompleteTimeChange, {
+        workflowId: this.details.id
+      }).then(res => {
+        this.changeRecordDataSource = res
+        this.changeRecordLoading = false
+      })
+    },
+    ordRecord () {
+      this.masterWorkOrderVisible = true
+    }
+  },
+  watch: {
+    visible (newVal) {
+      if (newVal) {
+        this.init()
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less">
+#ApplyBaseInformation {
+  .info-card-container {
+    background: transparent;
+
+    .ant-card-body {
+      padding: 0;
+    }
+  }
+
+  .info-cards-wrapper {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+
+    .info-card {
+      flex: 1;
+      min-width: 180px;
+      background-color: #fff;
+      border-radius: 8px;
+      padding: 16px;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+      display: flex;
+      align-items: center;
+      transition: all 0.2s ease;
+      cursor: default;
+      border: 1px solid #eaedf2;
+
+      &:hover {
+        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
+      }
+
+      .info-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 46px;
+        height: 46px;
+        border-radius: 8px;
+        font-size: 22px;
+        margin-right: 14px;
+        color: #fff;
+        flex-shrink: 0;
+        position: relative;
+
+        &.status-completed {
+          background-color: #ebad59;
+        }
+
+        &.status-progress {
+          background-color: #5B6B8F;
+        }
+
+        &.date-icon {
+          background-color: #4CAF50;
+        }
+
+        &.workflow-icon {
+          background-color: #FF9800;
+        }
+
+        &.time-icon {
+          background-color: #F44336;
+        }
+
+        &.parent-icon {
+          background-color: #2196F3;
+        }
+
+        .dropdown-icon {
+          position: absolute;
+          right: -8px;
+          bottom: -8px;
+          color: #8392a5;
+          font-size: 14px;
+          background: #fff;
+          border-radius: 50%;
+          width: 20px;
+          height: 20px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border: 1px solid #eaedf2;
+          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+          cursor: pointer;
+
+          &:hover {
+            color: #5B6B8F;
+          }
+        }
+      }
+
+      .info-content {
+        flex: 1;
+        min-width: 0;
+
+        .info-title {
+          font-size: 20px;
+          font-weight: 600;
+          color: #2c3e50;
+          margin-bottom: 6px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: flex;
+          align-items: center;
+          line-height: 1.3;
+
+          .info-icon-small {
+            margin-left: 6px;
+            color: #8392a5;
+            font-size: 16px;
+            cursor: pointer;
+
+            &:hover {
+              color: #5B6B8F;
+            }
+          }
+
+          .edit-icon {
+            margin-left: 6px;
+            color: #8392a5;
+            font-size: 16px;
+            cursor: pointer;
+
+            &:hover {
+              color: #5B6B8F;
+            }
+          }
+        }
+
+        .info-label {
+          font-size: 14px;
+          color: #8392a5;
+          line-height: 1.4;
+
+          &.status-completed-text {
+            color: #ebad59;
+            font-weight: 600;
+          }
+
+          &.status-progress-text {
+            color: #5B6B8F;
+            font-weight: 600;
+          }
+        }
+      }
+    }
+  }
+}
+</style>