Skip to content

M
mocp-uniapp
Commit 9f2a4fd3 by pangchong
Options

feat: 工作任务开发收尾

parent 541150e3
Showing with 446 additions and 35 deletions
components.d.ts
......@@ -27,6 +27,7 @@ declare module 'vue' {
GlobalPopup: typeof import('./src/mocp/components/global-popup/global-popup.vue')['default']
GlobalRadio: typeof import('./src/mocp/components/global-radio/global-radio.vue')['default']
GlobalTabs: typeof import('./src/mocp/components/global-tabs/global-tabs.vue')['default']
GlobalTag: typeof import('./src/mocp/components/global-tag/global-tag.vue')['default']
GlobalUpload: typeof import('./src/mocp/components/global-upload/global-upload.vue')['default']
GlobalUploadImage: typeof import('./src/mocp/components/global-upload-image/global-upload-image.vue')['default']
// 自定义组件
......
src/mocp/api/work-assignment.js
......@@ -8,5 +8,11 @@ export const getWorkTaskListApi = (data, config) => {
config
})
}
\ No newline at end of file
export const WorkTaskIsSuccessApi = (data, config) => {
return http({
method: 'POST',
url: '/workbench/WorkTaskIsSuccess',
data,
config
})
}
src/mocp/components/global-button/global-button.scss
@mixin global-button-light {
//primary
@mixin global-button-primary-plain {
color: $mocp-primary-6;
background-color: $mocp-primary-1;
}
@mixin global-button-light-active {
@mixin global-button-primary-plain-active {
color: darken($mocp-primary-6, 10%);
background-color: darken($mocp-primary-1, 5%);
border-color: darken($mocp-primary-1, 5%);
......@@ -16,6 +17,16 @@
background-color: darken($mocp-primary-7, 5%);
border-color: darken($mocp-primary-7, 5%);
}
//success
@mixin global-button-success-plain {
color: $mocp-success-6;
background-color: $mocp-success-1;
}
@mixin global-button-success-plain-active {
color: darken($mocp-success-6, 10%);
background-color: darken($mocp-success-1, 5%);
border-color: darken($mocp-success-1, 5%);
}
@mixin global-button-success {
color: #fff;
background-color: $mocp-success-6;
......@@ -25,6 +36,16 @@
background-color: darken($mocp-success-7, 5%);
border-color: darken($mocp-success-7, 5%);
}
//warning
@mixin global-button-warning-plain {
color: $mocp-warning-6;
background-color: $mocp-warning-1;
}
@mixin global-button-warning-plain-active {
color: darken($mocp-warning-6, 10%);
background-color: darken($mocp-warning-1, 5%);
border-color: darken($mocp-warning-1, 5%);
}
@mixin global-button-warning {
color: #fff;
background-color: $mocp-warning-6;
......@@ -34,6 +55,16 @@
background-color: darken($mocp-warning-7, 5%);
border-color: darken($mocp-warning-7, 5%);
}
//danger
@mixin global-button-danger-plain {
color: $mocp-danger-6;
background-color: $mocp-danger-1;
}
@mixin global-button-danger-plain-active {
color: darken($mocp-danger-6, 10%);
background-color: darken($mocp-danger-1, 5%);
border-color: darken($mocp-danger-1, 5%);
}
@mixin global-button-danger {
color: #fff;
background-color: $mocp-danger-6;
......@@ -47,10 +78,10 @@
padding: 0 20rpx;
margin: 0;
font-size: 28rpx;
&.light {
@include global-button-light;
&.primary-plain {
@include global-button-primary-plain;
&:active {
@include global-button-light-active;
@include global-button-primary-plain-active;
}
&::after {
border: none;
......@@ -62,18 +93,45 @@
@include global-button-primary-active;
}
}
&.success-plain {
@include global-button-success-plain;
&:active {
@include global-button-success-plain-active;
}
&::after {
border: none;
}
}
&.success {
@include global-button-success;
&:active {
@include global-button-success-active;
}
}
&.warning-plain {
@include global-button-warning-plain;
&:active {
@include global-button-warning-plain-active;
}
&::after {
border: none;
}
}
&.warning {
@include global-button-warning;
&:active {
@include global-button-warning-active;
}
}
&.danger-plain {
@include global-button-danger-plain;
&:active {
@include global-button-danger-plain-active;
}
&::after {
border: none;
}
}
&.danger {
@include global-button-danger;
&:active {
......
src/mocp/components/global-button/global-button.vue
<template>
<!-- 全局button -->
<button :class="getClass" :style="style" :loading="loading" :disabled="disabled">
<global-icon class="icon" :icon="icon" v-if="icon"></global-icon>
<slot></slot>
</button>
</template>
......@@ -22,7 +23,12 @@ const ps = defineProps({
return {}
}
},
//default,light,primary,success,warning,danger,text
//图标
icon: {
type: String,
default: ''
},
//default,primary,success,warning,danger,text
type: {
type: String,
default: 'default'
......@@ -32,6 +38,11 @@ const ps = defineProps({
type: String,
default: 'default'
},
//是否镂空
plain: {
type: Boolean,
default: false
},
loading: {
type: Boolean,
default: false
......@@ -46,9 +57,12 @@ const getClass = computed(() => {
if (ps.class) {
_class.push(ps.class)
}
if (ps.type) {
if (ps.plain) {
_class.push(ps.type + '-plain')
} else {
_class.push(ps.type)
}
return _class
})
const getSize = computed(() => {
......@@ -75,5 +89,8 @@ const getRadius = computed(() => {
border-radius: v-bind(getRadius);
height: v-bind(getSize);
line-height: v-bind(getSize);
.icon {
margin-right: 8rpx;
}
}
</style>
src/mocp/components/global-icon/global-icon.vue
......@@ -11,7 +11,7 @@ const ps = defineProps({
},
color: {
type: String,
default: '#4E5969'
default: 'currentColor'
},
size: {
type: [Number, String],
......
src/mocp/components/global-tag/global-tag.vue 0 → 100644
<template>
<text class="global-tag" :class="getClass">
<slot></slot>
</text>
</template>
<script setup>
import { computed } from 'vue'
const ps = defineProps({
//primary / success / warning / danger
type: {
type: String,
default: 'primary'
},
class: {
type: String,
default: ''
},
radious: {
type: [String, Number],
default: 6
}
})
//获取class
const getClass = computed(() => {
const _class = []
if (ps.class) {
_class.push(ps.class)
}
if (ps.type == 'primary') {
_class.push('mocp-bg-primary-2')
_class.push('mocp-color-primary-6')
}
if (ps.type == 'success') {
_class.push('mocp-bg-success-2')
_class.push('mocp-color-success-6')
}
if (ps.type == 'warning') {
_class.push('mocp-bg-warning-2')
_class.push('mocp-color-warning-6')
}
if (ps.type == 'danger') {
_class.push('mocp-bg-danger-2')
_class.push('mocp-color-danger-6')
}
return _class
})
//获取圆角
const getRadious = computed(() => {
if (typeof ps.radious == 'string') {
return ps.radious
} else {
return ps.radious + 'rpx'
}
})
</script>
<style lang="scss" scoped>
.global-tag {
font-size: 24rpx;
padding: 4rpx 8rpx;
border-radius: v-bind(getRadious);
}
</style>
src/mocp/components/global-upload/global-upload.vue
......@@ -72,7 +72,7 @@ const ps = defineProps({
}
},
fileList: {
type: Array,
type: [Array, String],
default: () => {
return []
}
......@@ -102,7 +102,13 @@ const fileList = ref([])
watch(
() => ps.fileList,
(value) => {
fileList.value = cloneDeep(value)
if (value) {
if (Array.isArray(value)) {
fileList.value = cloneDeep(value)
} else {
fileList.value = JSON.parse(value)
}
}
},
{ immediate: true }
)
......
src/mocp/hooks/use-dict/dict-data/work-assignment.js
......@@ -3,3 +3,13 @@ export const wa_state = [
{ label: 'OPEN', value: '1' },
{ label: 'CLOSE', value: '2' }
]
export const wa_isSuccess = [
{ label: '已拒绝', value: '1' },
{ label: '待接收', value: '2' },
{ label: '已接收', value: '3' }
]
export const wa_isSuccessType = [
{ label: 'danger', value: '1' },
{ label: 'primary', value: '2' },
{ label: 'success', value: '3' }
]
src/mocp/store/work-assignment.js
......@@ -33,6 +33,16 @@ const useWorkAssignmentStore = defineStore('workAssignment', {
}
},
// 配置持久化
persist: false
persist: {
// 调整为兼容多端的API
storage: {
setItem(key, value) {
uni.setStorageSync(key, value)
},
getItem(key) {
return uni.getStorageSync(key)
}
}
}
})
export default useWorkAssignmentStore
src/pages/modules/mocp/panel/appraisal-record/search.vue
......@@ -50,7 +50,7 @@
<view class="footer-btn">
<up-row gutter="10">
<up-col span="6">
<global-button type="light" size="large" :radius="5" @tap="handleReset">重置</global-button>
<global-button type="primary" plain size="large" :radius="5" @tap="handleReset">重置</global-button>
</up-col>
<up-col span="6"><global-button type="primary" size="large" :radius="5" @tap="handleConfirm">确定</global-button></up-col>
</up-row>
......
src/pages/modules/mocp/panel/assign-work/search.vue
......@@ -47,7 +47,7 @@
<view class="footer-btn">
<up-row gutter="10">
<up-col span="6">
<global-button type="light" size="large" :radius="5" @tap="handleReset">重置</global-button>
<global-button type="primary" plain size="large" :radius="5" @tap="handleReset">重置</global-button>
</up-col>
<up-col span="6"><global-button type="primary" size="large" :radius="5" @tap="handleConfirm">确定</global-button></up-col>
</up-row>
......
src/pages/modules/mocp/panel/move-decision/search.vue
......@@ -62,7 +62,7 @@
<view class="footer-btn">
<up-row gutter="10">
<up-col span="6">
<global-button type="light" size="large" :radius="5" @tap="handleReset">重置</global-button>
<global-button type="primary" plain size="large" :radius="5" @tap="handleReset">重置</global-button>
</up-col>
<up-col span="6"><global-button type="primary" size="large" :radius="5" @tap="handleConfirm">确定</global-button></up-col>
</up-row>
......
src/pages/modules/mocp/panel/technology-evaluation/search.vue
......@@ -37,7 +37,7 @@
<view class="footer-btn">
<up-row gutter="10">
<up-col span="6">
<global-button type="light" size="large" :radius="5" @tap="handleReset">重置</global-button>
<global-button type="primary" plain size="large" :radius="5" @tap="handleReset">重置</global-button>
</up-col>
<up-col span="6"><global-button type="primary" size="large" :radius="5" @tap="handleConfirm">确定</global-button></up-col>
</up-row>
......
src/pages/modules/mocp/panel/work-assignment/constants/details.scss 0 → 100644
.details {
padding: 16rpx 24rpx;
border-radius: 12rpx;
background: #ffffff;
color: $mocp-text-4;
&-header {
&-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16rpx;
}
&-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 16rpx;
.left {
display: flex;
align-items: center;
.left-icon {
margin-right: 16rpx;
}
}
}
}
&-body {
&-content {
padding: 16rpx 0;
font-size: 30rpx;
border-top: 2rpx solid #f4f4f4;
border-bottom: 2rpx solid #f4f4f4;
}
&-file {
padding-top: 16rpx;
image {
width: 100%;
}
}
}
&-footer {
padding-top: 16rpx;
border-top: 2rpx solid #f4f4f4;
.row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16rpx;
&:last-child {
margin-bottom: 0;
}
}
}
}
src/pages/modules/mocp/panel/work-assignment/details.vue
<template>
<global-page :padding="24" title="工作任务指令详情"></global-page>
<global-page :padding="24" title="工作任务指令详情">
<template v-if="details">
<view class="details">
<view class="details-header">
<view class="details-header-top">
<view class="left">
<custom-state :value="useGetDictByValue('wa_state', details.state)" :size="32"></custom-state>
</view>
<view class="right">
<global-tag :type="useGetDictByValue('wa_isSuccessType', details.isSuccess)">
{{ useGetDictByValue('wa_isSuccess', details.isSuccess) }}
</global-tag>
</view>
</view>
<view class="details-header-bottom">
<view class="left">
<global-icon class="left-icon" icon="Vector" size="24" color="#DD4012"></global-icon>
<view class="txt">{{ details.aviation }} {{ details.machineNumber }} {{ details.model }}</view>
</view>
<view class="right">
<view class="txt">{{ details.terminal }}</view>
</view>
</view>
</view>
<view class="details-body">
<view class="details-body-content">
{{ details.taskDescription || '无' }}
</view>
<view class="details-body-file">
<global-upload :fileList="details.taskFile" :showUpload="false"></global-upload>
</view>
</view>
<view class="details-footer">
<view class="row">
<global-field label="反馈时限:" :value="timeStampFormat(details.feedbackTime, { format: 'YYYY/MM/DD' })"></global-field>
</view>
<view class="row">
<global-field label="发起人:" :value="details.sponsor || '-'"></global-field>
<global-field label="发起时间:" :value="timeStampFormat(details.creationTime, { format: 'YYYY/MM/DD' })"></global-field>
</view>
<view class="row">
<global-field label="接收人:" :value="details.recipient || '-'"></global-field>
<global-field label="接收时间:" :value="timeStampFormat(details.recipientTime, { format: 'YYYY/MM/DD' })"></global-field>
</view>
</view>
</view>
</template>
<template #bottom>
<view class="footer-btn">
<template
v-if="
details.sponsorId == userStore.userInfo?.realUserInfo.id ||
details.recipientId == userStore.userInfo?.realUserInfo.id ||
details.isSuccess != '2'
"
>
<global-button type="success" plain size="large" :radius="5" icon="check-circle-filled" v-if="details.isSuccess == '3'">
已接收
</global-button>
<global-button type="danger" plain size="large" :radius="5" icon="close-circle-filled" v-if="details.isSuccess == '1'">
已拒绝
</global-button>
</template>
<template v-else>
<up-row gutter="10">
<up-col span="6">
<global-button type="primary" plain size="large" :radius="5" @tap="confirm('1')">拒绝</global-button>
</up-col>
<up-col span="6">
<global-button type="primary" size="large" :radius="5" @tap="confirm('3')">接收</global-button>
</up-col>
</up-row>
</template>
</view>
</template>
<up-modal
:width="250"
:content="isSuccessValue == '1' ? '确认拒绝吗?' : '确认接收吗?'"
:show="show"
showCancelButton
closeOnClickOverlay
@confirm="handleWorkTaskIsSuccess"
@cancel="show = false"
@close="show = false"
></up-modal>
</global-page>
</template>
<script setup>
import useWorkAssignmentStore from 'mocp/store/work-assignment'
import { storeToRefs } from 'pinia'
import useBaseStore from 'mocp/store/base'
import useUserStore from 'mocp/store/user'
import { timeStampFormat } from 'mocp/utils/tool'
import { useGetDictByValue } from 'mocp/hooks/use-dict/useDict'
import { ref } from 'vue'
import { WorkTaskIsSuccessApi } from 'mocp/api/work-assignment'
const workAssignmentStore = useWorkAssignmentStore()
const { details } = storeToRefs(workAssignmentStore)
console.log(details.value)
const baseStore = useBaseStore()
const userStore = useUserStore()
//接收或者拒绝
const show = ref(false)
const isSuccessValue = ref('')
const confirm = (isSuccess) => {
show.value = true
isSuccessValue.value = isSuccess
}
const handleWorkTaskIsSuccess = async () => {
const params = {
id: details.value.id,
isSuccess: isSuccessValue.value
}
const res = await WorkTaskIsSuccessApi(params, { loading: true })
if ((res.code = 200)) {
show.value = false
uni.$mocpMessage.success(res.message)
//更新详情
workAssignmentStore.setState('details', res.data)
} else {
uni.$mocpMessage.error(res.message)
}
}
</script>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
@import './constants/details.scss';
.footer-btn {
padding: 24rpx 32rpx;
background-color: #fff;
}
</style>
src/pages/modules/mocp/panel/work-assignment/list.vue
......@@ -19,10 +19,12 @@
<view class="item-title">
<view class="left">
<custom-state :value="useGetDictByValue('wa_state', item.state)"></custom-state>
<text class="txt u-line-1" v-if="item.machineNumber">{{ item.machineNumber }}</text>
</view>
<view class="right">
<text class="txt u-line-1" v-if="item.machineNumber">{{ item.machineNumber }}</text>
<text class="txt u-line-1" v-if="item.aviation">{{ item.aviation }}</text>
<global-tag :type="useGetDictByValue('wa_isSuccessType', item.isSuccess)">
{{ useGetDictByValue('wa_isSuccess', item.isSuccess) }}
</global-tag>
</view>
</view>
<view class="item-content u-line-3">
......
src/pages/modules/mocp/panel/work-assignment/search.vue
......@@ -29,19 +29,19 @@
filter
></global-picker>
</up-form-item>
<up-form-item label="反馈时限" prop="feedbackTime" :borderBottom="true">
<global-date v-model="formData.feedbackTime" pickAlign="right" clearable></global-date>
</up-form-item>
<up-form-item label="发起人" prop="sponsor" :borderBottom="true">
<up-input v-model="formData.sponsor" inputAlign="right" border="none" placeholder="请输入" clearable></up-input>
</up-form-item>
<up-form-item label="反馈时限" prop="feedbackTime" :borderBottom="true">
<global-date v-model="formData.feedbackTime" pickAlign="right" clearable></global-date>
</up-form-item>
</up-form>
</view>
<template #bottom>
<view class="footer-btn">
<up-row gutter="10">
<up-col span="6">
<global-button type="light" size="large" :radius="5" @tap="handleReset">重置</global-button>
<global-button type="primary" plain size="large" :radius="5" @tap="handleReset">重置</global-button>
</up-col>
<up-col span="6"><global-button type="primary" size="large" :radius="5" @tap="handleConfirm">确定</global-button></up-col>
</up-row>
......
src/static/mocp/font/demo_index.html
......@@ -55,6 +55,18 @@
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe6e4;</span>
<div class="name">close-circle-filled</div>
<div class="code-name">&amp;#xe6e4;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6e5;</span>
<div class="name">check-circle-filled</div>
<div class="code-name">&amp;#xe6e5;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6e3;</span>
<div class="name">fly</div>
<div class="code-name">&amp;#xe6e3;</div>
......@@ -168,9 +180,9 @@
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1720593389064') format('woff2'),
url('iconfont.woff?t=1720593389064') format('woff'),
url('iconfont.ttf?t=1720593389064') format('truetype');
src: url('iconfont.woff2?t=1721199173027') format('woff2'),
url('iconfont.woff?t=1721199173027') format('woff'),
url('iconfont.ttf?t=1721199173027') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
......@@ -197,6 +209,24 @@
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-close-circle-filled"></span>
<div class="name">
close-circle-filled
</div>
<div class="code-name">.icon-close-circle-filled
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-check-circle-filled"></span>
<div class="name">
check-circle-filled
</div>
<div class="code-name">.icon-check-circle-filled
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-fly"></span>
<div class="name">
fly
......@@ -369,6 +399,22 @@
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-close-circle-filled"></use>
</svg>
<div class="name">close-circle-filled</div>
<div class="code-name">#icon-close-circle-filled</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-check-circle-filled"></use>
</svg>
<div class="name">check-circle-filled</div>
<div class="code-name">#icon-check-circle-filled</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-fly"></use>
</svg>
<div class="name">fly</div>
......
src/static/mocp/font/iconfont.css
@font-face {
font-family: "iconfont"; /* Project id 4550048 */
src: url('iconfont.woff2?t=1720593389064') format('woff2'),
url('iconfont.woff?t=1720593389064') format('woff'),
url('iconfont.ttf?t=1720593389064') format('truetype');
src: url('iconfont.woff2?t=1721199173027') format('woff2'),
url('iconfont.woff?t=1721199173027') format('woff'),
url('iconfont.ttf?t=1721199173027') format('truetype');
}
.iconfont {
......@@ -13,6 +13,14 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-close-circle-filled:before {
content: "\e6e4";
}
.icon-check-circle-filled:before {
content: "\e6e5";
}
.icon-fly:before {
content: "\e6e3";
}
......
src/static/mocp/font/iconfont.json
......@@ -6,6 +6,20 @@
"description": "",
"glyphs": [
{
"icon_id": "41114520",
"name": "close-circle-filled",
"font_class": "close-circle-filled",
"unicode": "e6e4",
"unicode_decimal": 59108
},
{
"icon_id": "41114519",
"name": "check-circle-filled",
"font_class": "check-circle-filled",
"unicode": "e6e5",
"unicode_decimal": 59109
},
{
"icon_id": "41020181",
"name": "fly",
"font_class": "fly",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment