开发记录
添加搜索下拉框
filterable @change="onChangeProject"
onChangeProject(ev) {
this.projectNo = ev
},
Vue渲染表格时格式化日期
:formatter="formatDate"
formatDate(row, column) {
var date = row[column.property]
if (date == undefined) { return '' }
return this.$moment(date).format('YYYY-MM-DD')
},
后端格式化Dto
/// <summary> /// 问题所属阶段描述，由 ProblemStage 和 ProblemStageParent 两个字段构造而成 /// </summary> public string ProblemStageDesc { get { return string.IsNullOrWhiteSpace(ProblemStage) ? ProblemStageParent : $"{ProblemStageParent}-{ProblemStage}"; } } public string Day { get { //return CreationTime != null ? CreationTime.ToString("yyyy-MM-dd") : ""; return SubmitTime.HasValue ? SubmitTime.Value.ToString("yyyy-MM-dd") : ""; } set { SubmitTime = Convert.ToDateTime(value); } } public string ShowSeverity { get { switch (Severity) { case "1": Severity = "低"; break; case "2": Severity = "中"; break; case "3": Severity = "高"; break; } return Severity; } }
前端格式化后端数据，显示到前端界面
<view class="container-main-title-list"> <view> <text decode>{{ item.problemCode || '(未填写)' }} </text> <text decode>{{ item.customerName || '(未填写)' }} </text> <text decode style="display: inline-block;color: {{ item.severity === '1' ? '#07c160' : item.severity === '2' ? '#ff976a' : '#ee0a24' }};font-weight: bold;" >{{ item.severity === '1' ? '低' : item.severity === '2' ? '中' : '高' }}</text> <text decode> {{ item.projectLevel || '(未填写)' }} </text> <text decode>{{ item.problemCreater }}</text> <text decode> {{ item.creatorDepartmentName }}</text> </view>
小程序列表样式
.container-main { /* 主体内容 */ .container-main-title { width: 86vw; .container-main-title-list { display: flex; align-items: center; justify-content: space-between; font-size: handleSize($font-size-l); color: $font-color-grey; & > view:first-child { // width: 80%; // width: 80vw; white-space: nowrap; //所有的文本都显示在这一行 overflow: hidden; //超过指定的宽度和高度也隐藏 text-overflow: ellipsis; //多余的文本用省略号显示 //display: inline-block;//块级元素显示在这一行，不换行，其他块级元素也可以显示在这一行 } } .container-main-title-text { // display: flex; // justify-content: flex-start; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: $font-color-grey-ww; } } .container-main-content { padding: 0 10rpx; .container-main-content-item { display: flex; align-items: center; /* justify-content: space-between; */ & > text:first-child { width: handleSize(170vmin); } & > text:last-child { color: $font-color-grey; width: 70vw; } } } }
小程序列表骨架
<!-- 主体内容 --> <view class="container-main"> <van-collapse value="{{ activeNames }}" bind:change="collapseToggle"> <block wx:for="{{ problemObj.data }}" wx:key="id"> <van-collapse-item name="{{ index }}"> <!-- 缩略内容 --> <view slot="title" class="container-main-title"> <view class="container-main-title-list"> <view> <text decode>{{ item.problemCode || '(未填写)' }} </text> <text decode>{{ item.customerName || '(未填写)' }} </text> <text decode style="display: inline-block;color: {{ item.severity === '1' ? '#07c160' : item.severity === '2' ? '#ff976a' : '#ee0a24' }};font-weight: bold;" >{{ item.severity === '1' ? '低' : item.severity === '2' ? '中' : '高' }}</text> <text decode> {{ item.projectLevel || '(未填写)' }} </text> <text decode>{{ item.problemCreater }}</text> <text decode> {{ item.creatorDepartmentName }}</text> </view> <!-- 我的待办 | 我跟进问题 --> <block wx:if="{{ entry === '0' || entry === '3' }}"> <van-button data-id="{{ item.id }}" data-status="{{ item.status }}" color="#81befc" size="mini" catch:tap="toHandle" plain >处理</van-button> <van-button wx:if="{{ item.status === '草稿' || item.status === '驳回' }}" data-id="{{ item.id }}" data-status="{{ item.status }}" color="#81befc" size="mini" style="margin-left: 5rpx;" catch:tap="deleteDraft" plain >删除</van-button> </block> <!-- 我的关注 --> <block wx:if="{{ entry === '5' }}"> <van-button data-id="{{ item.id }}" color="#81befc" size="mini" catch:tap="cancelFocus" style="margin-right: 5rpx;" plain >取消关注</van-button> <van-button data-id="{{ item.id }}" data-status="{{ item.status }}" color="#81befc" size="mini" catch:tap="toHandle" plain >处理</van-button> </block> </view> <view class="container-main-title-text"> <text decode>{{ item.problemTitle || '(未填写)' }}</text> </view> </view> <!-- 展开内容 --> <view class="container-main-content"> <view class="container-main-content-item"> <text>编号:</text> <text>{{ item.problemCode }}</text> </view> <van-divider dashed /> <view class="container-main-content-item"> <text>项目名称:</text> <text>{{ item.projectName }}</text> </view> <van-divider dashed /> <view class="container-main-content-item"> <text>问题机型:</text> <text>{{ item.equipmentTypeName }}</text> </view> <van-divider dashed /> <view class="container-main-content-item"> <text>问题阶段:</text> <text>{{ item.problemStageDesc }}</text> </view> <van-divider dashed /> <view class="container-main-content-item"> <text>当前节点:</text> <text catch:tap="toHandle" data-id="{{ item.id }}" data-status="{{ item.status }}" style="color: #81befc;font-weight:bolder">{{ item.nodes[0].nodeName }} ⇲</text> </view> <van-divider dashed /> <view class="container-main-content-item"> <text>创建时间:</text> <text>{{ item.day }}</text> </view> <van-divider dashed /> <view class="container-main-content-item"> <text>严重程度:</text> <text>{{ item.severity === '1' ? '低' : item.severity === '2' ? '中' : '高' }}</text> </view> <van-divider dashed /> <view class="container-main-content-item"> <text>创建人:</text> <text>{{ item.problemCreater }}</text> </view> <van-divider dashed /> <view class="container-main-content-item"> <text>创建人部门:</text> <text>{{ item.creatorDepartmentName }}</text> </view> <van-divider dashed /> <view class="container-main-content-item"> <text>当前处理人:</text> <text>{{ item.problemHandler }}</text> </view> <van-divider dashed /> <view class="container-main-content-item"> <text>问题描述:</text> <text>{{ item.description }}</text> </view> <van-divider dashed /> </view> </van-collapse-item> </block> </van-collapse> </view> </block> <van-empty wx:else description="无数据" /> </view>
效果
Timeline 时间线 el-timeline
<el-table-column type="expand" width="80px" label="流程信息"> <template slot-scope="props"> <el-timeline :reverse="true"> <el-timeline-item v-for="(node, index) in props.row.nodes" :key="index" :timestamp="node.day"> <span v-if="node.isSubmit" style="color:#008000">{{ node.problemHandler }}{{ '('+ node.status +')'+' '+node.nodeName }},{{ node.desc }}</span> <span v-if="!node.isSubmit" style="color:#ff9933">{{ node.problemHandler }}{{ '('+ node.status +')' +' '+node.nodeName }},{{ node.desc }}</span> </el-timeline-item> </el-timeline> </template> </el-table-column>
小程序 下拉触底监听事件
滚动刷新
onReachBottom() {
if (this.data.problemObj.isDone) return;
const PageIndex: number = this.data.problemObj.params.PageIndex;
const PageSize: number = this.data.problemObj.params.PageSize;
const totalCount: number = this.data.problemObj.totalCount;
if (PageIndex >= totalCount / PageSize) {
wx.showToast({ title: '数据已加载完毕', icon: 'none' });
this.setData({ 'problemObj.isDone': true });
return;
}
this.setData({ 'problemObj.params.PageIndex': ++this.data.problemObj.params.PageIndex });
this.getProblemPageList();
},
C#变量类型后面加?是什么意思
表示可空，int? 相当于 Nullable<int>
Guid? 相当于 Nullable<Guid>
比如：int本来是一个值类型，不可以赋予空值，但这样一个问号，就是使得num成为一个可空类型，你后面这样写也是可以的了：num = null
值类型是没有null值的，比如int，DateTime，它们都有默认值。举个例子，在访问数据库时，会存在一定的问题，Person类有字段Age（int类型），Birthday（DateTime），如果没有给它们赋值，我们期望的是向数据库插入时，应该是null，而不是0和0001-01-01；同样从数据库取值时也是如此，如果数据值为null，我们也希望Age和Birthday的值能反应出来，如果不使用int?和DateTime?就做不到。
后端格式化日期
/// <summary> /// 创建时间 /// </summary> public DateTime? CreationTime { get; set; } /// <summary> /// 创建时间 /// </summary> public string CreationTimeStr { get { return CreationTime.HasValue ? CreationTime.Value.ToDateTimeString("yyyy-MM-dd HH:mm") : ""; } }
前端post提交数组 后端拼接为字符串
CurHandlerDepartment = input.CurHandlerDepartment.Count > 0 ? string.Join(",", input.CurHandlerDepartment) : "",
事务
using (var uow = _unitOfWork.Begin()) { try { await uow.SaveChangesAsync(); await uow.CompleteAsync(); } catch (Exception e) { await uow.RollbackAsync(); } }
浙公网安备 33010602011771号