新建工作内表格

wwl

2024-12-19 05e3edd60cdde8fe3d82eaeaaec86a8cd5c7d7b5

新建工作内表格

 src/components/outTable.vue

New file
@@ -0,0 +1,184 @@
<template>
  <div>
    <table
      style="border: 1px solid black; border-collapse: collapse; width: 1800px"
    >
      <thead>
        <tr>
          <th
            style="
              background-color: #add8e6;
              text-align: center;
              border: 1px solid black;
            "
            colspan="5"
          >
            工作基本属性
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td
            style="background-color: #add8e6; width: 200px; text-align: right"
          >
            工作名称：
          </td>
          <td style="padding-left: 20px">
            <input type="text" />
          </td>
        </tr>

        <tr>
          <td colspan="2" style="text-align: center; padding-top: 20px">
            <div
              style="
                color: red;
                font-size: 26px;
                font-weight: 700;
                margin-bottom: 10px;
              "
            >
              {{title}}
            </div>
            <slot></slot>
          </td>
        </tr>

        <tr>
          <td
            style="background-color: #add8e6; width: 200px; text-align: right"
          >
            附件文件：
          </td>
          <td style="padding: 5px 10px">
            <el-button type="danger" plain>删除文件</el-button>
            <el-button type="primary" plain>阅读文件</el-button>
            <el-button type="warning" plain>编辑文件</el-button>
          </td>
        </tr>
        <tr style="padding: 5px">
          <td
            style="background-color: #add8e6; width: 200px; text-align: right"
          >
            上传附件：
          </td>
          <td style="padding: 5px 10px">
            <el-button type="danger" plain>选择文件</el-button>
            未选择任何文件
            <el-button type="warning" plain>上传</el-button>
          </td>
        </tr>
      </tbody>
      <thead>
        <tr>
          <th
            style="
              background-color: #add8e6;
              text-align: center;
              border: 1px solid black;
            "
            colspan="5"
          >
            流程审批附加属性
          </th>
        </tr>
      </thead>
      <tbody>
        <tr style="padding: 5px">
          <td
            style="background-color: #add8e6; width: 200px; text-align: right"
          >
            下一节点选择：
          </td>
          <td style="padding: 5px 10px">
            <select>
              <option value="公开">节点序号：1--节点名称：领导审核</option>
              <option value="保密">保密</option>
              <option value="机密">机密</option>
              <option value="绝密">绝密</option>
            </select>
          </td>
        </tr>
        <tr style="padding: 5px">
          <td
            style="background-color: #add8e6; width: 200px; text-align: right"
          >
            评审模式：
          </td>
          <td style="padding: 5px 10px">一人通过可向下流转</td>
        </tr>
        <tr style="padding: 5px">
          <td
            style="background-color: #add8e6; width: 200px; text-align: right"
          >
            审批人选择模式：
          </td>
          <td style="padding: 5px 10px">从默认审批人中选择</td>
        </tr>
        <tr style="padding: 5px">
          <td
            style="background-color: #add8e6; width: 200px; text-align: right"
          >
            审批人选择：
          </td>
          <td style="padding: 5px 10px">
            <select>
              <option value="公开">张三</option>
              <option value="保密">李四</option>
              <option value="机密">王五</option>
              <option value="绝密">绝密</option>
            </select>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
  
  <script>
export default {
  props: {
    title: {
      type: String,
      required: true
    }
  }
};
</script>
  
  <style>
/* 添加样式来统一处理表格行的边框 */
table tr {
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}
.biao {
  margin: 0 auto;
}
.biao td,
.biao th {
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  white-space: nowrap; /* 防止换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  padding: 10px 0 10px 10px; /* 上右下左，增加左padding */
}
.biao tr:last-child td {
  border-bottom: none;
}
.biao tr td:first-child {
  border-left: none;
}
.custom-input {
  border: none;
  border-bottom: 1px solid black;
  background-color: transparent;
  width: 100%; /* 让输入框充满单元格 */
}
.custom-input:focus {
  border-bottom: 2px solid #0000ff; /* 聚焦时加粗并高亮下边框 */
  outline: none; /* 去除浏览器默认的聚焦轮廓 */
}
</style>

 src/main.js

