safajscomponent v0.0.94

safajscomponent

Safa javascript component's Design by MehrdadM

کامپوننت های صفا رایانه

Demo

You can see a demo and examples in this page: Demo & examples

Instalation

$ npm install safajscomponent

How to use

Add code to main.js
import SJC from 'safajscomponent/src'
Vue.use(SJC)

فرم پایه
BaseForm :

Properties

تاریخ
ClsDate :

Properties

Events

تکس باکس
ClsTextbox :

Properties

Events

دکمه
ClsButton :

Properties

Events

تیک
ClsCheckbox :

Properties

Events

کمبو
ClsCombo :

Properties

Events

توضیحات
ClsComment :

Properties

Events

| event | description |

گرید
ClsGrid :

Properties

Events

گرید سکوریتی
ClsSecurityGrid :

Properties

Events

نحوه استفاده You may use these components in your project

<BaseForm ref="نم فرم برای دسترسی در سطح برنامه"  nidForm='کد فرم که باید "جی آی دی " باشد'>
  <header>
    <h3>عنوان فرم ...</h3>
  </header>

  در صورت استفاده از این کنترل
  <ClsSecurityGrid securityId="GUID" label="عنوان">

    <ClsCheckbox :rules="[v => !!v || 'باید تیک بزنید']" required label="جنسیت - مرد/زن" id="chMale" :disabled="disabled" v-model="IsMale" />

    <ClsCombo :rules="[v => !!v || 'لطفا یک گزینه را انتخاب کنید']" required :disabled="disabled" :selectionChanged="onChange" DomainName="دامنه" DtoName="اسم جدول" v-model="فیلد برای بایندیگ" />

    <ClsComment securityId="GUID" label="گرید نوسازی" rows="5" :disabled="disabled" v-model="فیلد برای بایندینگ" />

    <ClsDate :disabled="disabled" v-model="فیلد برای بایندینگ" />

    <ClsTextbox :rules="[v => !!v || 'نام را وارد نمایید']" required label="عنوان" :disabled="disabled" maxlength="10" type="string" v-model="فیلد برای بایندینگ" />

    <ClsTextbox label="سن" :disabled="disabled" mask="###" type="number" v-model="Age" />

  </ClsSecurityGrid>

  <ClsGrid securityId="GUID"  label="عنوان" :disabled="disabled" ref="grid" :sort="sort" :selectionChanged="grid_selectionChanged" :data="فیدل برای بایندینگ">
    <ClsGridColumn selectable="true" width="40px"></ClsGridColumn>
    <ClsGridColumn securityId="GUID" field="نام فیلد"  label="عنوان"></ClsGridColumn>
    <ClsGridColumn width="200px" field="نام فیلد"  label="عنوان" template="<div  style='background-color: skyblue;'>تست #: Name #</div>"></ClsGridColumn>
    <ClsGridColumn width="200px"  controlType="date" field="StartDate" label="تاریخ شروع"></ClsGridColumn>
    <ClsGridColumn field="نام فیلد"  label="عنوان" type="number" ></ClsGridColumn>
    <ClsGridColumn field="نام فیلد"  label="عنوان"  format="{0:n0}" type="number" ></ClsGridColumn>
    <ClsGridColumn field="نام فیلد"  label="عنوان"  type="boolean"></ClsGridColumn>
    <ClsGridColumn field="نام فیلد"  label="عنوان" width="200px" controlType="Combo" DomainName="نام دامنه" DtoName="نام جدول"></ClsGridColumn>
  </ClsGrid>

  <footer>
    <ClsButton securityId="GUID" label="عنوان" v-on:click="Edit" />
    <ClsButton v-on:click="Save">عنوان</ClsButton>
  </footer>
</BaseForm>

export default {

  data: () => ({
    selecteditems: null,
    Name: 'شایان',
    Family: 'خوش آئین',
    Age: 32,
    disabled: true,
    IsMale: true,
    Comment: "پسر خوب",
    CI_...: null,
    BirthDate: "1300/01/01",
    gridData: [{
      Name: 'علی',
      Family: 'رضایی',
      UnitPrice: 2500,
      UnitsInStock: 1500,
      Discontinued: false,
      CI_SideCode: 4,
      StartDate: '1300/10/10'
    }]
  }),
  methods: {
    Edit(event) {
      .
      .
      .
      this.disabled = false;
    },
    Save(event) {
      this.$refs.frmRequest.validation();
    },
    Cancel(event) {
      .
      .
      .
      this.disabled = true;
    },
    onChange(item) {
      .
      .
      .
    },
    grid_selectionChanged(a) {
      this.selecteditems = a;
    },
    sort(a) {
      .
      .
      .
    }
  }
}