优化商品模块

优化商品模块

<template>
  <a-modal
    :title="title"
    :width="1200"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
    wrapClassName="ant-modal-cust-warp"
    style="top:5%;height: 100%;overflow-y: hidden">
    <template slot="footer">
      <a-button key="back" v-if="isReadOnly" @click="handleCancel">
        关闭
      </a-button>
    </template>
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-tabs default-active-key="1">
          <a-tab-pane key="1" tab="基本信息" forceRender>
            <a-row class="form-row" :gutter="24">
              <a-col :lg="8" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="名称">
                  <a-input placeholder="请输入名称" v-decorator.trim="[ 'name', validatorRules.name]" />
                </a-form-item>
              </a-col>
              <a-col :lg="8" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="规格">
                  <a-input placeholder="请输入规格" v-decorator.trim="[ 'standard' ]" />
                </a-form-item>
              </a-col>
              <a-col :lg="8" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单位">
                  <a-row class="form-row" :gutter="24">
                    <a-col :lg="13" :md="13" :sm="24">
                      <a-input placeholder="输入单位" :hidden="unitStatus" v-decorator.trim="[ 'unit' ]" @change="onlyUnitOnChange" />
                      <a-select :value="unitList" placeholder="选择单位" v-decorator="[ 'unitId' ]" @change="manyUnitOnChange"
                                :hidden="manyUnitStatus" :dropdownMatchSelectWidth="false">
                        <a-select-option v-for="(item,index) in unitList"
                          :key="index" :value="item.id">
                          {{ item.name }}
                        </a-select-option>
                      </a-select>
                    </a-col>
                    <a-col :lg="11" :md="11" :sm="24">
                      <a-checkbox :checked="unitChecked" @change="unitOnChange">多单位</a-checkbox>
                    </a-col>
                  </a-row>
                </a-form-item>
              </a-col>
              <a-col :lg="8" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="型号">
                  <a-input placeholder="请输入型号" v-decorator.trim="[ 'model' ]" />
                </a-form-item>
              </a-col>
              <a-col :lg="8" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="颜色">
                  <a-input placeholder="请输入颜色" v-decorator.trim="[ 'color' ]" />
                </a-form-item>
              </a-col>
              <a-col :lg="8" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="类别">
                  <a-tree-select style="width:100%" :dropdownStyle="{maxHeight:'200px',overflow:'auto'}" allow-clear
                   :treeData="categoryTree" v-decorator="[ 'categoryId' ]" placeholder="请选择类别">
                  </a-tree-select>
                </a-form-item>
              </a-col>
              <a-col :lg="8" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="序列号">
                  <a-select placeholder="有无序列号" v-decorator="[ 'enableSerialNumber' ]">
                    <a-select-option value="1">有</a-select-option>
                    <a-select-option value="0">无</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :lg="8" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="安全存量">
                  <a-input placeholder="请输入安全存量" v-decorator.trim="[ 'safetyStock' ]" />
                </a-form-item>
              </a-col>
              <a-col :lg="8" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="多属性">
                  <a-switch checked-children="启用" un-checked-children="关闭" v-model="skuSwitch" @change="onSkuChange"></a-switch>
                </a-form-item>
              </a-col>
            </a-row>
            <a-card v-if="skuSwitch">
              <a-row class="form-row" :gutter="24">
                <a-col :lg="8" :md="12" :sm="24">
                  <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="sku.manyColor">
                    <a-select mode="multiple" v-decorator="[ 'manyColor' ]" showSearch optionFilterProp="children">
                      <a-select-option v-for="(item,index) in sku.manyColorList" :key="index" :value="item.value">
                        {{ item.name }}
                      </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :lg="8" :md="12" :sm="24">
                  <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="sku.manySize">
                    <a-select mode="multiple" v-decorator="[ 'manySize' ]" showSearch optionFilterProp="children">
                      <a-select-option v-for="(item,index) in sku.manySizeList" :key="index" :value="item.value">
                        {{ item.name }}
                      </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :lg="8" :md="12" :sm="24">
                  <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="sku.other1">
                    <a-select mode="multiple" v-decorator="[ 'other1' ]" showSearch optionFilterProp="children">
                      <a-select-option v-for="(item,index) in sku.other1List" :key="index" :value="item.value">
                        {{ item.name }}
                      </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row class="form-row" :gutter="24">
                <a-col :lg="8" :md="12" :sm="24">
                  <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="sku.other2">
                    <a-select mode="multiple" v-decorator="[ 'other2' ]" showSearch optionFilterProp="children">
                      <a-select-option v-for="(item,index) in sku.other2List" :key="index" :value="item.value">
                        {{ item.name }}
                      </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :lg="8" :md="12" :sm="24">
                  <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="sku.other3">
                    <a-select mode="multiple" v-decorator="[ 'other3' ]" showSearch optionFilterProp="children">
                      <a-select-option v-for="(item,index) in sku.other3List" :key="index" :value="item.value">
                        {{ item.name }}
                      </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :lg="8" :md="12" :sm="24">
                  <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="生成条码">
                    <a-switch v-model="barCodeSwitch" @change="onBarCodeChange"></a-switch>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-card>
            <div style="margin-top:8px;">
              <j-editable-table
                ref="editableMeTable"
                :loading="meTable.loading"
                :columns="meTable.columns"
                :dataSource="meTable.dataSource"
                :maxHeight="300"
                :rowNumber="true"
                :rowSelection="true"
                :actionButton="true"
                @added="onAdded">
                <template #buttonAfter>
                  <a-button @click="batchSet('purchase')">采购价-批量</a-button>
                  <a-button style="margin-left: 8px" @click="batchSet('commodity')">零售价-批量</a-button>
                  <a-button style="margin-left: 8px" @click="batchSet('wholesale')">销售价-批量</a-button>
                  <a-button style="margin-left: 8px" @click="batchSet('low')">最低售价-批量</a-button>
                </template>
              </j-editable-table>
              <!-- 表单区域 -->
              <batch-set-price-modal ref="modalForm" @ok="batchSetPricemodalFormOk"></batch-set-price-modal>
            </div>
            <a-row class="form-row" :gutter="24">
              <a-col :lg="24" :md="24" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="{xs: { span: 24 },sm: { span: 24 }}" label="">
                  <a-textarea :rows="2" placeholder="请输入备注" v-decorator="[ 'remark' ]" style="margin-top:8px;"/>
                </a-form-item>
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane key="2" tab="扩展信息" forceRender>
            <a-row v-if="mpShort.mfrs.enabled" class="form-row" :gutter="24">
              <a-col :lg="8" :md="8" :sm="8">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="mpShort.mfrs.name">
                  <a-input v-decorator.trim="[ 'mfrs' ]" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row v-if="mpShort.otherField1.enabled" class="form-row" :gutter="24">
              <a-col :lg="8" :md="8" :sm="8">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="mpShort.otherField1.name">
                  <a-input v-decorator.trim="[ 'otherField1' ]" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row v-if="mpShort.otherField2.enabled" class="form-row" :gutter="24">
              <a-col :lg="8" :md="8" :sm="8">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="mpShort.otherField2.name">
                  <a-input v-decorator.trim="[ 'otherField2' ]" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row v-if="mpShort.otherField3.enabled" class="form-row" :gutter="24">
              <a-col :lg="8" :md="8" :sm="8">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="mpShort.otherField3.name">
                  <a-input v-decorator.trim="[ 'otherField3' ]" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane key="3" tab="初始库存" forceRender>
            <j-editable-table
              ref="editableDepotTable"
              :loading="depotTable.loading"
              :columns="depotTable.columns"
              :dataSource="depotTable.dataSource"
              :maxHeight="300"
              :rowNumber="true"
              :rowSelection="false"
              :actionButton="false"/>
          </a-tab-pane>
          <a-tab-pane key="4" tab="图片信息" forceRender>
            <a-row class="form-row" :gutter="24">
              <a-col :lg="12" :md="12" :sm="24">
                <a-form-item :labelCol="{xs: { span: 24 },sm: { span: 4 }}" :wrapperCol="{xs: { span: 24 },sm: { span: 20 }}" label="图片信息">
                  <j-image-upload v-model="fileList" bizPath="material" text="上传" isMultiple></j-image-upload>
                </a-form-item>
              </a-col>
              <a-col :lg="12" :md="12" :sm="24"></a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>
      </a-form>
    </a-spin>
  </a-modal>