@@ -31,6 +31,7 @@
import ImageUpload from "@/components/ImageUpload"
// 图片预览组件
import ImagePreview from "@/components/ImagePreview"
import outTable from "@/components/outTable"
// 字典标签组件
import DictTag from '@/components/DictTag'
// 头部标签组件
@@ -61,6 +62,7 @@
Vue.component('FileUpload', FileUpload)
Vue.component('ImageUpload', ImageUpload)
Vue.component('ImagePreview', ImagePreview)
Vue.component('outTable', outTable)

Vue.use(directive)
Vue.use(plugins)

 src/views/pages/shenpiliucheng/items/bangong.vue

New file
@@ -0,0 +1,76 @@
<template>
  <out-table title="某某科技有限公司办公用品申请单">
    <table
      class="biao"
      style="
        border: 1px solid black;
        border-collapse: collapse;
        display: inline-block;
      "
    >
      <tbody>
        <tr>
          <td class="zuo">申请人</td>
          <td style="padding-right: 10px">
            <input type="text" class="custom-input" />
          </td>
          <td class="zuo">申请日期</td>
          <td style="padding-right: 10px">
            <input type="text" class="custom-input" />
          </td>
        </tr>
        <tr>
          <td class="zuo">申请物品</td>
          <td style="padding-right: 10px">
            <input type="text" class="custom-input"/>
          </td>
          <td class="zuo">申请数量</td>
        <td style="padding-right: 10px">
          <input type="text" class="custom-input" />
        </td>
        </tr>

    

        <tr>
          <td class="zuo">申请原因</td>
          <td colspan="5" style="padding: 20px 10px 20px 10px">
            <input type="text" class="custom-input" style="height: 60px" />
          </td>
        </tr>

        <tr>
          <td class="zuo">部门意见</td>
          <td colspan="5" style="padding: 20px 10px 20px 10px">
            <input type="text" class="custom-input" style="height: 60px" />
          </td>
        </tr>
        <tr>
          <td class="zuo">备注</td>
          <td colspan="5" style="padding: 20px 10px 20px 10px">
            <input type="text" class="custom-input" style="height: 60px" />
          </td>
        </tr>
      </tbody>
    </table>
  </out-table>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.zuo {
  background-color: #b8a657;
  width: 100px;
  text-align: left;
  color: red;
}
.zhong {
  color: red;
  font-size: 16px;
  text-align: left;
  width: 100px;
}
</style>

 src/views/pages/shenpiliucheng/items/caigou.vue

@@ -1,15 +1,68 @@
<template>
  <div>
    采购申请单
  </div>
  <out-table title="某某科技有限公司采购申请单">
    <table
      class="biao"
      style="
        border: 1px solid black;
        border-collapse: collapse;
        display: inline-block;
      "
    >
      <tbody>
        <tr>
          <td class="zuo">申请人</td>
          <td style="padding-right: 10px">
            <input type="text" class="custom-input" />
          </td>
          <td class="zhong">申请日期</td>
          <td style="padding-right: 10px">
            <input type="text" class="custom-input" />
          </td>
          <td class="zhong">采购金额</td>
          <td style="padding-right: 10px;width: 150px;display: flex;">
            <input type="text" class="custom-input" />
            <div>元</div>
          </td>
        </tr>
        <tr>
          <td class="zuo">申请原因</td>
          <td colspan="5" style="padding: 20px 10px 20px 10px">
            <input type="text" class="custom-input" style="height: 60px" />
          </td>
        </tr>
        <tr>
          <td class="zuo">部门意见</td>
          <td colspan="5" style="padding: 20px 10px 20px 10px">
            <input type="text" class="custom-input" style="height: 60px" />
          </td>
        </tr>
        
        <tr>
          <td class="zuo">单位意见</td>
          <td colspan="5" style="padding: 20px 10px 20px 10px">
            <input type="text" class="custom-input" style="height: 60px" />
          </td>
        </tr>
      </tbody>
    </table>
  </out-table>
</template>

