|
|
@@ -0,0 +1,383 @@
|
|
|
+<template>
|
|
|
+ <div class="flex-main table-fix-head">
|
|
|
+ <table>
|
|
|
+ <thead>
|
|
|
+ <tr height="40px">
|
|
|
+ <th
|
|
|
+ width="30px" class="text-center" :class="{ 'mulitiple-select': multipleSelect }"
|
|
|
+ @click.self="changeSelectMode"
|
|
|
+ >
|
|
|
+ <input v-model="isSelectAll" autocomplete="off" type="checkbox" />
|
|
|
+ </th>
|
|
|
+
|
|
|
+ <th width="80px">综合排序</th>
|
|
|
+ <th width="80px">购置日期</th>
|
|
|
+ <th width="100px">财务入账日期</th>
|
|
|
+ <th width="60px">数量</th>
|
|
|
+ <th width="60px">价格</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ </table>
|
|
|
+
|
|
|
+ <div>
|
|
|
+ <a-row :gutter="24">
|
|
|
+ <a-col
|
|
|
+ v-for="(item1, index) in infoWindowDataInstance.dataList" :key="'tr' + item1.id" :span="6" height="40px"
|
|
|
+ :class="{ warning: item1.select }" @dblclick="selectNode(item1)"
|
|
|
+ >
|
|
|
+ <a-card hoverable :body-style="{padding: '1rem'}">
|
|
|
+ <template #cover>
|
|
|
+ <a-flex gap="0" vertical>
|
|
|
+ <div>
|
|
|
+ <div style="position: relative; height: 120px;">
|
|
|
+ <div
|
|
|
+ style="position: absolute; top:0px; left: 10px; z-index: 1;"
|
|
|
+ >
|
|
|
+ <span>
|
|
|
+ {{
|
|
|
+ index +
|
|
|
+ 1 +
|
|
|
+ (pagination.current_page - 1) * pagination.per_page
|
|
|
+ }}
|
|
|
+
|
|
|
+
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ style="position: absolute; top:1px; left: 25px; z-index: 1;"
|
|
|
+ >
|
|
|
+ <input
|
|
|
+ autocomplete="off" type="checkbox" :checked="item1.select"
|
|
|
+ style="padding-left: 10px;"
|
|
|
+ @click.self="selectNodeForSearch(item1)"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div style="position: absolute; top:0px;">
|
|
|
+ <img
|
|
|
+ style="width: 100%;"
|
|
|
+ alt="example"
|
|
|
+ src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
|
|
|
+
|
|
|
+ @click="selectNodeForSearch(item1)"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="padding: 0 1rem;">
|
|
|
+ 资产名称
|
|
|
+ </div>
|
|
|
+ <div style="padding: 0 1rem;">
|
|
|
+ 资产描述
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <a-flex horizontal style="border: 1px solid #ebebe9;">
|
|
|
+ <div style="width: 50%; text-align: center; border-right: 1px solid #ebebe9;">¥14300</div>
|
|
|
+ <div style="width: 50%; text-align: center;">数量：1</div>
|
|
|
+ </a-flex>
|
|
|
+ </a-flex>
|
|
|
+ </template>
|
|
|
+ <template #actions>
|
|
|
+ <div>
|
|
|
+ <a-tag color="pink">账</a-tag>
|
|
|
+ <a-tag color="red">固</a-tag>
|
|
|
+ <a-tag color="orange">主</a-tag>
|
|
|
+ <a-tag color="green">无</a-tag>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <a-flex gap="0" vertical>
|
|
|
+ <a-flex horizontal gap="5">
|
|
|
+ <div style="width: 40%">购置日期</div>
|
|
|
+ <div style="width: 60%">xxx</div>
|
|
|
+ </a-flex>
|
|
|
+ <a-flex horizontal gap="5">
|
|
|
+ <div style="width: 40%">财务入账</div>
|
|
|
+ <div style="width: 60%">xxx</div>
|
|
|
+ </a-flex>
|
|
|
+ <a-flex horizontal gap="5">
|
|
|
+ <div style="width: 40%">使用人</div>
|
|
|
+ <div style="width: 60%">xxx</div>
|
|
|
+ </a-flex>
|
|
|
+ <a-flex horizontal gap="5">
|
|
|
+ <div style="width: 40%">使用状态</div>
|
|
|
+ <div style="width: 60%">xxx</div>
|
|
|
+ </a-flex>
|
|
|
+ </a-flex>
|
|
|
+ </a-card>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+
|
|
|
+<script>
|
|
|
+
|
|
|
+import Context from './Context.js';
|
|
|
+import JsUtil from '../../common/JsUtil.js';
|
|
|
+import Language from '../../common/Language.js';
|
|
|
+
|
|
|
+import Notify from '../../common/Notify.js';
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'QueryPageDashboard',
|
|
|
+
|
|
|
+ components: {
|
|
|
+ },
|
|
|
+
|
|
|
+ props: {
|
|
|
+ callOutJsUrl: {
|
|
|
+ type: String,
|
|
|
+ default() {
|
|
|
+ return null;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ infoWindowDataInstance: {
|
|
|
+ type: Object,
|
|
|
+ default() {
|
|
|
+ return {};
|
|
|
+ },
|
|
|
+ },
|
|
|
+ pagination: {
|
|
|
+ type: Object,
|
|
|
+ default() {
|
|
|
+ return {};
|
|
|
+ },
|
|
|
+ },
|
|
|
+ infoGridFieldsInstance: {
|
|
|
+ type: Object,
|
|
|
+ default() {
|
|
|
+ return {};
|
|
|
+ },
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 是否多选
|
|
|
+ */
|
|
|
+ multiple: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 排序对象实例
|
|
|
+ */
|
|
|
+ sortInstance: {
|
|
|
+ type: Object,
|
|
|
+ default() {
|
|
|
+ return {};
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+
|
|
|
+ emits: ['dataSelected', 'deleteSelected'],
|
|
|
+ data: function () {
|
|
|
+ this.Language = Language;
|
|
|
+ return {
|
|
|
+ isSelectAll: false,
|
|
|
+ multipleSelect: false,
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ computed: {
|
|
|
+ operateButtons: function () {
|
|
|
+ let buttons = [];
|
|
|
+ this.infoGridFieldsInstance.infoGridFields.forEach(item => {
|
|
|
+ if (item.simpleDisplayType == 'OperateButton') {
|
|
|
+ buttons.push(item);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return buttons;
|
|
|
+ },
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ watch: {
|
|
|
+ /**
|
|
|
+ * 是否选择了全部的数据
|
|
|
+ */
|
|
|
+ isSelectAll: function (val) {
|
|
|
+ var _self = this;
|
|
|
+ if (_self.multipleSelect) {
|
|
|
+ if (_self.isSelectAll) {
|
|
|
+ if (val) {
|
|
|
+ _self.infoWindowDataInstance.setAllSelect();
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ _self.infoWindowDataInstance.setAllUnSelect();
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ _self.isSelectAll = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ multiple: {
|
|
|
+ handler: function (newValue, oldValue) {
|
|
|
+ this.multipleSelect = newValue;
|
|
|
+ },
|
|
|
+ immediate: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ getContext: Context,
|
|
|
+
|
|
|
+ executeCallout: function (rowData, filedItem) {
|
|
|
+ let _self = this;
|
|
|
+
|
|
|
+ const methodName = filedItem.callOutJsMethod;
|
|
|
+
|
|
|
+ const callOutJsUrl = this.infoWindowDto.callOutJsUrl;
|
|
|
+
|
|
|
+ let functionName = methodName.replace('.', '_') + '_calloutjs';
|
|
|
+
|
|
|
+ let executeFunction = function () {
|
|
|
+
|
|
|
+ let context = new _self.getContext(rowData, {});
|
|
|
+ try {
|
|
|
+ _self[functionName](context);
|
|
|
+ } catch (e) {
|
|
|
+ console.error(e);
|
|
|
+ Notify.error('数据字典定义异常', ` 【 ${methodName} 】前端列显示逻辑定义异常,请联系管理员检查数据字典的定义。`, false);
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ if (_self[functionName] == null) {
|
|
|
+ // 执行服务端的脚本
|
|
|
+ const jsUrl = callOutJsUrl;
|
|
|
+ if (jsUrl == null || jsUrl == undefined) {
|
|
|
+ Notify.error('数据字典定义异常', `【 ${methodName} 】Callout前端逻辑的JS文件不存在,请联系管理员检查数据字典是否JS文件。`, false);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let promise = JsUtil.dynamicLoadJsFunction(jsUrl, methodName);
|
|
|
+ promise.then(targetFunction => {
|
|
|
+ if (targetFunction == null) {
|
|
|
+ Notify.error('数据字典定义异常', `【 ${methodName} 】Callout前端逻辑定义异常,请联系管理员检查数据字典的定义。`, false);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ _self[functionName] = targetFunction;
|
|
|
+ executeFunction();
|
|
|
+
|
|
|
+ }, errorData => {
|
|
|
+ console.error(errorData);
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ executeFunction();
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 切换全选/单选
|
|
|
+ */
|
|
|
+ changeSelectMode: function () {
|
|
|
+ this.multipleSelect = !this.multipleSelect;
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 选择/取消选择表格行中的复选框事件
|
|
|
+ */
|
|
|
+ selectNodeForSearch: function (modelData) {
|
|
|
+ var _self = this;
|
|
|
+
|
|
|
+ var currentStatus = modelData.select;
|
|
|
+ if (!_self.multipleSelect) {
|
|
|
+ _self.infoWindowDataInstance.setAllUnSelect();
|
|
|
+ }
|
|
|
+
|
|
|
+ _self.infoWindowDataInstance.selectSelectState(modelData, !currentStatus);
|
|
|
+
|
|
|
+ if (modelData.select === true) {
|
|
|
+ _self.$emit('dataSelected', modelData);
|
|
|
+ } else {
|
|
|
+ _self.$emit('deleteSelected', modelData);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 双击表格行事件
|
|
|
+ */
|
|
|
+ selectNode: function (modelData) {
|
|
|
+ this.$emit('dataSelected', modelData);
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.flex-main {
|
|
|
+ overflow: scroll;
|
|
|
+ flex: 1;
|
|
|
+ margin-bottom: 0px;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.fixed-table {
|
|
|
+ table-layout: fixed;
|
|
|
+}
|
|
|
+
|
|
|
+table.fixed-table tr th {
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+table.fixed-table td {
|
|
|
+ text-align: center;
|
|
|
+ word-wrap: break-word;
|
|
|
+ word-break: normal;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+table.fixed-table th {
|
|
|
+ position: relative;
|
|
|
+ min-width: 25px;
|
|
|
+}
|
|
|
+
|
|
|
+table.fixed-table th,
|
|
|
+table.fixed-table td {
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ border-right: 1px solid rgba(0, 0, 0, 0.05);
|
|
|
+}
|
|
|
+
|
|
|
+table.fixed-table th {
|
|
|
+ min-width: 10px;
|
|
|
+ background-color: #f8f8f8;
|
|
|
+}
|
|
|
+
|
|
|
+table.fixed-table th .rz-handle {
|
|
|
+ width: 10px;
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ background: repeating-linear-gradient(45deg,
|
|
|
+ transparent,
|
|
|
+ transparent 2px,
|
|
|
+ rgba(0, 0, 0, 0.05) 2px,
|
|
|
+ rgba(0, 0, 0, 0.05) 4px);
|
|
|
+ cursor: ew-resize !important;
|
|
|
+}
|
|
|
+
|
|
|
+table.fixed-table th .rz-handle.rz-handle-active {
|
|
|
+ border-right: 2px solid #000;
|
|
|
+ transform: scaleX(100);
|
|
|
+ background: rgba(0, 0, 0, 0.05) 2px;
|
|
|
+}
|
|
|
+
|
|
|
+.rz-handle:hover {
|
|
|
+ background: rgba(0, 0, 0, 0.2) 4px;
|
|
|
+}
|
|
|
+</style>
|