</template>
<script>
  import pick from 'lodash.pick'
  import BatchSetPriceModal from './BatchSetPriceModal'
  import JEditableTable from '@/components/jeecg/JEditableTable'
  import { FormTypes, VALIDATE_NO_PASSED, getRefPromise, validateFormAndTables } from '@/utils/JEditableTableUtil'
  import {queryMaterialCategoryTreeList,checkMaterial,checkMaterialBarCode,getAllMaterialAttribute,getMaxBarCode} from '@/api/api'
  import { httpAction, getAction } from '@/api/manage'
  import JImageUpload from '@/components/jeecg/JImageUpload'
  import JDate from '@/components/jeecg/JDate'
  import Vue from 'vue'
  export default {
    name: "MaterialModal",
    components: {
      BatchSetPriceModal,
      JImageUpload,
      JDate,
      JEditableTable
    },
    data () {
      return {
        title:"操作",
        visible: false,
        categoryTree: [],
        unitList: [],
        depotList: [],
        fileList:[],
        unitStatus: false,
        manyUnitStatus: true,
        unitChecked: false,
        skuSwitch: false, //sku开启状态
        barCodeSwitch: false, //生成条码开关
        maxBarCodeInfo: '', //最大条码
        sku: {
          manyColor: '多颜色',
          manySize: '多尺寸',
          other1: '自定义1',
          other2: '自定义2',
          other3: '自定义3',
          manyColorList: [],
          manySizeList: [],
          other1List: [],
          other2List: [],
          other3List: [],
        },
        model: {},
        isReadOnly: false,
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        mpShort: {
          mfrs: {},
          otherField1: {},
          otherField2: {},
          otherField3: {}
        },
        meTable: {
          loading: false,
          dataSource: [],
          columns: [
            {
              title: '条码', key: 'barCode', width: '20%', type: FormTypes.input, defaultValue: '', placeholder: '请输入${title}',
              validateRules: [{ required: true, message: '${title}不能为空' },
                { pattern: /^[1-9]\d*$/, message: '请输入零以上的正整数' },
                { pattern: /^\d{4,13}$/, message: '4到13位数字' },
                { handler: this.validateBarCode}]
            },
            {
              title: '单位', key: 'commodityUnit', width: '10%', type: FormTypes.input, defaultValue: '', placeholder: '请输入${title}',
              validateRules: [{ required: true, message: '${title}不能为空' }]
            },
            {
              title: '多属性', key: 'sku', width: '12%', type: FormTypes.input, defaultValue: '', readonly:true, placeholder: '点击生成条码赋值'
            },
            {
              title: '采购价', key: 'purchaseDecimal', width: '12%', type: FormTypes.input, defaultValue: '', placeholder: '请输入${title}'
            },
            {
              title: '零售价', key: 'commodityDecimal', width: '12%', type: FormTypes.input, defaultValue: '', placeholder: '请输入${title}'
            },
            {
              title: '销售价', key: 'wholesaleDecimal', width: '12%', type: FormTypes.input, defaultValue: '', placeholder: '请输入${title}'
            },
            {
              title: '最低售价', key: 'lowDecimal', width: '12%', type: FormTypes.input, defaultValue: '', placeholder: '请输入${title}'
            }
          ]
        },
        depotTable: {
          loading: false,
          dataSource: [],
          columns: [
            {
              title: '仓库', key: 'name', width: '15%', type: FormTypes.normal
            },
            {
              title: '库存数量', key: 'initStock', width: '15%', type: FormTypes.input, defaultValue: '', placeholder: '请输入${title}'
            }
          ]
        },
        confirmLoading: false,
        form: this.$form.createForm(this),
        validatorRules:{
          name:{
            rules: [
              { required: true, message: '请输入名称!' },
              { min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur' }
            ]
          },
          unit:{
            rules: [
              { required: true, message: '请输入单位!' }
            ]
          }
        },
        url: {
          add: '/material/add',
          edit: '/material/update',
          materialsExtendList: '/materialsExtend/getDetailList',
          depotWithStock: '/depot/getAllListWithStock'
        }
      }
    },
    created () {
      this.maxBarCodeAction();
      this.loadTreeData();
      this.loadUnitListData();
      this.loadParseMaterialProperty();
    },
    methods: {
      // 获取所有的editableTable实例
      getAllTable() {
        return Promise.all([
          getRefPromise(this, 'editableMeTable'),
          getRefPromise(this, 'editableDepotTable')
        ])
      },
      add () {
        //隐藏多属性
        this.meTable.columns[2].type = FormTypes.hidden
        // 默认新增一条数据
        this.getAllTable().then(editableTables => {
          editableTables[0].add()
        })
        this.edit({});
      },
      edit (record) {
        this.form.resetFields();
        this.model = Object.assign({}, record);
        this.activeKey = '1'
        this.skuSwitch = false
        this.barCodeSwitch = false
        this.visible = true;
        if(JSON.stringify(record) === '{}') {
          this.fileList = []
        } else {
          setTimeout(() => {
            this.fileList = record.imgName
          }, 5)
        }
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model, 'name', 'standard', 'unit', 'unitId', 'model', 'color',
            'categoryId','enableSerialNumber','safetyStock','remark','mfrs','otherField1','otherField2','otherField3'))
        });
        this.initMaterialAttribute()
        // 加载子表数据
        if (this.model.id) {
          // 判断是否是多单位
          if(this.model.unit){
            this.unitChecked = false
            this.unitStatus = false
            this.manyUnitStatus = true
          } else {
            this.unitChecked = true
            this.unitStatus = true
            this.manyUnitStatus = false
          }
          let params = { materialId: this.model.id }
          this.requestMeTableData(this.url.materialsExtendList, params, this.meTable)
          this.requestDepotTableData(this.url.depotWithStock, { mId: this.model.id }, this.depotTable)
        } else {
          this.requestDepotTableData(this.url.depotWithStock, { mId: 0 }, this.depotTable)
        }
      },
      /** 查询条码tab的数据 */
      requestMeTableData(url, params, tab) {
        tab.loading = true
        getAction(url, params).then(res => {
          for (let i = 0; i < res.data.rows.length; i++) {
            if(res.data.rows[i].sku) {
              this.meTable.columns[2].type = FormTypes.input
            } else {
              this.meTable.columns[2].type = FormTypes.hidden
            }
          }
          tab.dataSource = res.data.rows || []
        }).finally(() => {
          tab.loading = false
        })
      },
      /** 查询仓库tab的数据 */
      requestDepotTableData(url, params, tab) {
        tab.loading = true
        getAction(url, params).then(res => {
          tab.dataSource = res.data || []
        }).finally(() => {
          tab.loading = false
        })
      },
      close () {
        this.$emit('close');
        this.visible = false
        this.unitStatus = false
        this.manyUnitStatus = true
        this.unitChecked = false
        this.getAllTable().then(editableTables => {
          editableTables[0].initialize()
          editableTables[1].initialize()
        })
      },
      handleOk () {
        this.validateFields()
      },
      handleCancel () {
        this.close()
      },
      /** 触发表单验证 */
      validateFields() {
        this.getAllTable().then(tables => {
          /** 一次性验证主表和所有的次表 */
          return validateFormAndTables(this.form, tables)
        }).then(allValues => {
          let formData = this.classifyIntoFormData(allValues)
          formData.sortList = [];
          if(formData.unit === undefined) {formData.unit = ''}
          if(formData.unitId === undefined) {formData.unitId = ''}
          if(this.unitChecked) {formData.unit = ''} else {formData.unitId = ''}
          // 发起请求
          return this.requestAddOrEdit(formData)
        }).catch(e => {
          if (e.error === VALIDATE_NO_PASSED) {
            // 如果有未通过表单验证的子表，就自动跳转到它所在的tab
            this.activeKey = e.index == null ? this.activeKey : (e.index + 1).toString()
          } else {
            console.error(e)
          }
        })
      },
      /** 整理成formData */
      classifyIntoFormData(allValues) {
        let materialMain = Object.assign(this.model, allValues.formValue)
        return {
          ...materialMain, // 展开
          meList: allValues.tablesValue[0].values,
          stock: allValues.tablesValue[1].values,
        }
      },

      /** 发起新增或修改的请求 */
      requestAddOrEdit(formData) {
        if(formData.unit === '' && formData.unitId === '') {
          this.$message.warning('抱歉，单位为必填项！');
          return;
        }
        if(formData.meList.length === 0) {
          this.$message.warning('抱歉，请输入条码信息！');
          return;
        }
        //校验商品是否存在，通过校验商品的名称、型号、规格、颜色、单位、制造商等
        let param = {
          id: this.model.id?this.model.id:0,
          name: this.model.name,
          model: this.parseParam(this.model.model),
          color: this.parseParam(this.model.color),
          standard: this.parseParam(this.model.standard),
          mfrs: this.parseParam(this.model.mfrs),
          otherField1: this.parseParam(this.model.otherField1),
          otherField2: this.parseParam(this.model.otherField2),
          otherField3: this.parseParam(this.model.otherField3),
          unit: this.parseParam(this.model.unit),
          unitId: this.parseParam(this.model.unitId)
        }
        checkMaterial(param).then((res)=>{
          if(res && res.code===200) {
            if(res.data.status){
              this.$message.warning('抱歉，该商品已存在！');
              return;
            } else {
              //进一步校验单位
              let manyUnitselected = ''
              if(formData.unitId) {
                for(let i=0; i<this.unitList.length; i++) {
                  if(this.unitList[i].id == formData.unitId) {
                    manyUnitselected = this.unitList[i].name
                  }
                }
              }
              let manyUnitInfo = manyUnitselected.substring(0, manyUnitselected.indexOf("("));
              let unitArr = manyUnitInfo.split(",");
              if(!formData.unit) {
                //此时为多单位
                if (formData.meList.length<2){
                  this.$message.warning('多单位的商品条码行数至少要有两行，请再新增一行条码信息！');
                  return;
                }
                if(formData.meList[0].commodityUnit != unitArr[0]) {
                  this.$message.warning('条码之后的单位填写有误，单位【' + formData.meList[0].commodityUnit
                    + '】请修改为【' + unitArr[0] + '】！');
                  return;
                }
                if(formData.meList[1].commodityUnit != unitArr[1]) {
                  this.$message.warning('条码之后的单位填写有误，单位【' + formData.meList[1].commodityUnit
                    + '】请修改为【' + unitArr[1] + '】！');
                  return;
                }
              }
              for(let i=0; i<formData.meList.length; i++) {
                let commodityUnit = formData.meList[i].commodityUnit;
                if(formData.unit) {
                  if(commodityUnit != formData.unit) {
                    this.$message.warning('条码之后的单位填写有误，单位【' + commodityUnit + '】请修改为【'
                      + formData.unit + '】！');
                    return;
                  }
                } else if(manyUnitselected) {
                  if(commodityUnit != unitArr[0] && commodityUnit != unitArr[1]) {
                    this.$message.warning('条码之后的单位填写有误，单位【' + commodityUnit + '】请修改为【'
                      + unitArr[0]+ '】或【' + unitArr[1]+ '】！');
                    return;
                  }
                }
              }
              if(this.fileList && this.fileList.length > 0) {
                formData.imgName = this.fileList
              } else {
                formData.imgName = ''
              }
              //接口调用
              let url = this.url.add, method = 'post'
              if (this.model.id) {
                url = this.url.edit
                method = 'put'
              }
              const that = this;
              this.confirmLoading = true
              httpAction(url, formData, method).then((res) => {
                if(res.code === 200){
                  that.$emit('ok');
                  that.confirmLoading = false
                  that.close();
                }else{
                  that.$message.warning(res.data.message);
                  that.confirmLoading = false
                }
              }).finally(() => {
              })
            }
          }
        })
      },
      parseParam(param) {
        return param ? param: ""
      },
      validateBarCode(type, value, row, column, callback, target) {
        let params = {
          barCode: value,
          id: row.id.length >= 20?0: row.id
        };
        checkMaterialBarCode(params).then((res)=>{
          if(res && res.code===200) {
            if(!res.data.status){
              callback(true);
            } else {
              callback(false, '该条码已经存在');
            }
          } else {
            callback(false, res.data);
          }
        });
      },
      maxBarCodeAction(){
        getMaxBarCode({}).then((res)=> {
          if (res && res.code === 200) {
            this.maxBarCodeInfo = res.data.barCode - 0
          }
        })
      },
      loadTreeData(){
        let that = this;
        let params = {};
        params.id='';
        queryMaterialCategoryTreeList(params).then((res)=>{
          if(res){
            that.categoryTree = [];
            for (let i = 0; i < res.length; i++) {
              let temp = res[i];
              that.categoryTree.push(temp);
            }
          }
        })
      },
      loadUnitListData(){
        let that = this;
        let params = {};
        params.currentPage = 1;
        params.pageSize = 100;
        getAction('/unit/list', params).then((res) => {
          if(res){
            that.unitList = res.data.rows;
          }
        })
      },
      onSkuChange(checked) {
        this.skuSwitch = checked
        if(checked) {
          this.meTable.columns[2].type = FormTypes.input
        } else {
          this.meTable.columns[2].type = FormTypes.hidden
        }
      },
      onBarCodeChange(checked) {
        let unit = this.form.getFieldValue('unit')
        if(unit) {
          if(checked){
            //计算多属性已经选择了几个
            let count = this.getNumByField('manyColor') + this.getNumByField('manySize')
              + this.getNumByField('other1') + this.getNumByField('other2') + this.getNumByField('other3')
            if(count === 2) {
              let skuArr = []
              if(this.getNumByField('manyColor')) {
                skuArr.push(this.form.getFieldValue('manyColor'))
              }
              if(this.getNumByField('manySize')) {
                skuArr.push(this.form.getFieldValue('manySize'))
              }
              if(this.getNumByField('other1')) {
                skuArr.push(this.form.getFieldValue('other1'))
              }
              if(this.getNumByField('other2')) {
                skuArr.push(this.form.getFieldValue('other2'))
              }
              if(this.getNumByField('other3')) {
                skuArr.push(this.form.getFieldValue('other3'))
              }
              let skuArrOne = skuArr[0]
              let skuArrTwo = skuArr[1]
              let barCodeSku = []
              for (let i = 0; i < skuArrOne.length; i++) {
                for (let j = 0; j < skuArrTwo.length; j++) {
                  barCodeSku.push(skuArrOne[i] + ',' + skuArrTwo[j])
                }
              }
              let meTableData = []
              getMaxBarCode({}).then((res)=>{
                if(res && res.code===200) {
                  let maxBarCode = res.data.barCode-0
                  for (let i = 0; i < barCodeSku.length; i++) {
                    let currentBarCode = maxBarCode + i + 1
                    meTableData.push({barCode: currentBarCode, commodityUnit: unit, sku: barCodeSku[i]})
                  }
                  this.meTable.dataSource = meTableData
                }
              })
            } else {
              this.$message.warning('请选择两个属性！');
              this.barCodeSwitch = false;
            }
          } else {
            this.meTable.dataSource = []
          }
        } else {
          this.$message.warning('请填写单位，注意不要勾选多单位！');
          this.barCodeSwitch = false;
        }
      },
      getNumByField(field) {
        let num = 0
        if(this.form.getFieldValue(field)) {
          if(this.form.getFieldValue(field).length>0) {
            num = 1
          }
        }
        return num
      },
      onAdded(event) {
        const { row, target } = event
        let unit = ''
        if(this.unitStatus == false) {
          unit = this.form.getFieldValue('unit')
        }
        this.maxBarCodeInfo = this.maxBarCodeInfo + 1
        target.setValues([{rowKey: row.id, values: {barCode: this.maxBarCodeInfo, commodityUnit: unit?unit:''}}])
      },
      batchSet(type) {
        if(this.skuSwitch || this.model.id){
          this.$refs.modalForm.add(type);
          this.$refs.modalForm.disableSubmit = false;
        } else {
          this.$message.warning('抱歉，只有开启多属性才能进行批量操作！');
        }
      },
      batchSetPricemodalFormOk(price, batchType) {
        let arr = this.meTable.dataSource
        if(arr.length === 0) {
          this.$message.warning('请先录入条码、单位等信息！');
        } else {
          let meTableData = []
          for (let i = 0; i < arr.length; i++) {
            let meInfo = {barCode: arr[i].barCode, commodityUnit: arr[i].commodityUnit, sku: arr[i].sku,
              purchaseDecimal: arr[i].purchaseDecimal, commodityDecimal: arr[i].commodityDecimal,
              wholesaleDecimal: arr[i].wholesaleDecimal, lowDecimal: arr[i].lowDecimal}
            if(batchType === 'purchase') {
              meInfo.purchaseDecimal = price-0
            } else if(batchType === 'commodity') {
              meInfo.commodityDecimal = price-0
            } else if(batchType === 'wholesale') {
              meInfo.wholesaleDecimal = price-0
            } else if(batchType === 'low') {
              meInfo.lowDecimal = price-0
            }
            if(arr[i].id) {
              meInfo.id = arr[i].id
            }
            meTableData.push(meInfo)
          }
          this.meTable.dataSource = meTableData
        }
      },
      initMaterialAttribute() {
        getAllMaterialAttribute({}).then((res)=>{
          if(res && res.code===200) {
            if(res.data) {
              this.sku.manyColor = res.data.manyColorName;
              this.sku.manySize = res.data.manySizeName;
              this.sku.other1 = res.data.other1Name;
              this.sku.other2 = res.data.other2Name;
              this.sku.other3 = res.data.other3Name;
              this.sku.manyColorList = res.data.manyColorValue;
              this.sku.manySizeList = res.data.manySizeValue;
              this.sku.other1List = res.data.other1Value;
              this.sku.other2List = res.data.other2Value;
              this.sku.other3List = res.data.other3Value;
            }
          }
        });
      },
      loadParseMaterialProperty() {
        let mpList = Vue.ls.get('materialPropertyList')
        for (let i = 0; i < mpList.length; i++) {
          if (mpList[i].nativeName === "制造商") {
            this.mpShort.mfrs.name = mpList[i].anotherName
            this.mpShort.mfrs.enabled = mpList[i].enabled
          }
          if (mpList[i].nativeName === "自定义1") {
            this.mpShort.otherField1.name = mpList[i].anotherName
            this.mpShort.otherField1.enabled = mpList[i].enabled
          }
          if (mpList[i].nativeName === "自定义2") {
            this.mpShort.otherField2.name = mpList[i].anotherName
            this.mpShort.otherField2.enabled = mpList[i].enabled
          }
          if (mpList[i].nativeName === "自定义3") {
            this.mpShort.otherField3.name = mpList[i].anotherName
            this.mpShort.otherField3.enabled = mpList[i].enabled
          }
        }
      },
      onlyUnitOnChange(e) {
        this.$refs.editableMeTable.getValues((error, values) => {
          let mArr = values
          for (let i = 0; i < mArr.length; i++) {
            let mInfo = mArr[i]
            mInfo.commodityUnit = e.target.value
          }
          this.meTable.dataSource = mArr
        })
      },
      manyUnitOnChange(value) {
        let unitArr = this.unitList
        let basicUnit = '', otherUnit = ''
        for (let i = 0; i < unitArr.length; i++) {
          if(unitArr[i].id === value) {
            basicUnit = unitArr[i].basicUnit
            otherUnit = unitArr[i].otherUnit
          }
        }
        this.$refs.editableMeTable.getValues((error, values) => {
          let mArr = values
          for (let i = 0; i < mArr.length; i++) {
            let mInfo = mArr[i]
            if(i===0) {
              mInfo.commodityUnit = basicUnit
            } else {
              mInfo.commodityUnit = otherUnit
            }
          }
          this.meTable.dataSource = mArr
        })
      },
      unitOnChange (e) {
        let isChecked = e.target.checked;
        if(isChecked) {
          this.unitStatus = true;
          this.manyUnitStatus = false;
          this.unitChecked = true;
        } else {
          this.unitStatus = false;
          this.manyUnitStatus = true;
          this.unitChecked = false;
        }
      }
    }
  }