<script>
export default {

}
export default {};
</script>

<style>

<style lang="scss" scoped>
.zuo {
  background-color: #b8a657;
  width: 100px;
  text-align: left;
  color: red;
}
.zhong {
  color: red;
  font-size: 16px;
  text-align: left;
  width: 100px;
}
</style>

 src/views/pages/shenpiliucheng/items/fawen.vue

@@ -1,15 +1,110 @@
<template>
  <div>
    发文登记
  </div>
  <out-table title="某某科技有限公司发文登记单">
    <table
              class="biao"
              style="
                border: 1px solid black;
                border-collapse: collapse;
                display: inline-block;
              "
            >
              <tbody>
                <tr>
                  <td
                  class="zuo"
                  >
                    收文类别
                  </td>
                  <td style="padding-right: 10px"><input type="text" class="custom-input" /></td>
                  <td class="zhong">文件编号</td>
                  <td style="padding-right: 10px"><input type="text" class="custom-input" /></td>
                  <td class="zhong">秘密等级</td>
                  <td>
                    <select>
                      <option value="公开">公开</option>
                      <option value="保密">保密</option>
                      <option value="机密">机密</option>
                      <option value="绝密">绝密</option>
                    </select>
                  </td>
                </tr>
                <tr>
                  <td   class="zuo">
                    数据1
                  </td>
                  <td style="padding-right: 10px"><input type="text" class="custom-input" /></td>
                  <td class="zhong">收文日期</td>
                  <td style="padding-right: 10px"><input type="text" class="custom-input" /></td>
                  <td class="zhong">紧急程度</td>
                  <td>
                    <select>
                      <option value="公开">公开</option>
                      <option value="保密">保密</option>
                      <option value="机密">机密</option>
                      <option value="绝密">绝密</option>
                    </select>
                  </td>
                </tr>
                <tr>
                  <td   class="zuo">
                    收文字号
                  </td>
                  <td  style="padding-right: 10px">
                    <input type="text" class="custom-input" />
                  </td>
                  <td class="zhong">来文单位</td>
                  <td colspan="3" style="padding-right: 10px">
                    <input type="text" class="custom-input" />
                  </td>
                </tr>
                <tr>
                  <td   class="zuo">
                    主题词
                  </td>
                  <td colspan="5" style="padding-right: 10px">
                    <input type="text" class="custom-input" />
                  </td>
                </tr>
                <tr>
                  <td class="zuo">
                    文件标题
                  </td>
                  <td colspan="5" style="padding-right: 10px">
                    <input type="text" class="custom-input" />
                  </td>
                </tr>
                <tr>
                  <td class="zuo">
                    备注
                  </td>
                  <td colspan="5" style="padding: 20px 10px 20px 10px">
                    <input
                      type="text"
                      class="custom-input"
                      style="height: 60px"
                    />
                  </td>
                </tr>
              </tbody>
            </table>
  </out-table>
</template>

<script>
export default {

}
export default {};
</script>

<style>

<style lang="scss" scoped>
.zuo {
  background-color: #b8a657;
  width: 100px;
  text-align: left;
  color: red;
}
.zhong {
  color: red;
  font-size: 16px;
  text-align: left;
  width: 100px;
}
</style>

 src/views/pages/shenpiliucheng/items/feiyong.vue

@@ -1,15 +1,68 @@
<template>
  <div>
    费用报销单
  </div>
  <out-table title="某某科技有限公司费用报销单">
    <table
      class="biao"
      style="
        border: 1px solid black;
        border-collapse: collapse;
        display: inline-block;
      "
    >
      <tbody>
        <tr>
          <td class="zuo">申请人</td>
          <td style="padding-right: 10px">
            <input type="text" class="custom-input" />
          </td>
          <td class="zhong">申请日期</td>
          <td style="padding-right: 10px">
            <input type="text" class="custom-input" />
          </td>
          <td class="zhong">采购金额</td>
          <td style="padding-right: 10px;width: 150px;display: flex;">
            <input type="text" class="custom-input" />
            <div>元</div>
          </td>
        </tr>
        <tr>
          <td class="zuo">申请原因</td>
          <td colspan="5" style="padding: 20px 10px 20px 10px">
            <input type="text" class="custom-input" style="height: 60px" />
          </td>
        </tr>
        <tr>
          <td class="zuo">部门意见</td>
          <td colspan="5" style="padding: 20px 10px 20px 10px">
            <input type="text" class="custom-input" style="height: 60px" />
          </td>
        </tr>
        
        <tr>
          <td class="zuo">单位意见</td>
          <td colspan="5" style="padding: 20px 10px 20px 10px">
            <input type="text" class="custom-input" style="height: 60px" />
          </td>
        </tr>
      </tbody>
    </table>
  </out-table>
