index.vue 9.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389
  1. <script lang="ts" setup>
  2. import { ref, onMounted, watch, reactive } from 'vue';
  3. import { ElMessage } from 'element-plus';
  4. interface Props {
  5. data: number[][];
  6. disabled: boolean;
  7. }
  8. const props = withDefaults(defineProps<Props>(), {
  9. disabled: false,
  10. });
  11. const bidData = ref(props.data);
  12. const mouseDown = ref(false);
  13. const startRowIndex = ref(0);
  14. const startColIndex = ref(0);
  15. const items = ref([]);
  16. const WeekMap = {
  17. 0: '星期一',
  18. 1: '星期二',
  19. 2: '星期三',
  20. 3: '星期四',
  21. 4: '星期五',
  22. 5: '星期六',
  23. 6: '星期日',
  24. };
  25. const dialogVisible = ref(false);
  26. const bid = ref(1.00);
  27. const selectedItems = ref({});
  28. const form = ref({
  29. bid: 1.00, // 将 bid 添加到 form 对象中
  30. });
  31. const rules = ref({
  32. bid: [
  33. { required: true, message: '请输入数值小于100的数值,可精确到小数点后2位', trigger: 'blur' },
  34. {
  35. validator: (rule, value, callback) => {
  36. if (Number(value) > 100) {
  37. return callback(new Error('请输入数值小于100的数值,可精确到小数点后2位'));
  38. }
  39. return callback();
  40. },
  41. trigger: 'blur'
  42. }
  43. ]
  44. });
  45. const formRef = ref(null);
  46. //根据 props.disabled 和 info.selected 来返回一个包含样式的对象,用于设置单元格的样式
  47. function getTdStyle(info: any) {
  48. if (props.disabled) {
  49. return {cursor: 'not-allowed', background: '#fff'};
  50. }
  51. return {background: info.selected ? '#ccdbff' : ''};
  52. }
  53. for (let i = 0; i < 7; i++) {
  54. selectedItems.value[i] = [];
  55. const tmp = [];
  56. for (let j = 0; j < 24; j++) {
  57. tmp.push({value: bidData.value.length === 0 ? 0 : bidData.value[i][j], selected: false});
  58. }
  59. items.value.push(tmp);
  60. }
  61. //在单元格上按下鼠标时触发的函数
  62. function handleMouseDown(rowIndex: number, colIndex: number, event: any) {
  63. if (props.disabled) return;
  64. if (event.button === 0) {
  65. clearCellBackgroundColor();
  66. mouseDown.value = true;
  67. startRowIndex.value = rowIndex;
  68. startColIndex.value = colIndex;
  69. items.value[rowIndex][colIndex].selected = true;
  70. selectedItems.value[rowIndex].push(colIndex);
  71. }
  72. }
  73. function handleMouseUp(event: any) {
  74. if (props.disabled) return;
  75. if (event.button === 0) {
  76. mouseDown.value = false;
  77. startColIndex.value = 0;
  78. startRowIndex.value = 0;
  79. dialogVisible.value = true;
  80. }
  81. }
  82. //在单元格上移动鼠标时触发的函数,用于选择多个单元格。
  83. function handleMouseMove(rowIndex: number, colIndex: number) {
  84. if (props.disabled) return;
  85. //if (info.selected) {
  86. // info.selected = false;
  87. //}
  88. if (mouseDown.value) {
  89. selectCell(rowIndex, colIndex);
  90. }
  91. }
  92. //选择多个单元格
  93. function selectCell(rowIndex: number, colIndex: number) {
  94. if (props.disabled) return;
  95. const rowStart = Math.min(startRowIndex.value, rowIndex);
  96. const rowEnd = Math.max(startRowIndex.value, rowIndex);
  97. const cellStart = Math.min(startColIndex.value, colIndex);
  98. const cellEnd = Math.max(startColIndex.value, colIndex);
  99. for (let i = rowStart; i <= rowEnd; i++) {
  100. for (let j = cellStart; j <= cellEnd; j++) {
  101. items.value[i][j].selected = true;
  102. selectedItems.value[i].push(j);
  103. }
  104. }
  105. }
  106. //提交出价,将选中的单元格的值设置为 bid,并清除选中状态和单元格背景色。
  107. function submitBid() {
  108. for (const row of Object.keys(selectedItems.value)) {
  109. for (const col of selectedItems.value[row]) {
  110. items.value[row][col].value = Number(form.value.bid);
  111. bidData.value[row][col] = Number(form.value.bid);
  112. }
  113. }
  114. clearSelectedItems();
  115. clearCellBackgroundColor();
  116. dialogVisible.value = false;
  117. }
  118. const submitForm = async (formEl: FormInstance | undefined) => {
  119. if (!formEl) return;
  120. await formEl.validate((valid, fields) => {
  121. if (valid) {
  122. submitBid();
  123. }
  124. });
  125. };
  126. const resetForm = (formEl: FormInstance | undefined) => {
  127. if (!formEl) return
  128. cancelBid()
  129. formEl.resetFields()
  130. }
  131. //取消出价
  132. function cancelBid() {
  133. clearSelectedItems();
  134. clearCellBackgroundColor();
  135. dialogVisible.value = false;
  136. }
  137. //清除所有单元格的背景色。
  138. function clearCellBackgroundColor() {
  139. for (const hoursList of items.value) {
  140. for (const info of hoursList) {
  141. info.selected = false;
  142. }
  143. }
  144. }
  145. function clearSelectedItems() {
  146. for (var i = 0; i < 7; i++) {
  147. selectedItems.value[i] = [];
  148. }
  149. }
  150. //重置所有单元格的出价为 1,并清除选中状态。
  151. function resetAllBid() {
  152. for (let i = 0; i < 7; i++) {
  153. for (let j = 0; j < 24; j++) {
  154. items.value[i][j].value = 1;
  155. items.value[i][j].selected = false;
  156. bidData.value[i][j] = 1; // TODO: 不知道是什么东西
  157. }
  158. }
  159. }
  160. function closeDialog(done: Function) {
  161. // console.log("closeDialog")
  162. cancelBid();
  163. done();
  164. }
  165. const applyBid = (timeRangeValue: string, scheduleValue: string, bidValue: number) => {
  166. const timeRangeMap = {
  167. 'Option1': {start: 0, end: 23},
  168. 'Option2': {start: 0, end: 6},
  169. 'Option3': {start: 7, end: 11},
  170. 'Option4': {start: 9, end: 16},
  171. 'Option5': {start: 12, end: 16},
  172. 'Option6': {start: 17, end: 20},
  173. 'Option7': {start: 21, end: 23},
  174. };
  175. const scheduleMap = {
  176. 'Option1': [0, 1, 2, 3, 4, 5, 6],
  177. 'Option2': [0, 1, 2, 3, 4],
  178. 'Option3': [5, 6],
  179. };
  180. const {start, end} = timeRangeMap[timeRangeValue];
  181. const days = scheduleMap[scheduleValue];
  182. days.forEach(day => {
  183. for (let hour = start; hour <= end; hour++) {
  184. items.value[day][hour].selected = true;
  185. items.value[day][hour].value = bidValue;
  186. bidData.value[day][hour] = bidValue;
  187. }
  188. });
  189. };
  190. defineExpose({
  191. applyBid,
  192. });
  193. watch(
  194. () => props.data,
  195. () => {
  196. if (props.data.length === 0) {
  197. for (let i = 0; i < 7; i++) {
  198. const tmp = [];
  199. for (let j = 0; j < 24; j++) {
  200. tmp.push(0);
  201. }
  202. props.data.push(tmp);
  203. }
  204. }
  205. for (let i = 0; i < 7; i++) {
  206. for (let j = 0; j < 24; j++) {
  207. items.value[i][j].value = props.data[i][j];
  208. }
  209. }
  210. bidData.value = props.data;
  211. },
  212. {immediate: true}
  213. );
  214. </script>
  215. <template>
  216. <div class="calendar">
  217. <table class="calendar-table calendar-table-hour">
  218. <thead class="calendar-head">
  219. <tr>
  220. <th class="week-td" rowspan="8">星期 / 时间</th>
  221. <th colspan="12">00:00 - 12:00</th>
  222. <th colspan="12">12:00 - 24:00</th>
  223. <th class="week-td" colspan="4" rowspan="2" style="display: none">小时</th>
  224. </tr>
  225. <tr>
  226. <th v-for="(_, i) in 24" :key="i" colspan="1">{{ i }}</th>
  227. </tr>
  228. </thead>
  229. <tbody>
  230. <template v-for="(hoursList, week) in items">
  231. <tr>
  232. <th>{{ WeekMap[week] }}</th>
  233. <td
  234. v-for="(info, hour) in hoursList"
  235. :key="hour"
  236. :style="getTdStyle(info)"
  237. @mousedown="handleMouseDown(week, hour, $event)"
  238. @mouseover="handleMouseMove(week, hour)"
  239. @mouseup="handleMouseUp">
  240. <span class="cell-text"> {{
  241. info.value || info.value == 0 ? Number(info.value).toFixed(2) : '0.00'
  242. }} </span>
  243. </td>
  244. </tr>
  245. </template>
  246. <tr>
  247. <th class="clear-bar" colspan="28">
  248. <span class="middle">可拖动鼠标选择时间段</span>
  249. <el-button :disabled="disabled" class="hover-link fr" link @click="resetAllBid">全部重置</el-button>
  250. </th>
  251. </tr>
  252. </tbody>
  253. </table>
  254. </div>
  255. <el-dialog v-model="dialogVisible" :before-close="closeDialog" :close-on-click-modal="false" title="修改出价系数"
  256. width="30%">
  257. <el-form ref="formRef" :model="form" :rules="rules" style="display: inline-block;">
  258. <el-form-item label="Bid" prop="bid" label-width="80px">
  259. <el-input
  260. v-model="form.bid"
  261. clearable
  262. oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')"
  263. placeholder="1.0"
  264. style="width: 150px;"
  265. ></el-input>
  266. </el-form-item>
  267. </el-form>
  268. <template #footer>
  269. <span class="dialog-footer">
  270. <el-button @click="resetForm(formRef)">取消</el-button>
  271. <el-button type="primary" @click="submitForm(formRef)">确认</el-button>
  272. </span>
  273. </template>
  274. </el-dialog>
  275. </template>
  276. <style lang="scss" scoped>
  277. .calendar {
  278. background-color: #fff;
  279. -webkit-user-select: none;
  280. position: relative;
  281. display: inline-block;
  282. .calendar-table {
  283. border-collapse: collapse;
  284. }
  285. .week-td {
  286. width: 90px;
  287. }
  288. }
  289. table {
  290. display: table;
  291. border-collapse: separate;
  292. box-sizing: border-box;
  293. text-indent: initial;
  294. border-spacing: 2px;
  295. border-color: gray;
  296. thead {
  297. display: table-header-group;
  298. vertical-align: middle;
  299. border-color: inherit;
  300. }
  301. tr {
  302. border: 1px solid #e0e5f4;
  303. font-size: 12px;
  304. text-align: center;
  305. line-height: 32px;
  306. color: rgba(0, 0, 0, 0.5);
  307. th {
  308. min-width: 40px;
  309. border: 1px solid #e0e5f4;
  310. font-size: 12px;
  311. text-align: center;
  312. line-height: 32px;
  313. background: #f7f8fa;
  314. }
  315. td {
  316. border: 1px solid #e0e5f4;
  317. font-size: 12px;
  318. text-align: center;
  319. line-height: 32px;
  320. min-width: 40px;
  321. &:hover {
  322. background: #ccdbff;
  323. cursor: pointer;
  324. }
  325. .cell-text {
  326. color: black;
  327. }
  328. }
  329. }
  330. }
  331. .clear-bar {
  332. line-height: 32px;
  333. padding: 0 12px;
  334. .hover-link {
  335. color: #1c6bde;
  336. font-size: 13px;
  337. margin-top: 7px;
  338. }
  339. .fr {
  340. float: right;
  341. }
  342. .middle {
  343. float: center;
  344. }
  345. }
  346. </style>