</script>
<style scoped>

</style>

<template>
  <a-modal
    :title="title"
    :width="1200"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
    wrapClassName="ant-modal-cust-warp"
    style="top:5%;height: 100%;overflow-y: hidden">
    <template slot="footer">
      <a-button key="back" v-if="isReadOnly" @click="handleCancel">
        关闭
      </a-button>
    </template>
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-tabs default-active-key="1">
          <a-tab-pane key="1" tab="基本信息" forceRender>
            <a-row class="form-row" :gutter="24">
              <a-col :lg="8" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="名称">
                  <a-input placeholder="请输入名称" v-decorator.trim="[ 'name', validatorRules.name]" />
                </a-form-item>
              </a-col>
              <a-col :lg="8" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="规格">
                  <a-input placeholder="请输入规格" v-decorator.trim="[ 'standard' ]" />
                </a-form-item>
              </a-col>
              <a-col :lg="8" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单位">
                  <a-row class="form-row" :gutter="24">
                    <a-col :lg="13" :md="13" :sm="24">
                      <a-input placeholder="输入单位" :hidden="unitStatus" v-decorator.trim="[ 'unit' ]" />
                      <a-select :value="unitList" placeholder="选择单位" v-decorator="[ 'unitId' ]"
                                :hidden="manyUnitStatus" :dropdownMatchSelectWidth="false">
                        <a-select-option v-for="(item,index) in unitList"
                          :key="index" :value="item.id">
                          {{ item.name }}
                        </a-select-option>
                      </a-select>
                    </a-col>
                    <a-col :lg="11" :md="11" :sm="24">
                      <a-checkbox :checked="unitChecked" @change="unitOnChange">多单位</a-checkbox>
                    </a-col>
                  </a-row>
                </a-form-item>
              </a-col>
              <a-col :lg="8" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="型号">
                  <a-input placeholder="请输入型号" v-decorator.trim="[ 'model' ]" />
                </a-form-item>
              </a-col>
              <a-col :lg="8" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="颜色">
                  <a-input placeholder="请输入颜色" v-decorator.trim="[ 'color' ]" />
                </a-form-item>
              </a-col>
              <a-col :lg="8" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="类别">
                  <a-tree-select style="width:100%" :dropdownStyle="{maxHeight:'200px',overflow:'auto'}" allow-clear
                   :treeData="categoryTree" v-decorator="[ 'categoryId' ]" placeholder="请选择类别">
                  </a-tree-select>
                </a-form-item>
              </a-col>
              <a-col :lg="8" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="序列号">
                  <a-select placeholder="有无序列号" v-decorator="[ 'enableSerialNumber' ]">
                    <a-select-option value="1">有</a-select-option>
                    <a-select-option value="0">无</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :lg="8" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="安全存量">
                  <a-input placeholder="请输入安全存量" v-decorator.trim="[ 'safetyStock' ]" />
                </a-form-item>
              </a-col>
              <a-col :lg="8" :md="12" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="多属性">
                  <a-switch checked-children="启用" un-checked-children="关闭" v-model="skuSwitch" @change="onSkuChange"></a-switch>
                </a-form-item>
              </a-col>
            </a-row>
            <a-card v-if="skuSwitch">
              <a-row class="form-row" :gutter="24">
                <a-col :lg="8" :md="12" :sm="24">
                  <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="sku.manyColor">
                    <a-select mode="multiple" v-decorator="[ 'manyColor' ]" showSearch optionFilterProp="children">
                      <a-select-option v-for="(item,index) in sku.manyColorList" :key="index" :value="item.value">
                        {{ item.name }}
                      </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :lg="8" :md="12" :sm="24">
                  <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="sku.manySize">
                    <a-select mode="multiple" v-decorator="[ 'manySize' ]" showSearch optionFilterProp="children">
                      <a-select-option v-for="(item,index) in sku.manySizeList" :key="index" :value="item.value">
                        {{ item.name }}
                      </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :lg="8" :md="12" :sm="24">
                  <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="sku.other1">
                    <a-select mode="multiple" v-decorator="[ 'other1' ]" showSearch optionFilterProp="children">
                      <a-select-option v-for="(item,index) in sku.other1List" :key="index" :value="item.value">
                        {{ item.name }}
                      </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row class="form-row" :gutter="24">
                <a-col :lg="8" :md="12" :sm="24">
                  <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="sku.other2">
                    <a-select mode="multiple" v-decorator="[ 'other2' ]" showSearch optionFilterProp="children">
                      <a-select-option v-for="(item,index) in sku.other2List" :key="index" :value="item.value">
                        {{ item.name }}
                      </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :lg="8" :md="12" :sm="24">
                  <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="sku.other3">
                    <a-select mode="multiple" v-decorator="[ 'other3' ]" showSearch optionFilterProp="children">
                      <a-select-option v-for="(item,index) in sku.other3List" :key="index" :value="item.value">
                        {{ item.name }}
                      </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :lg="8" :md="12" :sm="24">
                  <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="生成条码">
                    <a-switch v-model="barCodeSwitch" @change="onBarCodeChange"></a-switch>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-card>
            <div style="margin-top:8px;">
              <j-editable-table
                ref="editableMeTable"
                :loading="meTable.loading"
                :columns="meTable.columns"
                :dataSource="meTable.dataSource"
                :maxHeight="300"
                :rowNumber="true"
                :rowSelection="true"
                :actionButton="true">
                <template #buttonAfter>
                  <a-button @click="batchSet('purchase')">采购价-批量</a-button>
                  <a-button style="margin-left: 8px" @click="batchSet('commodity')">零售价-批量</a-button>
                  <a-button style="margin-left: 8px" @click="batchSet('wholesale')">销售价-批量</a-button>
                  <a-button style="margin-left: 8px" @click="batchSet('low')">最低售价-批量</a-button>
                </template>
              </j-editable-table>
              <!-- 表单区域 -->
              <batch-set-price-modal ref="modalForm" @ok="batchSetPricemodalFormOk"></batch-set-price-modal>
            </div>
            <a-row class="form-row" :gutter="24">
              <a-col :lg="24" :md="24" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="{xs: { span: 24 },sm: { span: 24 }}" label="">
                  <a-textarea :rows="2" placeholder="请输入备注" v-decorator="[ 'remark' ]" style="margin-top:8px;"/>
                </a-form-item>
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane key="2" tab="扩展信息" forceRender>
            <a-row v-if="mpShort.mfrs.enabled" class="form-row" :gutter="24">
              <a-col :lg="8" :md="8" :sm="8">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="mpShort.mfrs.name">
                  <a-input v-decorator.trim="[ 'mfrs' ]" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row v-if="mpShort.otherField1.enabled" class="form-row" :gutter="24">
              <a-col :lg="8" :md="8" :sm="8">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="mpShort.otherField1.name">
                  <a-input v-decorator.trim="[ 'otherField1' ]" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row v-if="mpShort.otherField2.enabled" class="form-row" :gutter="24">
              <a-col :lg="8" :md="8" :sm="8">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="mpShort.otherField2.name">
                  <a-input v-decorator.trim="[ 'otherField2' ]" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row v-if="mpShort.otherField3.enabled" class="form-row" :gutter="24">
              <a-col :lg="8" :md="8" :sm="8">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="mpShort.otherField3.name">
                  <a-input v-decorator.trim="[ 'otherField3' ]" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane key="3" tab="初始库存" forceRender>
            <j-editable-table
              ref="editableDepotTable"
              :loading="depotTable.loading"
              :columns="depotTable.columns"
              :dataSource="depotTable.dataSource"
              :maxHeight="300"
              :rowNumber="true"
              :rowSelection="false"
              :actionButton="false"/>
          </a-tab-pane>
          <a-tab-pane key="4" tab="图片信息" forceRender>
            <a-row class="form-row" :gutter="24">
              <a-col :lg="12" :md="12" :sm="24">
                <a-form-item :labelCol="{xs: { span: 24 },sm: { span: 4 }}" :wrapperCol="{xs: { span: 24 },sm: { span: 20 }}" label="图片信息">
                  <j-image-upload v-model="fileList" bizPath="material" text="上传" isMultiple></j-image-upload>
                </a-form-item>
              </a-col>
              <a-col :lg="12" :md="12" :sm="24"></a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>
      </a-form>
    </a-spin>
  </a-modal>