</template>

<script>
export default {

}
export default {};
</script>

<style>

<style lang="scss" scoped>
.zuo {
  background-color: #b8a657;
  width: 100px;
  text-align: left;
  color: red;
}
.zhong {
  color: red;
  font-size: 16px;
  text-align: left;
  width: 100px;
}
</style>

 src/views/pages/shenpiliucheng/items/huiyi.vue

New file
@@ -0,0 +1,75 @@
<template>
  <out-table title="某某科技有限公司会议申请单">
    <table
      class="biao"
      style="
        border: 1px solid black;
        border-collapse: collapse;
        display: inline-block;
      "
    >
      <tbody>
        <tr>
          <td class="zuo">申请人</td>
          <td style="padding-right: 10px">
            <input type="text" class="custom-input" />
          </td>
          <td class="zhong">会议日期</td>
          <td style="padding-right: 10px">
            <input type="text" class="custom-input" />
          </td>
        </tr>
        <tr>
          <td class="zuo">会议主题</td>
          <td colspan="3">
            <input type="text" class="custom-input" />
          </td>
        </tr>
        <tr>
          <td class="zuo">会议参与人</td>
          <td colspan="3">
            <input type="text" class="custom-input" />
          </td>
        </tr>
        <tr>
          <td class="zuo">申请原因</td>
          <td colspan="5" style="padding: 20px 10px 20px 10px">
            <input type="text" class="custom-input" style="height: 60px" />
          </td>
        </tr>

        <tr>
          <td class="zuo">部门审核</td>
          <td colspan="5" style="padding: 20px 10px 20px 10px">
            <input type="text" class="custom-input" style="height: 60px" />
          </td>
        </tr>
        <tr>
          <td class="zuo">单位审核</td>
          <td colspan="5" style="padding: 20px 10px 20px 10px">
            <input type="text" class="custom-input" style="height: 60px" />
          </td>
        </tr>
      </tbody>
    </table>
  </out-table>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.zuo {
  background-color: #b8a657;
  width: 100px;
  text-align: left;
  color: red;
}
.zhong {
  color: red;
  font-size: 16px;
  text-align: left;
  width: 100px;
}
</style>

 src/views/pages/shenpiliucheng/items/lizhi.vue

New file
@@ -0,0 +1,79 @@
<template>
  <out-table title="某某科技有限公司员工请假单">
    <table
      class="biao"
      style="
        border: 1px solid black;
        border-collapse: collapse;
        display: inline-block;
      "
    >
      <tbody>
        <tr>
          <td class="zuo">申请人</td>
          <td style="padding-right: 10px">
            <input type="text" class="custom-input" />
          </td>
          <td class="zhong">离职日期</td>
          <td style="padding-right: 10px">
            <input type="text" class="custom-input" />
          </td>
          <td class="zhong">所在部门</td>
          <td style="padding-right: 10px">
            <select>
                      <option value="公开">A部门</option>
                      <option value="保密">B部门</option>
                      <option value="机密">机密</option>
                      <option value="绝密">绝密</option>
                    </select>
          </td>
        </tr>
  
        <tr>
          <td class="zuo">离职原因</td>
          <td colspan="5" style="padding: 20px 10px 20px 10px">
            <input type="text" class="custom-input" style="height: 60px" />
          </td>
        </tr>

        <tr>
          <td class="zuo">部门意见</td>
          <td colspan="5" style="padding: 20px 10px 20px 10px">
            <input type="text" class="custom-input" style="height: 60px" />
          </td>
        </tr>
        <tr>
          <td class="zuo">单位意见</td>
          <td colspan="5" style="padding: 20px 10px 20px 10px">
            <input type="text" class="custom-input" style="height: 60px" />
          </td>
        </tr>
        <tr>
          <td class="zuo">人事意见</td>
          <td colspan="5" style="padding: 20px 10px 20px 10px">
            <input type="text" class="custom-input" style="height: 60px" />
          </td>
        </tr>
      </tbody>
    </table>
  </out-table>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.zuo {
  background-color: #b8a657;
  width: 100px;
  text-align: left;
  color: red;
}
.zhong {
  color: red;
  font-size: 16px;
  text-align: left;
  width: 100px;
}
</style>

 src/views/pages/shenpiliucheng/items/qingjiadan.vue