</template>
<script>
  import pick from 'lodash.pick'
  import BatchSetPriceModal from './BatchSetPriceModal'
  import JEditableTable from '@/components/jeecg/JEditableTable'
  import { FormTypes, VALIDATE_NO_PASSED, getRefPromise, validateFormAndTables } from '@/utils/JEditableTableUtil'
  import {queryMaterialCategoryTreeList,checkMaterial,checkMaterialBarCode,getAllMaterialAttribute,getMaxBarCode} from '@/api/api'
  import { httpAction, getAction } from '@/api/manage'
  import JImageUpload from '@/components/jeecg/JImageUpload'
  import JDate from '@/components/jeecg/JDate'
  import Vue from 'vue'
  export default {
    name: "MaterialModal",
    components: {
      BatchSetPriceModal,
      JImageUpload,
      JDate,
      JEditableTable
    },
    data () {
      return {
        title:"操作",
        visible: false,
        categoryTree: [],
        unitList: [],
        depotList: [],
        fileList:[],
        unitStatus: false,
        manyUnitStatus: true,
        unitChecked: false,
        skuSwitch: false, //sku开启状态
        barCodeSwitch: false, //生成条码开关
        sku: {
          manyColor: '多颜色',
          manySize: '多尺寸',
          other1: '自定义1',
          other2: '自定义2',
          other3: '自定义3',
          manyColorList: [],
          manySizeList: [],
          other1List: [],
          other2List: [],
          other3List: [],
        },
        model: {},
        isReadOnly: false,
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        mpShort: {
          mfrs: {},
          otherField1: {},
          otherField2: {},
          otherField3: {}
        },
        meTable: {
          loading: false,
          dataSource: [],
          columns: [
            {
              title: '条码', key: 'barCode', width: '20%', type: FormTypes.input, defaultValue: '', placeholder: '请输入${title}',
              validateRules: [{ required: true, message: '${title}不能为空' },
                { pattern: /^[1-9]\d*$/, message: '请输入零以上的正整数' },
                { pattern: /^\d{4,13}$/, message: '4到13位数字' },
                { handler: this.validateBarCode}]
            },
            {
              title: '单位', key: 'commodityUnit', width: '10%', type: FormTypes.input, defaultValue: '', placeholder: '请输入${title}',
              validateRules: [{ required: true, message: '${title}不能为空' }]
            },
            {
              title: '多属性', key: 'sku', width: '12%', type: FormTypes.input, defaultValue: '', readonly:true, placeholder: '点击生成条码赋值'
            },
            {
              title: '采购价', key: 'purchaseDecimal', width: '12%', type: FormTypes.input, defaultValue: '', placeholder: '请输入${title}'
            },
            {
              title: '零售价', key: 'commodityDecimal', width: '12%', type: FormTypes.input, defaultValue: '', placeholder: '请输入${title}'
            },
            {
              title: '销售价', key: 'wholesaleDecimal', width: '12%', type: FormTypes.input, defaultValue: '', placeholder: '请输入${title}'
            },
            {
              title: '最低售价', key: 'lowDecimal', width: '12%', type: FormTypes.input, defaultValue: '', placeholder: '请输入${title}'
            }
          ]
        },
        depotTable: {
          loading: false,
          dataSource: [],
          columns: [
            {
              title: '仓库', key: 'name', width: '15%', type: FormTypes.normal
            },
            {
              title: '库存数量', key: 'initStock', width: '15%', type: FormTypes.input, defaultValue: '', placeholder: '请输入${title}'
            }
          ]
        },
        confirmLoading: false,
        form: this.$form.createForm(this),
        validatorRules:{
          name:{
            rules: [
              { required: true, message: '请输入名称!' },
              { min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur' }
            ]
          },
          unit:{
            rules: [
              { required: true, message: '请输入单位!' }
            ]
          }
        },
        url: {
          add: '/material/add',
          edit: '/material/update',
          materialsExtendList: '/materialsExtend/getDetailList',
          depotWithStock: '/depot/getAllListWithStock'
        }
      }
    },
    created () {
      this.loadTreeData();
      this.loadUnitListData();
      this.loadParseMaterialProperty();
    },
    methods: {
      // 获取所有的editableTable实例
      getAllTable() {
        return Promise.all([
          getRefPromise(this, 'editableMeTable'),
          getRefPromise(this, 'editableDepotTable')
        ])
      },
      add () {
        //隐藏多属性
        this.meTable.columns[2].type = FormTypes.hidden
        // 默认新增一条数据
        this.getAllTable().then(editableTables => {
          editableTables[0].add()
        })
        this.edit({});
      },
      edit (record) {
        this.form.resetFields();
        this.model = Object.assign({}, record);
        this.activeKey = '1'
        this.skuSwitch = false
        this.barCodeSwitch = false
        this.visible = true;
        if(JSON.stringify(record) === '{}') {
          this.fileList = []
        } else {
          setTimeout(() => {
            this.fileList = record.imgName
          }, 5)
        }
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model, 'name', 'standard', 'unit', 'unitId', 'model', 'color',
            'categoryId','enableSerialNumber','safetyStock','remark','mfrs','otherField1','otherField2','otherField3'))
        });
        this.initMaterialAttribute()
        // 加载子表数据
        if (this.model.id) {
          // 判断是否是多单位
          if(this.model.unit){
            this.unitChecked = false
            this.unitStatus = false
            this.manyUnitStatus = true
          } else {
            this.unitChecked = true
            this.unitStatus = true
            this.manyUnitStatus = false
          }
          let params = { materialId: this.model.id }
          this.requestMeTableData(this.url.materialsExtendList, params, this.meTable)
          this.requestDepotTableData(this.url.depotWithStock, { mId: this.model.id }, this.depotTable)
        } else {
          this.requestDepotTableData(this.url.depotWithStock, { mId: 0 }, this.depotTable)
        }
      },
      /** 查询条码tab的数据 */
      requestMeTableData(url, params, tab) {
        tab.loading = true
        getAction(url, params).then(res => {
          for (let i = 0; i < res.data.rows.length; i++) {
            if(res.data.rows[i].sku) {
              this.meTable.columns[2].type = FormTypes.input
            }
          }
          tab.dataSource = res.data.rows || []
        }).finally(() => {
          tab.loading = false
        })
      },
      /** 查询仓库tab的数据 */
      requestDepotTableData(url, params, tab) {
        tab.loading = true
        getAction(url, params).then(res => {
          tab.dataSource = res.data || []
        }).finally(() => {
          tab.loading = false
        })
      },
      close () {
        this.$emit('close');
        this.visible = false
        this.unitStatus = false
        this.manyUnitStatus = true
        this.unitChecked = false
        this.getAllTable().then(editableTables => {
          editableTables[0].initialize()
          editableTables[1].initialize()
        })
      },
      handleOk () {
        this.validateFields()
      },
      handleCancel () {
        this.close()
      },
      /** 触发表单验证 */
      validateFields() {
        this.getAllTable().then(tables => {
          /** 一次性验证主表和所有的次表 */
          return validateFormAndTables(this.form, tables)
        }).then(allValues => {
          let formData = this.classifyIntoFormData(allValues)
          formData.sortList = [];
          if(formData.unit === undefined) {formData.unit = ''}
          if(formData.unitId === undefined) {formData.unitId = ''}
          if(this.unitChecked) {formData.unit = ''} else {formData.unitId = ''}
          // 发起请求
          return this.requestAddOrEdit(formData)
        }).catch(e => {
          if (e.error === VALIDATE_NO_PASSED) {
            // 如果有未通过表单验证的子表，就自动跳转到它所在的tab
            this.activeKey = e.index == null ? this.activeKey : (e.index + 1).toString()
          } else {
            console.error(e)
          }
        })
      },
      /** 整理成formData */
      classifyIntoFormData(allValues) {
        let materialMain = Object.assign(this.model, allValues.formValue)
        return {
          ...materialMain, // 展开
          meList: allValues.tablesValue[0].values,
          stock: allValues.tablesValue[1].values,
        }
      },

      /** 发起新增或修改的请求 */
      requestAddOrEdit(formData) {
        if(formData.unit === '' && formData.unitId === '') {
          this.$message.warning('抱歉，单位为必填项！');
          return;
        }
        if(formData.meList.length === 0) {
          this.$message.warning('抱歉，请输入条码信息！');
          return;
        }
        //校验商品是否存在，通过校验商品的名称、型号、规格、颜色、单位、制造商等
        let param = {
          id: this.model.id?this.model.id:0,
          name: this.model.name,
          model: this.parseParam(this.model.model),
          color: this.parseParam(this.model.color),
          standard: this.parseParam(this.model.standard),
          mfrs: this.parseParam(this.model.mfrs),
          otherField1: this.parseParam(this.model.otherField1),
          otherField2: this.parseParam(this.model.otherField2),
          otherField3: this.parseParam(this.model.otherField3),
          unit: this.parseParam(this.model.unit),
          unitId: this.parseParam(this.model.unitId)
        }
        checkMaterial(param).then((res)=>{
          if(res && res.code===200) {
            if(res.data.status){
              this.$message.warning('抱歉，该商品已存在！');
              return;
            } else {
              //进一步校验单位
              let manyUnitselected = ''
              if(formData.unitId) {
                for(let i=0; i<this.unitList.length; i++) {
                  if(this.unitList[i].id == formData.unitId) {
                    manyUnitselected = this.unitList[i].name
                  }
                }
              }
              let manyUnitInfo = manyUnitselected.substring(0, manyUnitselected.indexOf("("));
              let unitArr = manyUnitInfo.split(",");
              if(!formData.unit) {
                //此时为多单位
                if (formData.meList.length<2){
                  this.$message.warning('多单位的商品条码行数至少要有两行，请再新增一行条码信息！');
                  return;
                }
                if(formData.meList[0].commodityUnit != unitArr[0]) {
                  this.$message.warning('条码之后的单位填写有误，单位【' + formData.meList[0].commodityUnit
                    + '】请修改为【' + unitArr[0] + '】！');
                  return;
                }
                if(formData.meList[1].commodityUnit != unitArr[1]) {
                  this.$message.warning('条码之后的单位填写有误，单位【' + formData.meList[1].commodityUnit
                    + '】请修改为【' + unitArr[1] + '】！');
                  return;
                }
              }
              for(let i=0; i<formData.meList.length; i++) {
                let commodityUnit = formData.meList[i].commodityUnit;
                if(formData.unit) {
                  if(commodityUnit != formData.unit) {
                    this.$message.warning('条码之后的单位填写有误，单位【' + commodityUnit + '】请修改为【'
                      + formData.unit + '】！');
                    return;
                  }
                } else if(manyUnitselected) {
                  if(commodityUnit != unitArr[0] && commodityUnit != unitArr[1]) {
                    this.$message.warning('条码之后的单位填写有误，单位【' + commodityUnit + '】请修改为【'
                      + unitArr[0]+ '】或【' + unitArr[1]+ '】！');
                    return;
                  }
                }
              }
              if(this.fileList && this.fileList.length > 0) {
                formData.imgName = this.fileList
              } else {
                formData.imgName = ''
              }
              //接口调用
              let url = this.url.add, method = 'post'
              if (this.model.id) {
                url = this.url.edit
                method = 'put'
              }
              const that = this;
              this.confirmLoading = true
              httpAction(url, formData, method).then((res) => {
                if(res.code === 200){
                  that.$emit('ok');
                  that.confirmLoading = false
                  that.close();
                }else{
                  that.$message.warning(res.data.message);
                  that.confirmLoading = false
                }
              }).finally(() => {
              })
            }
          }
        })
      },
      parseParam(param) {
        return param ? param: ""
      },
      validateBarCode(type, value, row, column, callback, target) {
        let params = {
          barCode: value,
          id: row.id.length >= 20?0: row.id
        };
        checkMaterialBarCode(params).then((res)=>{
          if(res && res.code===200) {
            if(!res.data.status){
              callback(true);
            } else {
              callback(false, '该条码已经存在');
            }
          } else {
            callback(false, res.data);
          }
        });
      },
      loadTreeData(){
        let that = this;
        let params = {};
        params.id='';
        queryMaterialCategoryTreeList(params).then((res)=>{
          if(res){
            that.categoryTree = [];
            for (let i = 0; i < res.length; i++) {
              let temp = res[i];
              that.categoryTree.push(temp);
            }
          }
        })
      },
      loadUnitListData(){
        let that = this;
        let params = {};
        params.currentPage = 1;
        params.pageSize = 100;
        getAction('/unit/list', params).then((res) => {
          if(res){
            that.unitList = res.data.rows;
          }
        })
      },
      onSkuChange(checked) {
        this.skuSwitch = checked
        if(checked) {
          this.meTable.columns[2].type = FormTypes.input
        } else {
          this.meTable.columns[2].type = FormTypes.hidden
        }
      },
      onBarCodeChange(checked) {
        let unit = this.form.getFieldValue('unit')
        if(unit) {
          if(checked){
            //计算多属性已经选择了几个
            let count = this.getNumByField('manyColor') + this.getNumByField('manySize')
              + this.getNumByField('other1') + this.getNumByField('other2') + this.getNumByField('other3')
            if(count === 2) {
              let skuArr = []
              if(this.getNumByField('manyColor')) {
                skuArr.push(this.form.getFieldValue('manyColor'))
              }
              if(this.getNumByField('manySize')) {
                skuArr.push(this.form.getFieldValue('manySize'))
              }
              if(this.getNumByField('other1')) {
                skuArr.push(this.form.getFieldValue('other1'))
              }
              if(this.getNumByField('other2')) {
                skuArr.push(this.form.getFieldValue('other2'))
              }
              if(this.getNumByField('other3')) {
                skuArr.push(this.form.getFieldValue('other3'))
              }
              let skuArrOne = skuArr[0]
              let skuArrTwo = skuArr[1]
              let barCodeSku = []
              for (let i = 0; i < skuArrOne.length; i++) {
                for (let j = 0; j < skuArrTwo.length; j++) {
                  barCodeSku.push(skuArrOne[i] + ',' + skuArrTwo[j])
                }
              }
              let meTableData = []
              getMaxBarCode({}).then((res)=>{
                if(res && res.code===200) {
                  let maxBarCode = res.data.barCode-0
                  for (let i = 0; i < barCodeSku.length; i++) {
                    let currentBarCode = maxBarCode + i + 1
                    meTableData.push({barCode: currentBarCode, commodityUnit: unit, sku: barCodeSku[i]})
                  }
                  this.meTable.dataSource = meTableData
                }
              })
            } else {
              this.$message.warning('请选择两个属性！');
              this.barCodeSwitch = false;
            }
          } else {
            this.meTable.dataSource = []
          }
        } else {
          this.$message.warning('请填写单位，注意不要勾选多单位！');
          this.barCodeSwitch = false;
        }
      },
      getNumByField(field) {
        let num = 0
        if(this.form.getFieldValue(field)) {
          if(this.form.getFieldValue(field).length>0) {
            num = 1
          }
        }
        return num
      },
      batchSet(type) {
        this.$refs.modalForm.add(type);
        this.$refs.modalForm.disableSubmit = false;
      },
      batchSetPricemodalFormOk(price, batchType) {
        let arr = this.meTable.dataSource
        if(arr.length === 0) {
          this.$message.warning('请先录入条码、单位等信息！');
        } else {
          let meTableData = []
          for (let i = 0; i < arr.length; i++) {
            let meInfo = {barCode: arr[i].barCode, commodityUnit: arr[i].commodityUnit, sku: arr[i].sku,
              purchaseDecimal: arr[i].purchaseDecimal, commodityDecimal: arr[i].commodityDecimal,
              wholesaleDecimal: arr[i].wholesaleDecimal, lowDecimal: arr[i].lowDecimal}
            if(batchType === 'purchase') {
              meInfo.purchaseDecimal = price-0
            } else if(batchType === 'commodity') {
              meInfo.commodityDecimal = price-0
            } else if(batchType === 'wholesale') {
              meInfo.wholesaleDecimal = price-0
            } else if(batchType === 'low') {
              meInfo.lowDecimal = price-0
            }
            if(arr[i].id) {
              meInfo.id = arr[i].id
            }
            meTableData.push(meInfo)
          }
          this.meTable.dataSource = meTableData
        }
      },
      initMaterialAttribute() {
        getAllMaterialAttribute({}).then((res)=>{
          if(res && res.code===200) {
            if(res.data) {
              this.sku.manyColor = res.data.manyColorName;
              this.sku.manySize = res.data.manySizeName;
              this.sku.other1 = res.data.other1Name;
              this.sku.other2 = res.data.other2Name;
              this.sku.other3 = res.data.other3Name;
              this.sku.manyColorList = res.data.manyColorValue;
              this.sku.manySizeList = res.data.manySizeValue;
              this.sku.other1List = res.data.other1Value;
              this.sku.other2List = res.data.other2Value;
              this.sku.other3List = res.data.other3Value;
            }
          }
        });
      },
      loadParseMaterialProperty() {
        let mpList = Vue.ls.get('materialPropertyList')
        for (let i = 0; i < mpList.length; i++) {
          if (mpList[i].nativeName === "制造商") {
            this.mpShort.mfrs.name = mpList[i].anotherName
            this.mpShort.mfrs.enabled = mpList[i].enabled
          }
          if (mpList[i].nativeName === "自定义1") {
            this.mpShort.otherField1.name = mpList[i].anotherName
            this.mpShort.otherField1.enabled = mpList[i].enabled
          }
          if (mpList[i].nativeName === "自定义2") {
            this.mpShort.otherField2.name = mpList[i].anotherName
            this.mpShort.otherField2.enabled = mpList[i].enabled
          }
          if (mpList[i].nativeName === "自定义3") {
            this.mpShort.otherField3.name = mpList[i].anotherName
            this.mpShort.otherField3.enabled = mpList[i].enabled
          }
        }
      },
      unitOnChange (e) {
        let isChecked = e.target.checked;
        if(isChecked) {
          this.unitStatus = true;
          this.manyUnitStatus = false;
          this.unitChecked = true;
        } else {
          this.unitStatus = false;
          this.manyUnitStatus = true;
          this.unitChecked = false;
        }
      }
    }
  }
</script>
<style scoped>

</style>


fix border radius of comment overview

fix border radius of comment overview

<template>

 0">

						<app-user-card-hover :user="comment.user">
							<app-user-avatar-img :user="comment.user" />
						</app-user-card-hover>

					{{ comment.user.display_name }}
					<app-user-verified-tick :user="comment.user" />
					@{{ comment.user.username }}

				<app-fade-collapse :collapse-height="150">

						<app-content-viewer :source="comment.comment_content" />

				</app-fade-collapse>

</template>


ビデオ再生時にマウスカーソルを重ねる or 動かしたときにコントローラを表示するように変更

<template>

                <v-progress-circular :size="50" color="primary" indeterminate></v-progress-circular>

                <transition name="fade">

                            <v-btn v-if="duration > 0" class="add-shadow mx-4" icon dark v-on:click="rewindTime(30)">
                                <v-icon dark>mdi-rewind-30</v-icon>
                            </v-btn>
                            <v-btn v-if="duration > 0" class="add-shadow mx-4" icon dark v-on:click="rewindTime(10)">
                                <v-icon dark>mdi-rewind-10</v-icon>
                            </v-btn>
                            <v-btn class="play-button add-shadow mx-4" icon dark v-on:click="togglePlay">
                                <v-icon v-if="isPause === true" dark>mdi-play</v-icon>
                                <v-icon v-else dark>mdi-pause</v-icon>
                            </v-btn>
                            <v-btn v-if="duration > 0" class="add-shadow mx-4" icon dark v-on:click="forwardTime(10)">
                                <v-icon dark>mdi-fast-forward-10</v-icon>
                            </v-btn>
                            <v-btn v-if="duration > 0" class="add-shadow mx-4" icon dark v-on:click="forwardTime(30)">
                                <v-icon dark>mdi-fast-forward-30</v-icon>
                            </v-btn>

 0"
                            class="d-flex flex-column align-center left-buttons"
                            v-on:click="stopPropagation"
                        >
                            <v-btn class="add-shadow" icon dark v-on:click="speedUp">
                                <v-icon dark>mdi-plus-circle</v-icon>
                            </v-btn>
                            <v-btn class="add-shadow my-2" text dark v-on:click="resetSpeed">
                                x{{ playbackRate.toFixed(1) }}
                            </v-btn>
                            <v-btn class="add-shadow" icon dark v-on:click="speedDown">
                                <v-icon dark>mdi-minus-circle</v-icon>
                            </v-btn>

                                <v-slider
                                    class="slider"
                                    v-model="currentTime"
                                    :max="duration"
                                    color="white"
                                    track-color="grey"
                                    :disabled="duration === 0"
                                    v-on:start="startChangeCurrentPosition"
                                    v-on:change="endChangeCurrentPosition"
                                    v-on:input="updateCurrentPosition"
                                ></v-slider>

                                    <v-btn class="play" icon dark v-on:click="togglePlay">
                                        <v-icon v-if="isPause === true">mdi-play</v-icon>
                                        <v-icon v-else>mdi-pause</v-icon>
                                    </v-btn>

                                        <v-btn icon dark v-on:click="switchMute">
                                            <v-icon v-if="volume > 0.4">mdi-volume-high</v-icon>
                                            <v-icon v-else-if="volume > 0.0">mdi-volume-medium</v-icon>
                                            <v-icon v-else>mdi-volume-off</v-icon>
                                        </v-btn>
                                        <v-slider
                                            class="slider"
                                            v-model="volume"
                                            min="0.0"
                                            max="1.0"
                                            step="0.1"
                                            color="white"
                                            track-color="grey"
                                            v-on:input="changeVolume"
                                            v-on:change="updateLastSeekTime"
                                        ></v-slider>

                                        {{ currentTimeStr }}
                                        /
                                        {{ durationStr }}

                                    <v-spacer></v-spacer>
                                    <v-btn v-if="isEnabledSubtitles === true" icon dark>
                                        <v-icon>mdi-subtitles</v-icon>
                                    </v-btn>
                                    <v-btn v-if="this.isEnabledPip === true" icon dark v-on:click="switchPip">
                                        <v-icon>mdi-picture-in-picture-bottom-right</v-icon>
                                    </v-btn>
                                    <v-btn icon dark v-on:click="switchFullScreen">
                                        <v-icon v-if="isFullscreen === false">mdi-fullscreen</v-icon>
                                        <v-icon v-else>mdi-fullscreen-exit</v-icon>
                                    </v-btn>

                </transition>

            <Video
                v-if="videoSrc !== null"
                ref="video"
                v-bind:videoSrc.sync="videoSrc"
                v-on:timeupdate="onTimeupdate"
                v-on:waiting="onWaiting"
                v-on:loadeddata="onLoadeddata"
                v-on:canplay="onCanplay"
                v-on:ended="onEnded"
                v-on:play="onPlay"
                v-on:pause="onPause"
                v-on:ratechange="onChangePlaybackRate"
                v-on:volumechange="onVolumechange"
            ></Video>