New file
@@ -0,0 +1,70 @@
<template>
  <out-table title="某某科技有限公司员工请假单">
    <table
      class="biao"
      style="
        border: 1px solid black;
        border-collapse: collapse;
        display: inline-block;
      "
    >
      <tbody>
        <tr>
          <td class="zuo">申请人</td>
          <td style="padding-right: 10px">
            <input type="text" class="custom-input" />
          </td>
          <td class="zhong">请假时间</td>
          <td style="padding-right: 10px">
            <input type="text" class="custom-input" />
          </td>
        </tr>
  
        <tr>
          <td class="zuo">请假原因</td>
          <td colspan="5" style="padding: 20px 10px 20px 10px">
            <input type="text" class="custom-input" style="height: 60px" />
          </td>
        </tr>

        <tr>
          <td class="zuo">部门意见</td>
          <td colspan="5" style="padding: 20px 10px 20px 10px">
            <input type="text" class="custom-input" style="height: 60px" />
          </td>
        </tr>
        <tr>
          <td class="zuo">单位意见</td>
          <td colspan="5" style="padding: 20px 10px 20px 10px">
            <input type="text" class="custom-input" style="height: 60px" />
          </td>
        </tr>
        <tr>
          <td class="zuo">人事意见</td>
          <td colspan="5" style="padding: 20px 10px 20px 10px">
            <input type="text" class="custom-input" style="height: 60px" />
          </td>
        </tr>
      </tbody>
    </table>
  </out-table>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.zuo {
  background-color: #b8a657;
  width: 100px;
  text-align: left;
  color: red;
}
.zhong {
  color: red;
  font-size: 16px;
  text-align: left;
  width: 100px;
}
</style>

 src/views/pages/shenpiliucheng/items/shouwen.vue

@@ -1,15 +1,100 @@
<template>
  <div>
    收文登记
  </div>
  <out-table title="某某科技有限公司收文登记单">
    <table
      class="biao"
      style="
        border: 1px solid black;
        border-collapse: collapse;
        display: inline-block;
      "
    >
      <tbody>
        <tr>
          <td class="zuo">收文类别</td>
          <td style="padding-right: 10px">
            <input type="text" class="custom-input" />
          </td>
          <td class="zhong">文件编号</td>
          <td style="padding-right: 10px">
            <input type="text" class="custom-input" />
          </td>
          <td class="zhong">秘密等级</td>
          <td>
            <select>
              <option value="公开">公开</option>
              <option value="保密">保密</option>
              <option value="机密">机密</option>
              <option value="绝密">绝密</option>
            </select>
          </td>
        </tr>
        <tr>
          <td class="zuo">数据1</td>
          <td style="padding-right: 10px">
            <input type="text" class="custom-input" />
          </td>
          <td class="zhong">收文日期</td>
          <td style="padding-right: 10px">
            <input type="text" class="custom-input" />
          </td>
          <td class="zhong">紧急程度</td>
          <td>
            <select>
              <option value="公开">公开</option>
              <option value="保密">保密</option>
              <option value="机密">机密</option>
              <option value="绝密">绝密</option>
            </select>
          </td>
        </tr>
        <tr>
          <td class="zuo">收文字号</td>
          <td style="padding-right: 10px">
            <input type="text" class="custom-input" />
          </td>
          <td class="zhong">来文单位</td>
          <td colspan="3" style="padding-right: 10px">
            <input type="text" class="custom-input" />
          </td>
        </tr>
        <tr>
          <td class="zuo">主题词</td>
          <td colspan="5" style="padding-right: 10px">
            <input type="text" class="custom-input" />
          </td>
        </tr>
        <tr>
          <td class="zuo">文件标题</td>
          <td colspan="5" style="padding-right: 10px">
            <input type="text" class="custom-input" />
          </td>
        </tr>
        <tr>
          <td class="zuo">备注</td>
          <td colspan="5" style="padding: 20px 10px 20px 10px">
            <input type="text" class="custom-input" style="height: 60px" />
          </td>
        </tr>
      </tbody>
    </table>
  </out-table>