</template>

<template>

                <v-progress-circular :size="50" color="primary" indeterminate></v-progress-circular>

                <transition name="fade">

                            <v-btn v-if="duration > 0" class="add-shadow mx-4" icon dark v-on:click="rewindTime(30)">
                                <v-icon dark>mdi-rewind-30</v-icon>
                            </v-btn>
                            <v-btn v-if="duration > 0" class="add-shadow mx-4" icon dark v-on:click="rewindTime(10)">
                                <v-icon dark>mdi-rewind-10</v-icon>
                            </v-btn>
                            <v-btn class="play-button add-shadow mx-4" icon dark v-on:click="togglePlay">
                                <v-icon v-if="isPause === true" dark>mdi-play</v-icon>
                                <v-icon v-else dark>mdi-pause</v-icon>
                            </v-btn>
                            <v-btn v-if="duration > 0" class="add-shadow mx-4" icon dark v-on:click="forwardTime(10)">
                                <v-icon dark>mdi-fast-forward-10</v-icon>
                            </v-btn>
                            <v-btn v-if="duration > 0" class="add-shadow mx-4" icon dark v-on:click="forwardTime(30)">
                                <v-icon dark>mdi-fast-forward-30</v-icon>
                            </v-btn>

 0"
                            class="d-flex flex-column align-center left-buttons"
                            v-on:click="stopPropagation"
                        >
                            <v-btb class="add-shadow" icon dark v-on:click="speedUp">
                                <v-icon dark>mdi-plus-circle</v-icon>
                            </v-btb>
                            <v-btn class="add-shadow my-2" text dark v-on:click="resetSpeed">
                                x{{ playbackRate.toFixed(1) }}
                            </v-btn>
                            <v-btb class="add-shadow" icon dark v-on:click="speedDown">
                                <v-icon dark>mdi-minus-circle</v-icon>
                            </v-btb>

                                <v-slider
                                    class="slider"
                                    v-model="currentTime"
                                    :max="duration"
                                    color="white"
                                    track-color="grey"
                                    :disabled="duration === 0"
                                    v-on:start="startChangeCurrentPosition"
                                    v-on:change="endChangeCurrentPosition"
                                    v-on:input="updateCurrentPosition"
                                ></v-slider>

                                    <v-btn class="play" icon dark v-on:click="togglePlay">
                                        <v-icon v-if="isPause === true">mdi-play</v-icon>
                                        <v-icon v-else>mdi-pause</v-icon>
                                    </v-btn>

                                        <v-btn icon dark v-on:click="switchMute">
                                            <v-icon v-if="volume > 0.4">mdi-volume-high</v-icon>
                                            <v-icon v-else-if="volume > 0.0">mdi-volume-medium</v-icon>
                                            <v-icon v-else>mdi-volume-off</v-icon>
                                        </v-btn>
                                        <v-slider
                                            class="slider"
                                            v-model="volume"
                                            min="0.0"
                                            max="1.0"
                                            step="0.1"
                                            color="white"
                                            track-color="grey"
                                            v-on:input="changeVolume"
                                            v-on:change="updateLastSeekTime"
                                        ></v-slider>

                                        {{ currentTimeStr }}
                                        /
                                        {{ durationStr }}

                                    <v-spacer></v-spacer>
                                    <v-btn v-if="isEnabledSubtitles === true" icon dark>
                                        <v-icon>mdi-subtitles</v-icon>
                                    </v-btn>
                                    <v-btn v-if="this.isEnabledPip === true" icon dark v-on:click="switchPip">
                                        <v-icon>mdi-picture-in-picture-bottom-right</v-icon>
                                    </v-btn>
                                    <v-btn icon dark v-on:click="switchFullScreen">
                                        <v-icon v-if="isFullscreen === false">mdi-fullscreen</v-icon>
                                        <v-icon v-else>mdi-fullscreen-exit</v-icon>
                                    </v-btn>

                </transition>

            <Video
                v-if="videoSrc !== null"
                ref="video"
                v-bind:videoSrc.sync="videoSrc"
                v-on:timeupdate="onTimeupdate"
                v-on:waiting="onWaiting"
                v-on:loadeddata="onLoadeddata"
                v-on:canplay="onCanplay"
                v-on:ended="onEnded"
                v-on:play="onPlay"
                v-on:pause="onPause"
                v-on:ratechange="onChangePlaybackRate"
                v-on:volumechange="onVolumechange"
            ></Video>

</template>


Fixed shadow overflowing to next column by removing margin

<template>

      <uw-card
        v-for="(subcatRes, i) in Object.values(resource.subcategories)"
        :id="subcatRes.subcat_id"
        :key="i"
        loaded
        class="resource-card"
      >
        <template #card-heading>

              {{subcatRes.subcat_name}}

            <b-button
              v-if="!subcatRes.is_pinned"
              variant="link"
              class="myuw-text-sm text-muted"
              :title="`Add ${subcatRes.subcat_name} resources to home page`"
              @click="pinWrapper(subcatRes)"
            >
              Pin to Home

            <b-button
              v-else
              variant="link"
              class="myuw-text-sm text-muted"
              :title="`Remove ${subcatRes.subcat_name} resources from home page`"
              @click="unpinWrapper(subcatRes)"
            >
              Unpin

        </template>
        <template #card-body>

              {{link.title}}

        </template>
      </uw-card>

</template>


refactor

refactor

<script>
import noop from '../../utils/noop';
import clamp from '../../utils/clamp';
import getElementOffsets from '../../utils/getElementOffsets';

export default {
  name: 'Vec2Picker',
  props: {
    name: String,
    vector: {
      type: Array,
      default: () => [0, 0]
    },
    dimension: {
      type: Number,
      default: 230
    },
    onChange: {
      type: Function,
      default: noop
    }
  },
  data() {
    return {
      ctx: null,
      canvas: null,
      isMouseDown: false,
      canvasOffsets: null,
      halfSize: 0.5 * this.dimension
    };
  },
  methods: {
    drawAxes() {
      this.ctx.strokeStyle = '#000';
      this.ctx.lineWidth = 0.5;

      this.ctx.beginPath();
      this.ctx.moveTo(0, -this.halfSize);
      this.ctx.lineTo(0, this.halfSize);
      this.ctx.closePath();
      this.ctx.stroke();

      this.ctx.beginPath();
      this.ctx.moveTo(-this.halfSize, 0);
      this.ctx.lineTo(this.halfSize, 0);
      this.ctx.closePath();
      this.ctx.stroke();
    },

    axesDesignation() {
      this.ctx.font = '9px Arial';
      this.ctx.fillStyle = '#fff';

      this.ctx.fillText('X', this.halfSize - 10, -5);
      this.ctx.fillText('-X', -this.halfSize + 5, 10);

      this.ctx.fillText('Y', -10, -this.halfSize + 10);
      this.ctx.fillText('-Y', 5, this.halfSize - 5);
    },

    drawGrid() {
      const sections = 20;
      const step = this.dimension / sections;

      this.ctx.beginPath();
      this.ctx.strokeStyle = '#000';
      this.ctx.lineWidth = 0.2;

      for (let i = 0; i < sections; i++) {
        this.ctx.moveTo(-this.halfSize + step * i, -this.halfSize);
        this.ctx.lineTo(-this.halfSize + step * i, this.dimension);
        this.ctx.moveTo(-this.halfSize, -this.halfSize + step * i);
        this.ctx.lineTo(this.dimension, -this.halfSize + step * i);
      }

      this.ctx.stroke();
    },

    drawPoint(x, y) {
      y *= -1;

      this.ctx.beginPath();
      this.ctx.fillStyle = '#fff';
      this.ctx.arc(x, y, 2.3, 0, 2 * Math.PI, false);
      this.ctx.closePath();
      this.ctx.fill();

      this.ctx.save();
      this.ctx.strokeStyle = '#08c';
      this.ctx.beginPath();
      this.ctx.setLineDash([5, 2.5]);
      this.ctx.moveTo(0, 0);
      this.ctx.lineTo(x, y);
      this.ctx.stroke();
      this.ctx.restore();
    },

    draw(event) {
      this.ctx.clearRect(-this.halfSize, -this.halfSize, this.dimension, this.dimension);

      const currentX = clamp(event.pageX - this.canvasOffsets.left, 0, this.dimension);
      const currentY = clamp(event.pageY - this.canvasOffsets.top, 0, this.dimension);

      const x = currentX - this.halfSize;
      const y = -1 * (currentY - this.halfSize) || 0;

      this.drawGrid();
      this.drawAxes();
      this.axesDesignation();
      this.drawPoint(x, y);
      this.onChange(x / this.halfSize, y / this.halfSize, this.name);
    },

    onMouseDown(event) {
      this.isMouseDown = true;
      this.canvasOffsets = getElementOffsets(this.canvas);
      this.draw(event);
    },

    onMouseMove(event) {
      if (this.isMouseDown) {
        this.draw(event);
      }
    },

    onMouseUp() {
      this.isMouseDown = false;
    }
  },
  mounted() {
    this.canvas = this.$refs.vec2Picker;
    this.canvasOffsets = getElementOffsets(this.canvas);
    this.ctx = this.canvas.getContext('2d');

    this.ctx.translate(this.halfSize, this.halfSize);

    this.drawGrid();
    this.drawAxes();
    this.axesDesignation();
    this.drawPoint(this.vector[0] * this.halfSize, this.vector[1] * this.halfSize);

    document.addEventListener('mousemove', this.onMouseMove);
    document.addEventListener('mouseup', this.onMouseUp);
  },
  beforeDestroy() {
    document.removeEventListener('mousemove', this.onMouseMove);
    document.removeEventListener('mouseup', this.onMouseUp);
  }
};
</script>