</template>

<script>
export default {

}
export default {};
</script>

<style>

<style lang="scss" scoped>
.zuo {
  background-color: #b8a657;
  width: 100px;
  text-align: left;
  color: red;
}
.zhong {
  color: red;
  font-size: 16px;
  text-align: left;
  width: 100px;
}
</style>

 src/views/pages/shenpiliucheng/newJob.vue

@@ -10,10 +10,10 @@
          <div class="title">公文</div>
          <el-row :gutter="12">
            <el-col :span="8" >
              <el-card shadow="hover" ><div @click="goToItemPage">发文登记</div></el-card>
              <el-card shadow="hover" ><div @click="goToItemPage('/shenpiliucheng/fawen')">发文登记</div></el-card>
            </el-col>
            <el-col :span="8">
              <el-card shadow="hover">收文登记</el-card>
              <el-card shadow="hover"><div @click="goToItemPage('/shenpiliucheng/shouwen')">收文登记</div></el-card>
            </el-col>
          </el-row>
        </div>
@@ -21,16 +21,16 @@
          <div class="title">行政</div>
          <el-row :gutter="12">
            <el-col :span="8">
              <el-card shadow="hover">采购申请单</el-card>
              <el-card shadow="hover"><div @click="goToItemPage('/shenpiliucheng/caigou')">采购申请单</div></el-card>
            </el-col>
            <el-col :span="8">
              <el-card shadow="hover">费用报销单</el-card>
              <el-card shadow="hover"><div @click="goToItemPage('/shenpiliucheng/feiyong')">费用报销单</div></el-card>
            </el-col>
            <el-col :span="8">
              <el-card shadow="hover">会议申请单</el-card>
              <el-card shadow="hover"><div @click="goToItemPage('/shenpiliucheng/huiyi')">会议申请单</div></el-card>
            </el-col>
            <el-col :span="8">
              <el-card shadow="hover">办公用品申请单</el-card>
              <el-card shadow="hover"><div @click="goToItemPage('/shenpiliucheng/bangong')">办公用品申请单</div></el-card>
            </el-col>
          </el-row>
        </div>
@@ -38,10 +38,10 @@
          <div class="title">人事</div>
          <el-row :gutter="12">
            <el-col :span="8">
              <el-card shadow="hover">员工请假单</el-card>
              <el-card shadow="hover"><div @click="goToItemPage('/shenpiliucheng/qingjiadan')">员工请假单</div></el-card>
            </el-col>
            <el-col :span="8">
              <el-card shadow="hover">离职申请单</el-card>
              <el-card shadow="hover"><div @click="goToItemPage('/shenpiliucheng/lizhi')">离职申请单</div></el-card>
            </el-col>
          </el-row>
        </div>
@@ -75,13 +75,8 @@
    };
  },
  methods: {
    goToItemPage() {
      console.log('111')
      this.$router.push("/shenpiliucheng/wode");
    },
    goWode() {
      console.log('111')
      this.$router.push("/shenpiliucheng/wode");
    goToItemPage(url) {
      this.$router.push(url);
    },
  },
};

 vue.config.js

@@ -35,7 +35,7 @@
    proxy: {
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        target: `http://192.168.1.3:5030`,
        target: `http://192.168.1.2:5030`,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''