<template>
  <canvas ref="vec2Picker" class="vec2-picker" :width="dimension" :height="dimension" @mousedown="onMouseDown"></canvas>
</template>

<script>
import noop from '../../utils/noop';
import clamp from '../../utils/clamp';
import getElementOffsets from '../../utils/getElementOffsets';

export default {
  name: 'Vec2Picker',
  props: {
    name: String,
    vector: {
      type: Array,
      default: () => [0, 0]
    },
    dimension: {
      type: Number,
      default: 230
    },
    onChange: {
      type: Function,
      default: noop
    }
  },
  data() {
    return {
      ctx: null,
      canvas: null,
      isMouseDown: false,
      canvasOffsets: null,
      halfSize: 0.5 * this.dimension
    };
  },
  methods: {
    drawAxes() {
      this.ctx.strokeStyle = '#000';
      this.ctx.lineWidth = 0.5;

      this.ctx.beginPath();
      this.ctx.moveTo(0, -this.halfSize);
      this.ctx.lineTo(0, this.halfSize);
      this.ctx.closePath();
      this.ctx.stroke();

      this.ctx.beginPath();
      this.ctx.moveTo(-this.halfSize, 0);
      this.ctx.lineTo(this.halfSize, 0);
      this.ctx.closePath();
      this.ctx.stroke();
    },

    axesDesignation() {
      this.ctx.font = "9px Arial";
      this.ctx.fillStyle = '#fff';

      this.ctx.fillText("X", this.halfSize - 10, -5);
      this.ctx.fillText("-X", -this.halfSize + 5, 10);

      this.ctx.fillText("Y", -10, -this.halfSize + 10);
      this.ctx.fillText("-Y", 5, this.halfSize - 5);
    },

    drawGrid() {
      const sections = 20;
      const step = this.dimension / sections;

      this.ctx.beginPath();
      this.ctx.strokeStyle = '#000';
      this.ctx.lineWidth = 0.2;

      for (let i = 0; i < sections; i++) {
        this.ctx.moveTo(-this.halfSize + step * i, -this.halfSize);
        this.ctx.lineTo(-this.halfSize + step * i, this.dimension);
        this.ctx.moveTo(-this.halfSize, -this.halfSize + step * i);
        this.ctx.lineTo(this.dimension, -this.halfSize + step * i);
      }

      this.ctx.stroke();
    },

    drawPoint(x, y) {
      y *= -1;

      this.ctx.beginPath();
      this.ctx.fillStyle = '#fff';
      this.ctx.arc(x, y, 2, 0, 2 * Math.PI, false);
      this.ctx.closePath();
      this.ctx.fill();

      this.ctx.save();
      this.ctx.strokeStyle = '#08c';
      this.ctx.beginPath();
      this.ctx.setLineDash([5, 2.5]);
      this.ctx.moveTo(0, 0);
      this.ctx.lineTo(x, y);
      this.ctx.stroke();
      this.ctx.restore();
    },

    draw(event) {
      this.ctx.clearRect(-this.halfSize, -this.halfSize, this.dimension, this.dimension);

      const currentX = clamp(event.pageX - this.canvasOffsets.left, 0, this.dimension);
      const currentY = clamp(event.pageY - this.canvasOffsets.top, 0, this.dimension);

      const x = currentX - this.halfSize;
      const y = -1 * (currentY - this.halfSize) || 0;

      this.drawGrid();
      this.drawAxes();
      this.axesDesignation();
      this.drawPoint(x, y);
      this.onChange(x / this.halfSize, y / this.halfSize, this.name);
    },

    onMouseDown(event) {
      this.isMouseDown = true;
      this.canvasOffsets = getElementOffsets(this.canvas);
      this.draw(event);
    },

    onMouseMove(event) {
      if (this.isMouseDown) {
        this.draw(event);
      }
    },

    onMouseUp() {
      this.isMouseDown = false;
    }
  },
  mounted() {
    this.canvas = this.$refs.vec2Picker;
    this.canvasOffsets = getElementOffsets(this.canvas);
    this.ctx = this.canvas.getContext('2d');

    this.ctx.translate(this.halfSize, this.halfSize);

    this.drawGrid();
    this.drawAxes();
    this.axesDesignation();
    this.drawPoint(this.vector[0] * this.halfSize, this.vector[1] * this.halfSize);

    document.addEventListener('mousemove', this.onMouseMove);
    document.addEventListener('mouseup', this.onMouseUp);
  },
  beforeDestroy() {
    document.removeEventListener('mousemove', this.onMouseMove);
    document.removeEventListener('mouseup', this.onMouseUp);
  }
};
</script>

<template>
  <canvas ref="vec2Picker" class="vec2-picker" :width="dimension" :height="dimension" @mousedown="onMouseDown"></canvas>
</template>


Fix guest name on temporary messages

Fix guest name on temporary messages

Signed-off-by: Joas Schilling <ab43a7c9cb5b2380afc4ddf8b3e2583169b39a02@schilljs.com>

<template>

			<form
				class="new-message-form">

					<button
						v-if="!currentUserIsGuest"
						class="new-message-form__button icon-clip-add-file"
						@click.prevent="handleFileShare" />

					<Quote
						v-if="messageToBeReplied"
						:is-new-message-form-quote="true"
						v-bind="messageToBeReplied" />
					<AdvancedInput
						v-model="text"
						:token="token"
						@update:contentEditable="contentEditableToParsed"
						@submit="handleSubmit" />

				<button
					type="submit"
					class="new-message-form__button submit icon-confirm-fade"
					@click.prevent="handleSubmit" />
			</form>

</template>


processing-section emits an event when toggled open or closed

<template>

        {{ sectionTitle }}

        <hide-button
          v-model="hidden"
          @input="$emit('toggle')"
        />

        <slot name="controls" />

        <template v-if="dataAvailable">
          <slot />
        </template>

          No data available

</template>

<template>

        {{ sectionTitle }}

        <hide-button v-model="hidden" />

        <slot name="controls" />

        <template v-if="dataAvailable">
          <slot />
        </template>

          No data available

</template>


refined wip page

refined wip page

<template>

              Work In Progress

Behind the scenes

Whiteboards - in upcoming days

Bike stands on street - 🤞 June

Bike stands next to doors - 🤞 end of April

Air Intake - distribution of direct air current into room - 🤞mid-April

Window mechanism - waiting for dates

New tables - waiting for price offer (mid May)

Tribune - looking for new architect and static (end of May)

Glass Meeting room - waiting for price offer

Hipster 🍰 Cakes in Black King Bar - mid April

Hipster coffe in Black King Bar - end of April

Shower 🛀🚿 - n/a

Kitchen 🥒 - n/a

              You can support us by sending funds via donate.progressbar.sk

              You can contact us via email or messenger

              info@progressbar.sk
              Contact us via ⚡Messenger

</template>

<template>

              Work In Progress

Whiteboards - in upcoming days

Air Intake - distribution of direct air current into room (🤞mid-April)

Window mechanism - waiting for dates

New tables - waiting for price offer (mid May)

Tribune - looking for new architect and static (end of May)

Glass Meeting room - waiting for price offer

Shower 🛀🚿 - n/a

Kitchen 🥒 - n/a

              You can support us by sending funds via donate.progressbar.sk

              You can contact us via email or messenger

              info@progressbar.sk
              Contact us via ⚡Messenger

</template>


clean send Object at create

clean send Object at create

<template>

      <form class="col s12">

            <input v-model="title" id="shoot_title" type="text" class="validate">
            Shoot Title

            <textarea v-model="description" id="description" class="materialize-textarea"></textarea>
            Description

            <input v-model="location.latitude" id="city" type="text" class="validate">
            City

            <input v-model="location.longitude" id="street" type="text" class="validate">
            Street

        Type
        <select v-model="type" class="browser-default">
          <option disabled value="">Choose your option</option>
          <option>training</option>
          <option>outdoor</option>
          <option>indoor</option>
        </select>

            <input v-model="nb_Ends" id="nb_Ends" type="text" class="validate">
            nb_Ends

            <input v-model="nb_ArrowsByEnd" id="nb_ArrowsByEnd" type="text" class="validate">
            nb_ArrowsByEnd

      </form>
      <button @click="validateSend()" class="btn waves-effect waves-light" type="submit" name="action">Submit
        send
      </button>

</template>


changed background to white for coach exam report view

<template>

      <router-link class="back-btn" :to="backPageLink">
        <mat-svg
          class="back svg-back"
          category="navigation"
          name="arrow_back"
        />

{{ backPageText }}

      </router-link>

      <slot></slot>

</template>